/*
 * Copyright (c) 2026 Revolver Studios. All Rights Reserved.
 */

/* Global stylesheet */

/* Reset */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
h1, h2, h3, h4, h5, h6,
p, ul, ol, dl, figure {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

a {
  position: relative;
  display: inline-block;
  color: var(--color-brand);
  text-decoration: none;
  transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

a:hover,
a:focus-visible {
  color: var(--color-brand-hover);
}

ul,
ol {
  list-style: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* Focus outline */
:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

/* Design tokens
   -- same type/spacing/grid system as the nickgoard.com portfolio build,
   ported as-is so both sites share one visual language. Revolver-specific
   deviations (no fixed max content width -- see .container below) are
   called out where they happen rather than silently drifting. */

:root {
  /* Type */
  --font-body: "Neue Montreal", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Type scale */
  --text-base: 1.125rem;
  --text-h6:   1.125rem;
  --text-h5:   1.25rem;
  --text-h4:   1.563rem;
  --text-h3:   1.953rem;
  --text-h2:   2.441rem;
  --text-h1:   6.104rem;

  /* Line height */
  --leading-h1:     1.05;
  --leading-h2:     1.1;
  --leading-h3:     1.15;
  --leading-h4:     1.2;
  --leading-h5:     1.25;
  --leading-h6:     1.3;
  --leading-normal: 1.5;

  /* Color -- placeholder brand tokens, carried over from the portfolio
     palette until Revolver's own brand colors are set. */
  --color-bg:          #000000;
  --color-text:        #ffffff;
  --color-text-muted:  #a0a0a0;
  --color-border:      #333333;

  --color-brand:       #EA348F;
  --color-brand-hover: #EE5DA5;

  --color-black:       #000000;
  --color-black-hover: #181818;

  --color-white:       #ffffff;

  /* Spacing scale */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  8rem;
}

/* Layout */

/* Revolver has no fixed content max-width (the portfolio's .container
   caps at 90rem / 1440px) -- content runs fluid edge-to-edge, keeping
   only the same inline padding-on-the-side rhythm as the portfolio. */
.container {
  width: 100%;
  padding-inline: var(--space-md);
}

.container--full {
  padding-inline: 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-md);
}

.grid > [class*="col-"] {
  min-width: 0;
}

.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

@media (max-width: 640px) {
  .grid {
    gap: var(--space-sm);
  }

  .grid > [class*="col-"] {
    grid-column: span 12;
  }

  .col-sm-1  { grid-column: span 1 !important; }
  .col-sm-2  { grid-column: span 2 !important; }
  .col-sm-3  { grid-column: span 3 !important; }
  .col-sm-4  { grid-column: span 4 !important; }
  .col-sm-6  { grid-column: span 6 !important; }
  .col-sm-12 { grid-column: span 12 !important; }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .col-md-1  { grid-column: span 1; }
  .col-md-2  { grid-column: span 2; }
  .col-md-3  { grid-column: span 3; }
  .col-md-4  { grid-column: span 4; }
  .col-md-6  { grid-column: span 6; }
  .col-md-8  { grid-column: span 8; }
  .col-md-12 { grid-column: span 12; }
}

@media (min-width: 1025px) {
  .col-lg-1  { grid-column: span 1; }
  .col-lg-2  { grid-column: span 2; }
  .col-lg-3  { grid-column: span 3; }
  .col-lg-4  { grid-column: span 4; }
  .col-lg-5  { grid-column: span 5; }
  .col-lg-6  { grid-column: span 6; }
  .col-lg-7  { grid-column: span 7; }
  .col-lg-8  { grid-column: span 8; }
  .col-lg-9  { grid-column: span 9; }
  .col-lg-10 { grid-column: span 10; }
  .col-lg-12 { grid-column: span 12; }
}

/* Spacing utilities */

.margin-top-xs  { margin-top: var(--space-xs); }
.margin-top-sm  { margin-top: var(--space-sm); }
.margin-top-md  { margin-top: var(--space-md); }
.margin-top-lg  { margin-top: var(--space-lg); }
.margin-top-xl  { margin-top: var(--space-xl); }

.padding-top-sm { padding-top: var(--space-sm); }
.padding-top-md { padding-top: var(--space-md); }
.padding-top-lg { padding-top: var(--space-lg); }
.padding-top-xl { padding-top: var(--space-xl); }

.padding-bottom-sm { padding-bottom: var(--space-sm); }
.padding-bottom-md { padding-bottom: var(--space-md); }
.padding-bottom-lg { padding-bottom: var(--space-lg); }
.padding-bottom-xl { padding-bottom: var(--space-xl); }

/* Accessibility utility */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Base type */

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
}

h1, h2, h3 {
  font-weight: 700;
}

h4, h5 {
  font-weight: 500;
}

h6 {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

h1 { line-height: var(--leading-h1); }
h2 { line-height: var(--leading-h2); }
h3 { line-height: var(--leading-h3); }
h4 { line-height: var(--leading-h4); }
h5 { line-height: var(--leading-h5); }
h6 { line-height: var(--leading-h6); }

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }
h5 { font-size: var(--text-h5); }
h6 { font-size: var(--text-h6); }

h1 { letter-spacing: -2.5px; }
h2 { letter-spacing: -1px; }
h3 { letter-spacing: -0.5px; }

@media (max-width: 640px) {
  h1 {
    font-size: 3.052rem;
    letter-spacing: -1px;
  }
}

p {
  font-weight: 400;
}

p + p {
  margin-top: var(--space-sm);
}

/* Text selection */
::selection {
  background-color: var(--color-brand);
  color: #ffffff;
}

/* ==========================================================================
   Homepage hero -- full-bleed background video with scanline overlay and a
   centered wordmark, half the width of the viewport.
   ========================================================================== */

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background-color: var(--color-black);
}

.hero__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Scanline texture overlay -- coded as a repeating CSS gradient rather
   than an image asset, so it renders crisp at any resolution with no
   extra request. Matches the old reference PNG's line weight (2px
   black bar, 3px gap) at a scale that reads clearly at normal viewing
   distance. Full width/height of the hero, opacity per spec (0.2),
   sits above the video and below the logo. */
.hero__scanlines {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(
    to bottom,
    #000000 0px,
    #000000 2px,
    transparent 2px,
    transparent 5px
  );
  opacity: 0.2;
  pointer-events: none;
}

.hero__logo-wrap {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: var(--space-md);
  pointer-events: none;
}

.hero__logo {
  width: 40%;
  height: auto;
}

@media (max-width: 640px) {
  .hero__logo {
    width: 80%;
  }
}

/* ==========================================================================
   Menu toggle + overlay -- same "+" trigger and full-viewport overlay on
   both desktop and mobile. Transparent background at all times so the
   toggle reads as part of the page/hero rather than a UI chrome bar.
   ========================================================================== */

.menu-toggle {
  position: fixed;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 100;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border: 1px solid var(--color-white);
  border-radius: 50%;
  background-color: transparent;
  color: var(--color-white);
  cursor: pointer;
  transition: border-color 0.35s cubic-bezier(0.65, 0, 0.35, 1),
              color 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.menu-toggle:hover,
.menu-toggle:focus-visible {
  border-color: var(--color-brand-hover);
  color: var(--color-brand-hover);
}

/* Open state: transparent circle with a pink border and a pink "X"
   (the bar rotation itself is handled further down). */
.menu-toggle[aria-expanded="true"] {
  border-color: var(--color-brand);
  color: var(--color-brand);
}

.menu-toggle[aria-expanded="true"]:hover,
.menu-toggle[aria-expanded="true"]:focus-visible {
  border-color: var(--color-brand-hover);
  color: var(--color-brand-hover);
}

/* Contact icons -- email + phone, stacked vertically below the menu
   toggle in the same right-aligned column. Same circle size/border
   treatment as .menu-toggle for visual consistency, fixed so they
   stay in place while scrolling. */
.contact-icons {
  position: fixed;
  bottom: var(--space-md);
  right: var(--space-md);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.contact-icons__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid var(--color-white);
  border-radius: 50%;
  color: var(--color-white);
  transition: border-color 0.35s cubic-bezier(0.65, 0, 0.35, 1),
              color 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.contact-icons__item::after {
  content: none;
}

.contact-icons__item:hover,
.contact-icons__item:focus-visible {
  border-color: var(--color-brand-hover);
  color: var(--color-brand-hover);
}

.contact-icons__icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* Info icon -- an outlined "i" (dot + stem, stroked not filled) drawn
   as inline SVG so it reads as an icon rather than a solid character,
   matching the same stroke-based line-icon language as the contact
   icons below. No rotation/morph animation -- only the button's own
   border/color transition (see .menu-toggle above and its
   [aria-expanded="true"] state) marks the open state. */
.menu-toggle__icon {
  width: 1.25rem;
  height: 1.25rem;
}

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  /* visibility itself can't "fade" -- it's either on or off -- so its
     transition is delayed to the end of the opacity fade on close
     (closing: opacity fades over 0.35s, then visibility flips to
     hidden right as it finishes) and made instant on open (opacity
     and visibility both flip immediately, so the fade-in starts right
     away instead of waiting). Without this, removing .is-open snaps
     visibility to hidden immediately and the opacity fade-out never
     gets to play. */
  transition: opacity 0.35s cubic-bezier(0.65, 0, 0.35, 1),
              visibility 0s linear 0.35s;
}

.menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s cubic-bezier(0.65, 0, 0.35, 1),
              visibility 0s linear 0s;
}

.menu-overlay__inner {
  width: 100%;
}

.menu-overlay__title {
  max-width: 40rem;
  color: var(--color-white);
}

.menu-overlay__copy {
  max-width: 40rem;
  margin-top: var(--space-md);
  font-size: var(--text-h4);
  line-height: var(--leading-h4);
  color: var(--color-white);
}

@media (max-width: 640px) {
  .menu-overlay__copy {
    font-size: var(--text-h5);
    line-height: var(--leading-h5);
  }
}