/* ════════════════════════════════════════════════════════════════
   hero.css — Omega Sound Inc.
   Hero section layout, typography, and image composition
   ════════════════════════════════════════════════════════════════ */

/* ── Hero Section Container ── */
.hero {
  position: relative;
  width: 100%;
  /* Height aligned to Y:1672 of omega_handsconnected.png (1248×3328):
     page_Y = 20vh + (1672/3328 × 250vh) = 145.6vh
     This is the mirror axis where canvas 1 ends and canvas 2 begins. */
  height: 145.6vh;
  min-height: 700px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}



/* ════════════════════════════════════════════════════════════════
   LOGO GROUP — Top Center
   The logo is the ONLY in-flow child — this keeps the group
   perfectly centered on the logo at all times.
   Socials and About are position:absolute so they never push
   the logo off-center when hidden or visible.
   ════════════════════════════════════════════════════════════════ */
.hero__logo-group {
  position: absolute;
  top: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

/* Extended hover zone — invisible pseudo-element that bridges the gap
   between the logo and its absolute-positioned social/about children.
   Without this, moving the cursor from the logo toward the icons crosses
   a gap where nothing is hovered, collapsing the state before you arrive. */
.hero__logo-group::before {
  content: '';
  position: absolute;
  left: -38vw;
  right: -20vw;
  top: -4vh;
  bottom: -4vh;
}

/* ── Omega Logo mark — only in-flow child ── */
.hero__logo {
  width: clamp(64px, 8vw, 104px);
  height: auto;
  display: block;
  transition: transform 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero__logo img {
  width: 100%;
  height: auto;
  display: block;
}

/* Rotate 180° on group hover */
.hero__logo-group:hover .hero__logo {
  transform: rotate(180deg);
}

/* ── Social icons — absolutely positioned LEFT of logo ──
   Offset derived from OmegaLogoFlipEG.png: gap ≈ 8–9 vw between the
   rightmost icon's edge and the logo's left edge, icons ≈ 4 vw each,
   gutter ≈ 2.8 vw.  All items vertically centred on the logo (top:50%). ── */
.hero__logo-socials {
  position: absolute;
  /* Place the icons' right edge at ≈30 % from the left of the viewport.
     Formula: containing-block right edge (≈50vw+52px) minus target (30vw)
     = 20vw + 52px.  This is viewport-absolute so it never drifts into the
     grey channel between the two lobe circles at any screen width. */
  right: calc(20vw + 52px);
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(20px, 2.8vw, 40px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero__logo-group:hover .hero__logo-socials {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

.hero__social-link {
  display: block;
  line-height: 0;
  flex-shrink: 0;
}

.hero__social-link img {
  width: clamp(32px, 4vw, 52px);
  height: clamp(32px, 4vw, 52px);
  object-fit: contain;
  display: block;
  /* dissolve any white/grey PNG background against the light canvas */
  mix-blend-mode: multiply;
}

/* ── Nav row (Demo | About) — absolutely positioned RIGHT of logo ──
   Container takes the same anchor as the old single "About" span.
   Items share typography; they sit side-by-side with a fixed gap. ── */
.hero__logo-nav {
  position: absolute;
  left: calc(100% + max(60px, 9vw));
  top: 50%;
  transform: translateY(-50%) translateX(-10px);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  white-space: nowrap;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero__logo-group:hover .hero__logo-nav {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

.hero__logo-nav-item {
  font-family: var(--font-sans);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: 0.15em;
  cursor: pointer;
  color: #000000;
  background: none;
  text-decoration: none;
  transition: color 0.2s ease;
}

.hero__logo-nav-item:hover {
  color: #000000;
}

/* Active page indicator */
.hero__logo-nav-item[aria-current="page"] {
  color: #000000;
}


/* ── Hero SVG overlay — connecting lines ── */
.hero__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 6;
}

.hero__lines line {
  stroke: #88CCF1;
  stroke-width: 2;
  stroke-opacity: 0.7;
}

/* ════════════════════════════════════════════════════════════════
   HERO TEXT BLOCK — lowered
   ════════════════════════════════════════════════════════════════ */

/* Register the two gradient stops as animatable typed properties.
   Plain CSS variables can't interpolate color values — @property
   declares the syntax so the browser knows how to tween them.
   inherits:true lets the value flow from .hero__text to every
   child (.hero__eyebrow, .hero__headline) without re-declaring. */
@property --hero-grad-from {
  syntax: '<color>';
  inherits: true;
  initial-value: #8BBFE8;
}
@property --hero-grad-to {
  syntax: '<color>';
  inherits: true;
  initial-value: #052145;
}

.hero__text {
  position: absolute;
  top: clamp(300px, 52vh, 520px);
  left: clamp(var(--space-lg), 5vw, 80px);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1;

  /* Seed the local copies at their resting values */
  --hero-grad-from: #8BBFE8;
  --hero-grad-to:   #052145;

  /* Animate both stops together */
  transition:
    --hero-grad-from 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    --hero-grad-to   0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* On hover: light end deepens to mid-gray, dark end goes to pure black */
.hero__text:hover {
  --hero-grad-from: #4A96CC;
  --hero-grad-to:   #020D1F;
}

.hero__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;

  background-image: linear-gradient(
    to bottom right in oklab,
    var(--hero-grad-from),
    var(--hero-grad-to)
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;

  margin-bottom: clamp(4px, 0.8vh, 12px);
  opacity: 0.75;
}

.hero__headline {
  font-family: var(--font-sans);
  font-size: var(--text-hero-line);
  font-weight: 500;
  font-style: normal;
  font-synthesis: none;
  letter-spacing: -0.025em;
  line-height: 1.0;

  background-image: linear-gradient(
    to bottom right in oklab,
    var(--hero-grad-from),
    var(--hero-grad-to)
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;

  display: block;
}

.hero__headline--sub {
  font-size: var(--text-hero-sub);
  opacity: 0.88;
}


/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Hide the canvas background on portrait mobile — the lobe circles are
     sized as a fraction of width, so on a narrow portrait viewport they
     render as two large visible grey discs at the top of the screen.
     The body fallback color (#E9E9E9, matching the canvas base fill)
     provides a clean flat background instead. */
  #omega-form-bg {
    display: none;
  }

  body {
    /* background: #E9E9E9; */
  }

  .hero__text {
    top: clamp(120px, 28vh, 220px);
    left: var(--space-md);
  }

  .hero__hand {
    height: clamp(570px, 90vh, 900px);
  }

  /* ── Logo group: switch to column so socials sit below the mark ── */
  .hero__logo-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  /* Remove the large invisible hover bridge — no hover on touch */
  .hero__logo-group::before {
    display: none;
  }

  /* Socials: always visible, in-flow horizontal row below the Ω mark */
  .hero__logo-socials {
    position: static;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    flex-direction: row;
    gap: 20px;
  }

  .hero__social-link img {
    width: 28px;
    height: 28px;
  }

  /* Nav: always visible below socials in column layout — hover doesn't work on touch */
  .hero__logo-nav {
    position: static;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    flex-direction: row;
    gap: clamp(16px, 5vw, 28px);
  }
}
}