/* ================================================================
   WSS.one — Cinematic Hero  (home page only)
   Zero-library: CSS keyframes + mask + one rAF loop + IO reveal.
   Scoped under .cine-hero / body.home so the rest of the site is
   untouched.  Brand palette: #000 · #D4AF37 · #F6D77B · #FFF.
   ================================================================ */

.cine-hero {
  --gold: #d4af37;
  --gold-2: #f6d77b;
  --ink: #f4eddb;

  position: relative;
  /* full-bleed regardless of <main> padding */
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  margin-top: calc(-1 * var(--spacing-lg, 2rem));
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
  color: var(--ink);
  text-align: center;
  isolation: isolate;
}

/* ---------- atmosphere ---------- */
.cine-atmos {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.cine-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  mix-blend-mode: screen;
  opacity: 0.55;
  will-change: transform;
}
.cine-orb-1 {
  width: 46vw; height: 46vw;
  top: -8vw; left: 8vw;
  background: radial-gradient(circle, rgba(212,175,55,0.55), rgba(212,175,55,0) 70%);
  animation: cine-drift 26s ease-in-out infinite;
}
.cine-orb-2 {
  width: 38vw; height: 38vw;
  bottom: -10vw; right: 6vw;
  background: radial-gradient(circle, rgba(246,215,123,0.40), rgba(246,215,123,0) 70%);
  animation: cine-drift 32s ease-in-out infinite reverse;
}
.cine-orb-3 {
  width: 30vw; height: 30vw;
  top: 30vw; left: 38vw;
  background: radial-gradient(circle, rgba(176,120,30,0.35), rgba(176,120,30,0) 70%);
  animation: cine-drift 38s ease-in-out infinite;
}

.cine-grain {
  position: absolute;
  inset: -50%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation: cine-grain 1.1s steps(3) infinite;
}

.cine-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.85) 100%);
}

.cine-motes { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.cine-mote {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--gold-2);
  box-shadow: 0 0 8px 1px rgba(246,215,123,0.7);
  opacity: 0;
  will-change: transform, opacity;
  animation: cine-mote-float linear infinite;
}

/* ---------- stage ---------- */
.cine-stage {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12vh 1.5rem 0;
}

.cine-phoenix-wrap {
  position: relative;
  width: clamp(220px, 34vw, 420px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  animation: cine-enter 1.6s cubic-bezier(.22,.61,.36,1) both;
}

/* inner layer — the cursor-parallax target (kept separate from the
   entrance animation so the two never fight over `transform`) */
.cine-phoenix {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  will-change: transform;
}

/* slow rotating gold ring behind the phoenix */
.cine-ring {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  border: 1px solid rgba(212,175,55,0.22);
  box-shadow: inset 0 0 40px rgba(212,175,55,0.12);
  animation: cine-spin 60s linear infinite;
}
.cine-ring::after {
  content: "";
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  border: 1px solid rgba(246,215,123,0.14);
}

.cine-phoenix-glow {
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,0.45), rgba(212,175,55,0) 62%);
  filter: blur(14px);
  animation: cine-glow 5.5s ease-in-out infinite;
}

.cine-phoenix-img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* melt the baked dark background into pure #000 */
  -webkit-mask-image: radial-gradient(circle at 50% 47%, #000 52%, transparent 73%);
  mask-image: radial-gradient(circle at 50% 47%, #000 52%, transparent 73%);
  animation: cine-breathe 7s ease-in-out infinite;
  filter: drop-shadow(0 0 26px rgba(212,175,55,0.35));
}

/* diagonal light sweep across the phoenix
   The gradient itself lives on ::before, oversized to 250% of .cine-sweep's
   box (same ratio the old background-size used) and animated with
   transform:translate instead of background-position — translate is
   compositor-only, so this infinite animation no longer forces paint/layout
   on every frame. .cine-sweep stays a static mask/clip container. */
.cine-sweep {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  border-radius: 50%;
  -webkit-mask-image: radial-gradient(circle at 50% 47%, #000 52%, transparent 73%);
  mask-image: radial-gradient(circle at 50% 47%, #000 52%, transparent 73%);
  mix-blend-mode: screen;
}
.cine-sweep::before {
  content: "";
  position: absolute;
  inset: -75%;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.18) 50%, transparent 62%);
  animation: cine-sweep 9s ease-in-out infinite;
}

/* ---------- headline ---------- */
.cine-headline {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: 0.16em;
  margin: 5vh 0 0;
  font-size: clamp(2.2rem, 7vw, 5.2rem);
  text-shadow: 0 2px 40px rgba(212,175,55,0.18);
}
.cine-word { display: block; }
.cine-word:nth-child(2) {
  color: var(--gold);
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cine-tagline {
  font-family: "Jost", var(--font-family);
  font-weight: 300;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  font-size: clamp(0.62rem, 1.5vw, 0.86rem);
  color: rgba(244,237,219,0.66);
  margin: 1.6rem 0 0;
}

.cine-cta {
  display: flex;
  gap: 1rem;
  margin-top: 2.6rem;
  flex-wrap: wrap;
  justify-content: center;
}
.cine-btn {
  font-family: "Jost", var(--font-family);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.74rem;
  padding: 0.95rem 2.1rem;
  border-radius: 2px;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}
.cine-btn:hover { text-decoration: none; transform: translateY(-2px); }
.cine-btn-primary {
  color: #000;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  box-shadow: 0 8px 30px rgba(212,175,55,0.25);
}
.cine-btn-primary:hover { color: #000; box-shadow: 0 10px 40px rgba(212,175,55,0.45); }
.cine-btn-ghost {
  color: var(--gold-2);
  border-color: rgba(212,175,55,0.5);
  background: transparent;
}
.cine-btn-ghost:hover { color: #000; background: var(--gold); border-color: var(--gold); }

/* ---------- scroll cue ---------- */
.cine-scroll {
  position: absolute;
  bottom: 2.4rem; left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  width: 26px; height: 42px;
  border: 1px solid rgba(212,175,55,0.5);
  border-radius: 14px;
}
.cine-scroll span {
  position: absolute;
  top: 8px; left: 50%;
  width: 3px; height: 7px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--gold-2);
  animation: cine-scroll 1.8s ease-in-out infinite;
}

/* ---------- transition into the light page ---------- */
.cine-transition {
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  margin-top: -1px;
  position: relative;
  height: 140px;
  background: linear-gradient(to bottom, #000 0%, var(--color-background, #fff) 100%);
}

/* ---------- scroll-reveal (only when JS is on) ---------- */
.cine-js [data-io] { opacity: 0; transform: translateY(22px); }
.cine-js [data-io].reveal {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s ease, transform 0.9s ease;
}
/* Delays capped well below the old 1.05s-2.7s range — that span was sitting
   directly on top of the LCP element (the first headline word), inflating
   LCP by however long the browser waited to even start revealing it. The
   first word now reveals immediately; the rest keep a much shorter stagger
   so the sequence still reads as choreographed. */
.cine-js .cine-word[data-io]:nth-child(1).reveal { transition-delay: 0s; }
.cine-js .cine-word[data-io]:nth-child(2).reveal { transition-delay: 0.15s; }
.cine-js .cine-word[data-io]:nth-child(3).reveal { transition-delay: 0.3s; }
.cine-js .cine-tagline[data-io].reveal { transition-delay: 0.45s; }
.cine-js .cine-cta[data-io].reveal { transition-delay: 0.6s; }

/* ================================================================
   Home header: transparent overlay -> solid on scroll
   ================================================================ */
body.home { overflow-x: hidden; }
body.home header {
  position: fixed;
  left: 0; right: 0; top: 0;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease;
}
body.home header .logo a,
body.home header nav a { color: #f4eddb; }
body.home header nav a:hover { background-color: rgba(212,175,55,0.16); color: #fff; }
body.home header nav a.is-active { background-color: rgba(212,175,55,0.85); color: #000; }
body.home .hamburger-icon,
body.home .hamburger-icon::before,
body.home .hamburger-icon::after { background-color: #f4eddb; }
body.home header.scrolled {
  background-color: rgba(8, 7, 6, 0.92);
  border-bottom-color: rgba(212,175,55,0.22);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ---------- keyframes ---------- */
@keyframes cine-enter {
  /* filter:blur() removed — it's a non-compositable property that forces
     paint/composite on every frame of this animation. opacity+scale alone
     still reads as a soft entrance, without the Total Blocking Time cost. */
  from { opacity: 0; transform: scale(0.86); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes cine-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}
@keyframes cine-glow {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 0.8;  transform: scale(1.06); }
}
@keyframes cine-spin { to { transform: rotate(360deg); } }
@keyframes cine-sweep {
  0%   { transform: translate(45%, -45%); opacity: 0; }
  35%  { opacity: 1; }
  70%  { transform: translate(-45%, 45%); opacity: 0; }
  100% { transform: translate(-45%, 45%); opacity: 0; }
}
@keyframes cine-drift {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(4vw, -3vw); }
}
@keyframes cine-grain {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-6%, 4%); }
}
@keyframes cine-mote-float {
  0%   { opacity: 0; transform: translateY(0) scale(0.6); }
  15%  { opacity: 0.9; }
  85%  { opacity: 0.7; }
  100% { opacity: 0; transform: translateY(-70vh) scale(1); }
}
@keyframes cine-scroll {
  0%   { opacity: 0; transform: translateY(0); }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(16px); }
}

/* ---------- mobile ---------- */
@media (max-width: 768px) {
  .cine-motes, .cine-sweep, .cine-orb-3 { display: none; }
  .cine-stage { padding-top: 16vh; }
  .cine-headline { letter-spacing: 0.12em; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .cine-orb, .cine-grain, .cine-sweep::before, .cine-phoenix-img,
  .cine-phoenix-glow, .cine-ring, .cine-motes, .cine-scroll span,
  .cine-phoenix-wrap { animation: none !important; }
  .cine-motes { display: none; }
  .cine-js [data-io],
  .cine-js [data-io].reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cine-phoenix-glow { opacity: 0.6; }
}