/* ═══ SKYBRINGER — landing.css ═══ */

#landing { position:fixed; inset:0; z-index:50; overflow-y:auto; overflow-x:hidden; scroll-behavior:smooth; background:var(--ink); opacity:0; visibility:hidden; transition:opacity 0.8s cubic-bezier(.4,0,.2,1); -webkit-overflow-scrolling:touch; overscroll-behavior:none; }
#landing.show { opacity:1; visibility:visible; }
#landing.gone { display:none; }

#ls-progress { position:fixed; top:0; left:0; height:3px; width:0; z-index:60; background:linear-gradient(90deg,var(--gold-dim),var(--gold-main),var(--gold-bright)); box-shadow:0 0 12px var(--gold-glow); transition:width 0.1s linear; pointer-events:none; }

#ls-topbar { position:fixed; top:0; left:0; right:0; z-index:58; display:flex; align-items:center; justify-content:space-between; padding:18px clamp(18px,5vw,60px); padding-top:max(18px,env(safe-area-inset-top,0px)); transition:background 0.4s,backdrop-filter 0.4s,padding 0.3s; pointer-events:none; }
#ls-topbar.scrolled { background:rgba(var(--ink-rgb),0.62); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid rgba(var(--gold-hi-rgb),0.12); }
.ls-wordmark { font-family:'Cinzel Decorative',serif; font-weight:900; font-size:clamp(16px,2.2vw,22px); letter-spacing:0.18em; color:var(--gold-main); text-shadow:0 0 18px rgba(var(--gold-hi-rgb),0.35); pointer-events:auto; }
.ls-nav-cta { pointer-events:auto; font-family:'Rajdhani',sans-serif; font-weight:700; font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink); background:linear-gradient(135deg,var(--gold-main),var(--gold-dim)); border:none; padding:10px 22px; border-radius:3px; cursor:pointer; transition:transform 0.18s,box-shadow 0.18s; }
.ls-nav-cta:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(var(--gold-hi-rgb),0.3); }

.ls { position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; overflow:hidden; padding:clamp(70px,12vh,140px) clamp(20px,7vw,110px); }

.ls-bg { position:absolute; left:0; right:0; top:-14%; bottom:-14%; background-color:var(--ink); background-size:cover; background-position:center; background-repeat:no-repeat; transform:translate3d(0,var(--py,0px),0) scale(1.04); will-change:transform; z-index:0; }
.ls-bg video { position:absolute; top:-10%; left:-10%; width:120%; height:120%; object-fit:cover; }

.ls-veil { position:absolute; inset:0; z-index:1; }
.ls-veil.v-center { background:radial-gradient(ellipse at center,rgba(var(--ink-rgb),0.25) 0%,rgba(var(--ink-rgb),0.78) 100%),linear-gradient(180deg,rgba(var(--ink-rgb),0.55) 0%,transparent 35%,transparent 60%,rgba(var(--ink-rgb),0.85) 100%); }
.ls-veil.v-left { background:linear-gradient(90deg,rgba(var(--ink-rgb),0.88) 0%,rgba(var(--ink-rgb),0.55) 45%,transparent 80%),linear-gradient(180deg,rgba(var(--ink-rgb),0.4) 0%,transparent 40%,rgba(var(--ink-rgb),0.5) 100%); }
.ls-veil.v-right { background:linear-gradient(270deg,rgba(var(--ink-rgb),0.88) 0%,rgba(var(--ink-rgb),0.55) 45%,transparent 80%),linear-gradient(180deg,rgba(var(--ink-rgb),0.4) 0%,transparent 40%,rgba(var(--ink-rgb),0.5) 100%); }

.ls-inner { position:relative; z-index:2; width:100%; max-width:620px; }
.ls-inner.align-center { margin:0 auto; text-align:center; max-width:760px; }
.ls-inner.align-right { margin-left:auto; text-align:right; }

.ls-eyebrow { font-family:'Rajdhani',sans-serif; font-weight:600; font-size:clamp(11px,1.4vw,14px); letter-spacing:0.42em; text-transform:uppercase; color:var(--gold-main); margin-bottom:18px; }
.ls-title { font-family:'Cinzel',serif; font-weight:900; font-size:clamp(34px,6.5vw,76px); line-height:1.02; color:var(--pearl); text-shadow:0 4px 40px rgba(var(--black-rgb),0.6); margin-bottom:22px; }
.ls-title .accent { color:var(--gold-main); }

.ls-hero { text-align:center; }
.ls-hero .ls-bg { background-image:var(--bg1); }
@media (max-width:768px) { .ls-hero .ls-bg video { display:none; } }
.ls-hero .ls-inner { max-width:min(1120px,94vw); }

.ls-hero-title { font-family:'Cinzel Decorative',serif; font-size:clamp(40px,8.2vw,104px); line-height:1.05; letter-spacing:0.06em; white-space:nowrap; padding:0 0.08em; background:linear-gradient(180deg,var(--gold-bright) 0%,var(--gold-main) 55%,var(--gold-dim) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; text-shadow:0 0 60px rgba(var(--gold-hi-rgb),0.25); }
.ls-hero .ls-eyebrow { display:inline-flex; align-items:center; gap:16px; }
.ls-hero .ls-eyebrow::before,.ls-hero .ls-eyebrow::after { content:""; width:clamp(28px,6vw,70px); height:1px; background:linear-gradient(90deg,transparent,var(--gold-main)); }
.ls-hero .ls-eyebrow::after { background:linear-gradient(270deg,transparent,var(--gold-main)); }

.ls-meta { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:clamp(14px,2.4vw,30px); margin-top:34px; font-family:'Rajdhani',sans-serif; font-weight:600; font-size:clamp(11px,1.2vw,13px); letter-spacing:0.24em; text-transform:uppercase; color:rgba(240,248,255,0.62); }
.ls-meta span { white-space:nowrap; }
.ls-meta .dot { width:4px; height:4px; border-radius:50%; background:var(--gold-main); opacity:0.7; }

.ls-rule { width:64px; height:2px; background:linear-gradient(90deg,var(--gold-main),transparent); margin-bottom:22px; }
.align-center .ls-rule { margin-left:auto; margin-right:auto; background:linear-gradient(90deg,transparent,var(--gold-main),transparent); }
.align-right .ls-rule { margin-left:auto; background:linear-gradient(270deg,var(--gold-main),transparent); }

.ls-body { font-family:'Rajdhani',sans-serif; font-weight:400; font-size:clamp(16px,1.9vw,21px); line-height:1.7; color:rgba(240,248,255,0.82); margin-bottom:30px; max-width:54ch; }
.align-center .ls-body { margin-left:auto; margin-right:auto; }
.align-right .ls-body { margin-left:auto; }

.ls-btn-row { display:flex; gap:16px; flex-wrap:wrap; }
.align-center .ls-btn-row { justify-content:center; }
.align-right .ls-btn-row { justify-content:flex-end; }
.ls-btn { font-family:'Rajdhani',sans-serif; font-weight:700; font-size:15px; letter-spacing:0.18em; text-transform:uppercase; padding:16px 38px; border-radius:3px; cursor:pointer; transition:transform 0.18s,box-shadow 0.18s,background 0.25s,color 0.25s; border:1px solid var(--gold-soft); }
.ls-btn-primary { color:var(--ink); background:linear-gradient(135deg,var(--gold-bright),var(--gold-dim)); border-color:transparent; }
.ls-btn-primary:hover { transform:translateY(-3px); box-shadow:0 12px 32px rgba(var(--gold-hi-rgb),0.4); }
.ls-btn-ghost { color:var(--gold-main); background:rgba(var(--gold-hi-rgb),0.04); }
.ls-btn-ghost:hover { background:rgba(var(--gold-hi-rgb),0.14); transform:translateY(-3px); }

.ls-bg-dim { filter:brightness(0.45) saturate(0.85); }
.ls-veil.v-flat { background:linear-gradient(180deg,rgba(var(--ink-rgb),0.78) 0%,rgba(var(--ink-rgb),0.62) 50%,rgba(var(--ink-rgb),0.82) 100%); }

.ls-row { position:relative; z-index:2; display:flex; align-items:center; gap:clamp(28px,5vw,72px); width:100%; max-width:1180px; margin:0 auto; }
.ls-row.reverse { flex-direction:row-reverse; }
.ls-row .ls-inner { max-width:none; flex:1 1 0; }

.ls-figure { position:relative; flex:1 1 0; margin:0; border-radius:6px; overflow:hidden; border:1px solid rgba(var(--gold-hi-rgb),0.28); box-shadow:0 24px 60px rgba(var(--black-rgb),0.55),0 0 0 1px rgba(var(--ink-rgb),0.6) inset; background:rgba(var(--ink-rgb),0.6); aspect-ratio:4/3; }
.ls-figure img,.ls-figure video { display:block; width:100%; height:100%; object-fit:cover; }
.ls-figure-tag { position:absolute; left:10px; bottom:10px; font-family:'Rajdhani',sans-serif; font-size:11px; letter-spacing:0.12em; color:rgba(var(--gold-hi-rgb),0.75); background:rgba(var(--ink-rgb),0.7); padding:4px 9px; border-radius:3px; display:none; }
.ls-figure.empty { border-style:dashed; border-color:rgba(var(--gold-hi-rgb),0.4); display:flex; align-items:center; justify-content:center; background:repeating-linear-gradient(45deg,rgba(var(--gold-hi-rgb),0.03) 0 12px,transparent 12px 24px),rgba(var(--ink-rgb),0.7); }
.ls-figure.empty img { display:none; }
.ls-figure.empty .ls-figure-tag { display:block; position:static; background:none; color:rgba(var(--gold-hi-rgb),0.55); font-size:clamp(12px,1.4vw,15px); }
.ls-figure.empty::before { content:"◆"; position:absolute; top:50%; left:50%; transform:translate(-50%,-150%); color:rgba(var(--gold-hi-rgb),0.35); font-size:28px; }
.ls-figure { opacity:0; transform:translateY(42px); transition:opacity 0.9s cubic-bezier(.22,1,.36,1) 0.1s,transform 0.9s cubic-bezier(.22,1,.36,1) 0.1s; }
.ls.in-view .ls-figure { opacity:1; transform:none; }
@media (max-width:760px) { .ls-row,.ls-row.reverse { flex-direction:column; gap:26px; } .ls-figure { width:100%; } }

.ls-scroll-cue { position:absolute; left:50%; bottom:30px; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:8px; color:rgba(var(--gold-hi-rgb),0.7); font-family:'Rajdhani',sans-serif; font-size:11px; letter-spacing:0.3em; text-transform:uppercase; pointer-events:none; }
.ls-scroll-cue .cue-arrow { width:18px; height:18px; border-right:2px solid var(--gold-main); border-bottom:2px solid var(--gold-main); transform:rotate(45deg); animation:lsBounce 1.8s ease-in-out infinite; }
@keyframes lsBounce { 0%,100%{transform:rotate(45deg) translate(0,0);opacity:0.5} 50%{transform:rotate(45deg) translate(4px,4px);opacity:1} }

.ls-inner > * { opacity:0; transform:translateY(42px); transition:opacity 0.9s cubic-bezier(.22,1,.36,1),transform 0.9s cubic-bezier(.22,1,.36,1); }
.ls.in-view .ls-inner > * { opacity:1; transform:none; }
.ls.in-view .ls-inner > *:nth-child(1){transition-delay:0.05s} .ls.in-view .ls-inner > *:nth-child(2){transition-delay:0.15s} .ls.in-view .ls-inner > *:nth-child(3){transition-delay:0.25s} .ls.in-view .ls-inner > *:nth-child(4){transition-delay:0.35s} .ls.in-view .ls-inner > *:nth-child(5){transition-delay:0.45s}

@media (max-width:640px) {
  .ls { padding:90px 24px; align-items:flex-end; }
  .ls-inner,.ls-inner.align-right { text-align:left; align-items:flex-start; }
  .ls-inner.align-right { margin-left:0; }
  .ls-inner.align-center { text-align:center; }
  .align-right .ls-rule { margin-left:0; background:linear-gradient(90deg,var(--gold-main),transparent); }
  .align-right .ls-body,.align-right .ls-btn-row { margin-left:0; justify-content:flex-start; }
  .ls-btn { width:100%; text-align:center; }
  .align-center .ls-btn { width:auto; }
}
@media (max-width:420px) { .ls-hero-title{font-size:clamp(30px,11vw,44px);letter-spacing:0.04em} .ls-hero .ls-eyebrow::before,.ls-hero .ls-eyebrow::after{width:20px} }
@media (prefers-reduced-motion:reduce) { .ls-bg{transform:none !important} .ls-inner > *{transition:opacity 0.4s;transform:none} .ls-scroll-cue .cue-arrow{animation:none} #landing{scroll-behavior:auto} }

/* ── In-App Realm Screen ── */
#screen-realm { background:var(--ink); }
.realm-scroll { position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; overscroll-behavior:none; }
.realm-back { position:absolute; top:max(18px,env(safe-area-inset-top,0px)); left:clamp(18px,5vw,60px); z-index:6; }
@media (prefers-reduced-motion:reduce) { .realm-scroll{scroll-behavior:auto} }

/* ── Home morphing background ── */
#screen-main .home-bg { position:absolute; inset:0; z-index:0; background:var(--ink); overflow:hidden; }
.home-bg-layer { position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; transform:scale(1.04); will-change:opacity; }
.home-bg-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.home-bg-layer.hb1{background-image:var(--bg1);opacity:1} .home-bg-layer.hb2{background-image:var(--bg2);opacity:0} .home-bg-layer.hb3{background-image:var(--bg3);opacity:0}
#screen-main .home-scroll { position:absolute; inset:0; z-index:2; overflow-y:auto; overflow-x:hidden; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; overscroll-behavior:none; }
.ls-home { background:transparent; }
@media (prefers-reduced-motion:reduce) { #screen-main .home-scroll{scroll-behavior:auto} }

/* ── Heroes hub background ── */
.herohub-bg { position:absolute; inset:0; z-index:0; background:var(--ink); overflow:hidden; }
.herohub-bg video { position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; width:auto; height:auto; transform:translate(-50%,-50%); object-fit:cover; }