/* ============================================================
   Hero: title screen
   ============================================================ */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:48px 20px 90px;overflow:hidden;
  background:
    radial-gradient(ellipse 70% 55% at 50% 40%,rgba(122,26,44,.75),transparent 70%),
    radial-gradient(ellipse 90% 40% at 50% 110%,rgba(185,83,29,.35),transparent 70%),
    linear-gradient(var(--deep),var(--maroon) 55%,var(--deep));
}
/* rotating light rays + breathing halo */
.hero::before{
  content:"";position:absolute;left:50%;top:44%;width:170vmax;height:170vmax;transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg,rgba(255,206,120,.13) 0deg 3deg,transparent 3deg 13deg);
  -webkit-mask-image:radial-gradient(circle,#000 0,transparent 42%);mask-image:radial-gradient(circle,#000 0,transparent 42%);
  animation:rays 160s linear infinite;pointer-events:none;
}
@keyframes rays{to{transform:translate(-50%,-50%) rotate(360deg)}}
.hero::after{
  content:"";position:absolute;left:50%;top:44%;width:min(120vw,900px);aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,170,70,.28) 0%,rgba(224,116,42,.12) 35%,transparent 65%);
  mix-blend-mode:screen;animation:breathe 6s ease-in-out infinite;pointer-events:none;
}
@keyframes breathe{0%,100%{opacity:.6;transform:translate(-50%,-50%) scale(.94)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}

.mandala{
  position:absolute;left:50%;top:50%;width:min(130vw,880px);aspect-ratio:1;transform:translate(-50%,-50%);
  opacity:.45;filter:drop-shadow(0 0 6px rgba(230,190,110,.55));animation:spin 180s linear infinite;pointer-events:none;
}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.mandala *{fill:none;stroke:var(--gold-hi);stroke-width:.7;vector-effect:non-scaling-stroke}
.mandala .dot{fill:var(--gold);stroke:none}

.sparkle{
  position:absolute;z-index:1;width:var(--z);height:var(--z);left:var(--x);top:var(--y);pointer-events:none;
  background:radial-gradient(circle,#fff8de,#ffd57a 55%,transparent 70%);
  clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);
  filter:drop-shadow(0 0 6px #ffcf6a);opacity:0;animation:glint var(--t) ease-in-out var(--dl) infinite;
}
@keyframes glint{0%,100%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}}

.hero-inner{position:relative;z-index:2;max-width:760px;padding-top:56px}
.hi{font-family:var(--display);font-size:clamp(1.5rem,4.5vw,2.2rem);filter:drop-shadow(0 0 14px rgba(230,190,110,.5))}
.eyebrow{margin-top:1.4rem;font-size:.78rem;letter-spacing:.4em;text-transform:uppercase;color:var(--cream);opacity:.8}
.title{
  margin-top:.6rem;font-family:var(--serif);font-weight:700;line-height:.98;letter-spacing:-.01em;
  font-size:clamp(3.4rem,14vw,8rem);
  filter:drop-shadow(0 0 22px rgba(224,160,70,.38)) drop-shadow(0 3px 18px rgba(0,0,0,.5));
}
.title em{font-style:italic;font-weight:500;display:block;filter:drop-shadow(0 0 20px rgba(224,116,42,.45))}
.tagline{margin-top:1.4rem;font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,3.4vw,1.6rem);color:var(--cream);opacity:.92}
.host{font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;opacity:.85}
.host strong{font-weight:500;color:var(--gold-hi)}

.orn{display:flex;align-items:center;justify-content:center;gap:14px;margin:1.8rem 0}
.orn i{display:block;width:min(90px,18vw);height:1px;background:linear-gradient(90deg,transparent,var(--gold-hi));filter:drop-shadow(0 0 4px rgba(230,190,110,.8))}
.orn i:last-child{transform:scaleX(-1)}
.orn b{width:9px;height:9px;transform:rotate(45deg);background:var(--gold);box-shadow:0 0 14px 2px rgba(230,190,110,.8)}

.scroll{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);width:26px;height:42px;z-index:2;
  border:1px solid rgba(201,162,75,.6);border-radius:14px;box-shadow:0 0 16px rgba(201,162,75,.3);
}
.scroll.rv{transform:translate(-50%,22px)}
.scroll.rv.in{transform:translateX(-50%)}
.scroll span{position:absolute;left:50%;top:8px;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;background:var(--gold);animation:drop 2s infinite}
@keyframes drop{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

@media(prefers-reduced-motion:reduce){.mandala{animation:none}}