:root{
  --bg:#0a0b0e;
  --bg-deep:#050507;
  --steel:#c3c9d3;
  --steel-dim:#6b727d;
  --rose:#c65a6b;
  --rose-deep:#8a2036;
  --gold:#d8b46a;
  --gold-light:#f2e0b0;
  --text:#d7dae1;
  --muted:#767b85;
  --sans:"Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --serif:Georgia,"Times New Roman","PT Serif",serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--bg-deep);
  color:var(--text);
  font-family:var(--serif);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

/* ---------- stage ---------- */
.stage{
  position:relative;
  height:100dvh;
  min-height:100dvh;
  overflow:hidden;
  background:
    radial-gradient(130% 100% at 50% 8%, #14161c 0%, #0a0b0e 46%, #050507 100%);
  animation:stageIn 1.4s ease both;
}
@keyframes stageIn{from{opacity:0}to{opacity:1}}

.photo{
  position:absolute; inset:0; pointer-events:none;
  background-image:url("/assets/img/hero-knight.jpg");
  background-size:cover;
  background-position:50% 18%;
  filter:brightness(.62) saturate(.88) contrast(1.05);
  animation:kenburns 36s ease-in-out infinite alternate;
  will-change:transform;
}
.photo::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(5,5,7,.62) 0%, rgba(5,5,7,.28) 30%, rgba(5,5,7,.38) 62%, rgba(5,5,7,.86) 100%),
    radial-gradient(90% 70% at 50% 46%, rgba(5,5,7,0) 30%, rgba(5,5,7,.55) 100%);
}
@keyframes kenburns{
  from{transform:scale(1.02) translateY(0)}
  to{transform:scale(1.11) translateY(-1.6%)}
}

.spotlight{
  position:absolute; inset:0;
  background:radial-gradient(60% 46% at 50% 40%, rgba(150,168,196,.16), rgba(150,168,196,0) 70%);
  mix-blend-mode:screen;
  animation:spot 9s ease-in-out infinite;
  pointer-events:none;
}
@keyframes spot{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}

.vignette{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 100% at 50% 42%, transparent 52%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 22%, transparent 72%, rgba(0,0,0,.6) 100%);
}

.petals{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;}

.grain{
  position:fixed; inset:-50%; width:200%; height:200%; pointer-events:none; z-index:9;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation:grain 1.1s steps(3) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}33%{transform:translate(-4%,3%)}66%{transform:translate(3%,-2%)}100%{transform:translate(0,0)}
}

/* ---------- top bar ---------- */
.topbar{
  position:absolute; top:0; left:0; right:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(1.1rem,3vw,1.9rem) clamp(1.3rem,4vw,2.8rem);
  animation:fadeSlow 2s ease .6s both;
}
.topbar__mark{
  font-family:var(--serif); font-size:.95rem; letter-spacing:.32em;
  color:var(--steel); padding-right:.05em;
  border:1px solid rgba(195,201,211,.28);
  width:2.55rem; height:2.55rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.topbar__note{
  font-family:var(--sans); font-size:.62rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--muted);
}
@keyframes fadeSlow{from{opacity:0}to{opacity:1}}

/* ---------- hero ---------- */
.hero{
  position:relative; z-index:4;
  height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:5.5rem 1.5rem 4.5rem;
  gap:clamp(.6rem,2vh,1.4rem);
}

.eyebrow{
  font-family:var(--sans);
  font-size:clamp(.6rem,1.6vw,.72rem);
  letter-spacing:.44em; text-transform:uppercase;
  color:var(--steel-dim);
  margin:0 0 .3rem; padding-left:.44em;
}

/* emblem */
.emblem{
  position:relative;
  width:clamp(118px,21vh,186px);
  height:clamp(118px,21vh,186px);
  display:grid; place-items:center;
  will-change:transform;
}
.emblem__glow{
  position:absolute; inset:-18%;
  background:radial-gradient(circle at 50% 46%, rgba(216,180,106,.22), rgba(198,90,107,.12) 38%, transparent 68%);
  filter:blur(6px);
  animation:spot 9s ease-in-out infinite;
}
.rose{
  position:relative;
  width:100%; height:100%;
  overflow:visible;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(180,196,220,.14));
}
.rose__spin{ transform-origin:0 0; animation:spin 90s linear infinite; }
.ring--outer use{ fill:url(#steel); stroke:rgba(202,162,95,.35); stroke-width:.6; }
.ring--mid use{ fill:url(#steel2); stroke:rgba(202,162,95,.28); stroke-width:.5; }
.ring--inner use{ fill:url(#rose); stroke:rgba(243,195,203,.35); stroke-width:.5; }
.ring{ transform-origin:0 0; }
.ring--outer{ animation:breathe 7s ease-in-out infinite; }
.ring--mid{ animation:breathe 7s ease-in-out infinite reverse; }
.ring--inner{ animation:breathe 5.5s ease-in-out infinite; }
.bud,.bud__swirl{ transform-origin:0 0; }

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}

/* wordmark */
.mark{
  margin:.2rem 0 0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.9rem,10.5vw,6.1rem);
  line-height:.94;
  letter-spacing:.02em;
  display:flex; justify-content:center;
  white-space:nowrap;
}
.mark span{
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:220% 100%;
  animation-duration:8s; animation-timing-function:ease-in-out; animation-iteration-count:infinite;
}
.mark__grit{
  background-image:linear-gradient(100deg,#8b929c 0%,#eef1f6 26%,#aab0bb 46%,#6d747f 74%,#c3c9d3 100%);
  animation-name:sheen;
}
.mark__heart{
  background-image:linear-gradient(100deg,#a8788f 0%,#f2e0b0 24%,#d8b46a 44%,#c65a6b 70%,#8a2036 100%);
  animation-name:sheen; animation-delay:-3s;
}
@keyframes sheen{0%,100%{background-position:8% 0}50%{background-position:92% 0}}

.tagline{
  margin:.2rem 0 0;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(.95rem,2.6vw,1.28rem);
  color:#c6cad2;
  max-width:26ch;
  line-height:1.5;
  text-wrap:balance;
  text-shadow:0 1px 14px rgba(5,5,7,.9);
}
.eyebrow,.status{ text-shadow:0 1px 10px rgba(5,5,7,.9); }
.mark{ filter:drop-shadow(0 4px 22px rgba(5,5,7,.75)); }

.status{
  margin-top:.6rem;
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--sans); font-size:.66rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--muted);
}
.status__dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 0 0 rgba(216,180,106,.6);
  animation:pulse 2.6s ease-out infinite;
}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(216,180,106,.5)}70%{box-shadow:0 0 0 9px rgba(216,180,106,0)}100%{box-shadow:0 0 0 0 rgba(216,180,106,0)}}

/* scroll cue */
.cue{
  position:absolute; bottom:clamp(1.1rem,3.5vh,2.2rem); left:50%; transform:translateX(-50%);
  z-index:4;
}
.cue__line{
  display:block; width:1px; height:44px;
  background:linear-gradient(180deg, rgba(216,180,106,0), var(--gold) 40%, rgba(216,180,106,0));
  animation:cue 2.8s ease-in-out infinite;
}
@keyframes cue{0%,100%{opacity:.35;transform:scaleY(.7)}50%{opacity:1;transform:scaleY(1)}}

/* ---------- reveal orchestration ---------- */
.reveal{opacity:0; animation:rise 1.1s cubic-bezier(.2,.7,.2,1) forwards; animation-delay:var(--d,0s);}
@keyframes rise{from{opacity:0;transform:translateY(20px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
.reveal-emblem{opacity:0; animation:emblemIn 1.6s cubic-bezier(.2,.7,.2,1) .25s forwards;}
@keyframes emblemIn{from{opacity:0;transform:scale(.8) translateY(10px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .stage,.reveal,.reveal-emblem,.topbar{animation:none !important;opacity:1 !important;transform:none !important;filter:none !important;}
  .rose__spin,.ring,.spotlight,.emblem__glow,.grain,.mark span,.status__dot,.cue__line,.photo{animation:none !important;}
  .petals{display:none;}
  .mark__grit{background-position:0 0}
  .mark__heart{background-position:60% 0}
}

@media (max-width:520px){
  .hero{padding-top:5rem}
  .tagline{max-width:20ch}
}