/* ==========================================================================
   Everything Will Be OK — neon hero (Nov 2026)
   Full-screen night wall, the flickering neon sign, two CTAs.
   Parallax and the irregular per-tube flicker are driven by NeonHero() in the
   home page script; the tube, glass and wall-light images are in /ok/assets/hero/neon/.
   ========================================================================== */
.neon-hero {
  position: relative; z-index: 3; isolation: isolate; overflow: hidden;
  height: 100vh; height: 100svh; min-height: 560px;
  background: #140D0A; color: #F5EEE3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --hh: max(100vh, 560px);
  --lw: min(900px, 80vw, (var(--hh) - 300px) * 2.08);
}
@supports (height: 100svh) { .neon-hero { --hh: max(100svh, 560px); } }
.neon-hero * { box-sizing: border-box; }

/* layers */
.nh-wall, .nh-shade, .nh-dark { position: absolute; inset: 0; pointer-events: none; }
.nh-wall {
  z-index: -3; inset: -2% 0 0 0;
  background: #120C09 url('/ok/assets/hero/brick-wall-2560.jpg') center 40% / cover no-repeat;
  transform: scale(1.04); transform-origin: 50% 30%; will-change: transform;
}
@media (max-width: 1440px) { .nh-wall { background-image: url('/ok/assets/hero/brick-wall-1600.jpg'); } }
@media (max-aspect-ratio: 4/5) { .nh-wall { background-image: url('/ok/assets/hero/brick-wall-mobile.jpg'); } }
.nh-shade {
  z-index: -2;
  background:
    radial-gradient(ellipse 70% 62% at 50% 45%, rgba(10,6,4,.28) 0%, rgba(10,6,4,.46) 55%, rgba(8,5,3,.9) 100%),
    linear-gradient(to bottom, rgba(8,5,3,.55) 0%, rgba(8,5,3,0) 20%, rgba(8,5,3,0) 62%, rgba(20,13,10,.9) 100%);
}
.nh-dark { z-index: 4; background: #0C0806; opacity: 0; }

/* top row */
.nh-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 40px;
  font-family: 'Inter', -apple-system, sans-serif; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500}
.nh-by { color: rgba(245,238,227,.78); }
.nh-lang { display: flex; gap: 6px; }
.nh-lang a { color: rgba(245,238,227,.5); padding: 4px 6px; text-decoration: none; transition: color .2s; }
.nh-lang a:hover { color: #FFA63D; }
.nh-lang a.active { color: #F5EEE3; border-bottom: 1px solid rgba(245,238,227,.7); }

/* the sign — four real-looking tubes (see NeonHero in the home page script).
   Layer boxes are derived from the letter width --lw: the tube/glass canvas is 1.24 lw wide
   (0.5568 of its width tall), the wall light map is 2 canvases wide and 1.556 canvases tall. */
.nh-main {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 76px 24px 72px; text-align: center;
}
.nh-sign { position: relative; width: var(--lw); aspect-ratio: 3200 / 1536; flex: none; }
.nh-layer { position: absolute; pointer-events: none; will-change: transform, opacity; }
.nh-glass, .nh-tubes { width: calc(var(--lw) * 1.24); height: calc(var(--lw) * 0.6904); left: calc(50% - var(--lw) * 0.62); top: calc(50% - var(--lw) * 0.3452); }
.nh-glass { display: block; max-width: none; }
.nh-tubes { mix-blend-mode: screen; }
.nh-lights { mix-blend-mode: color-dodge; width: calc(var(--lw) * 2.48); height: calc(var(--lw) * 1.9294); left: calc(50% - var(--lw) * 1.24); top: calc(50% - var(--lw) * 0.9647); }
.nh-tubes img, .nh-lights img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; mix-blend-mode: screen; opacity: 0; }

/* subtitle + CTAs */
.nh-sub { font-family: 'Newsreader', 'Literata', Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(17px, 1.9vw, 23px); line-height: 1.35; color: rgba(245,238,227,.9); margin: clamp(22px, 4.6vh, 46px) auto clamp(18px, 3vh, 28px); max-width: 40ch; text-wrap: balance; position: relative; z-index: 2; will-change: transform, opacity; text-shadow: 0 1px 12px rgba(10,6,4,.8) !important; }
.nh-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 2; will-change: transform, opacity; }
.nh-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px;
  font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; text-decoration: none;
  border: 1px solid transparent; transition: all .25s cubic-bezier(.2,.8,.2,1);
}
.nh-btn .arrow { display: inline-block; transition: transform .25s; }
.nh-btn:hover .arrow { transform: translateX(3px); }
.nh-btn-primary { background: #FFA63D; color: #140D0A; box-shadow: 0 0 0 1px rgba(255,166,61,.4), 0 8px 40px rgba(255,122,26,.35); }
.nh-btn-primary:hover { background: #FFE9C4; transform: translateY(-1px); }
.nh-btn-ghost { color: #F5EEE3; border-color: rgba(245,238,227,.34); background: rgba(20,13,10,.35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.nh-btn-ghost:hover { border-color: #FFA63D; color: #FFA63D; }
.nh-btn:focus-visible, .nh-cue:focus-visible, .nh-lang a:focus-visible { outline: 2px solid #FFA63D; outline-offset: 3px; }

/* scroll cue */
.nh-cue {
  position: absolute; z-index: 2; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: none; border: 0; cursor: pointer; color: rgba(245,238,227,.55);
  font-family: 'Inter', -apple-system, sans-serif; font-size: 11px; letter-spacing: 0.17em; text-transform: uppercase; font-weight: 500}
.nh-cue i { display: block; width: 1px; height: 34px; background: linear-gradient(to bottom, rgba(255,166,61,0), #FFA63D); transform-origin: top; animation: nhCue 2.2s cubic-bezier(.6,0,.4,1) infinite; }
@keyframes nhCue { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* scroll cue only where there is room under the buttons */
@media (max-height: 759px), (max-width: 720px) { .nh-cue { display: none; } }
@media (min-height: 760px) and (min-width: 721px) { .nh-main { padding-bottom: 104px; } }

/* tablets / small laptops */
@media (max-width: 1024px) { .nh-top { padding: 20px 28px; } }

/* phones */
@media (max-width: 720px) {
  .neon-hero { --hh: max(100vh, 600px); --lw: min(92vw, (var(--hh) - 330px) * 2.08); }
  @supports (height: 100svh) { .neon-hero { --hh: max(100svh, 600px); } }
  .neon-hero { min-height: 600px; }
  .nh-top { padding: 16px 20px; padding-top: max(16px, env(safe-area-inset-top)); font-size: 10px; letter-spacing: .2em; }
  .nh-main { padding: 64px 20px max(36px, env(safe-area-inset-bottom)); }
  .nh-sub { font-size: 17px; max-width: 26ch; margin-top: clamp(26px, 6vh, 48px); }
  .nh-cta { flex-direction: column; align-items: stretch; width: min(320px, 100%); gap: 10px; }
  .nh-btn { justify-content: center; padding: 15px 22px; }
  .nh-btn-ghost { padding: 13px 22px; }
}
/* phones in landscape / very short windows */
@media (max-height: 520px) and (orientation: landscape) {
  .neon-hero { min-height: 100vh; min-height: 100svh; --lw: min(70vw, (100vh - 150px) * 2.08); }
  @supports (height: 100svh) { .neon-hero { --lw: min(70vw, (100svh - 150px) * 2.08); } }
  .nh-main { padding: 46px 24px 18px; }
  .nh-sub { display: none; }
  .nh-cta { flex-direction: row; width: auto; margin-top: 18px; }
  .nh-top { padding: 12px 24px; }
}

/* home top bar on small phones: keep it on one line (language switch stays in the hero and footer) */
@media (max-width: 480px) {
  .topbar .wordmark { white-space: nowrap; font-size: 15px; }
  .topbar .lang { display: none; }
  .topbar { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .nh-cue i { animation: none !important; }
  .nh-tubes img, .nh-lights img { opacity: 1; }
  .nh-wall { transform: none; }
}

/* film grain + the faint electrical hum of the tubes (Nov 2026, v3) */
.nh-grain {
  position: absolute; inset: -60px; z-index: 1; pointer-events: none;
  background: url('/ok/assets/hero/grain.png') repeat; background-size: 256px 256px;
  mix-blend-mode: overlay; opacity: .09;
  animation: nhGrain .9s steps(1, end) infinite;
}
@keyframes nhGrain {
  0% { transform: translate(0, 0); } 12% { transform: translate(-23px, 11px); } 25% { transform: translate(17px, -31px); }
  37% { transform: translate(-9px, 27px); } 50% { transform: translate(29px, 7px); } 62% { transform: translate(-31px, -17px); }
  75% { transform: translate(5px, 33px); } 87% { transform: translate(21px, -5px); }
}
.nh-tubes img, .nh-lights img { animation: nhHum 1.37s steps(1, end) infinite; }
.nh-tube-1, .nh-lamp-1 { animation-duration: 1.71s !important; animation-delay: -.4s !important; }
.nh-tube-2, .nh-lamp-2 { animation-duration: 1.13s !important; animation-delay: -.7s !important; }
.nh-tube-3, .nh-lamp-3 { animation-duration: .83s !important; }
@keyframes nhHum {
  0% { filter: brightness(1); } 17% { filter: brightness(.975); } 23% { filter: brightness(1.01); }
  41% { filter: brightness(.99); } 58% { filter: brightness(1); } 71% { filter: brightness(.982); } 79% { filter: brightness(1.008); }
}
@media (prefers-reduced-motion: reduce) { .nh-grain, .nh-tubes img, .nh-lights img { animation: none !important; } }