/* Onboarding Story Styles */
.ob-root{position:fixed;inset:0;z-index:9999;overflow:hidden;background:#0B0E17}
.ob-scene{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;pointer-events:none}
.ob-scene.ob-active{opacity:1;pointer-events:auto}
.ob-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transform:scale(1.05);animation:obKenBurns 20s ease-in-out infinite alternate}
.ob-scene.ob-active .ob-img{animation-play-state:running}
@keyframes obKenBurns{0%{transform:scale(1.05) translate(0,0)}100%{transform:scale(1.12) translate(-1.5%,-1%)}}
.ob-vignette{position:absolute;inset:0;z-index:2;background:radial-gradient(ellipse at center,transparent 40%,rgba(11,14,23,.55) 100%);pointer-events:none}
.ob-grad{position:absolute;inset:0;z-index:2;background:linear-gradient(to top,rgba(11,14,23,.92) 0%,rgba(11,14,23,.5) 35%,transparent 65%);pointer-events:none}
.ob-particles{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.ob-scene.ob-active .ob-particles::before,.ob-scene.ob-active .ob-particles::after{content:'';position:absolute;width:4px;height:4px;border-radius:50%;background:radial-gradient(circle,rgba(196,163,90,.8),transparent);box-shadow:0 0 8px 2px rgba(196,163,90,.3);animation:obFloat linear infinite}
.ob-scene.ob-active .ob-particles::before{top:80%;left:20%;animation-duration:8s;animation-delay:0s}
.ob-scene.ob-active .ob-particles::after{top:70%;left:70%;animation-duration:11s;animation-delay:2s;width:3px;height:3px}
@keyframes obFloat{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:1}90%{opacity:.6}100%{transform:translateY(-60vh) translateX(20px);opacity:0}}
.ob-content{position:absolute;inset-x:0;bottom:0;z-index:3;padding:0 8% 8vh;display:flex;flex-direction:column;justify-content:flex-end;min-height:50%}
.ob-text{max-width:560px}
.ob-title{font-size:clamp(1.75rem,4vw,2.75rem);font-weight:700;color:var(--gold,#C4A35A);margin:0 0 1rem;opacity:0;transform:translateY(20px);animation:obTextIn .8s ease forwards;animation-delay:.3s;text-shadow:0 2px 20px rgba(0,0,0,.5)}
.ob-body{font-size:clamp(.95rem,1.3vw,1.1rem);line-height:1.8;color:rgba(245,237,224,.82);margin:0;opacity:0;transform:translateY(20px);animation:obTextIn .8s ease forwards;animation-delay:.6s;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.ob-body p{margin:0 0 .4em}
.ob-body p:last-child{margin-bottom:0}
@keyframes obTextIn{to{opacity:1;transform:translateY(0)}}
.ob-cta,.ob-next{margin-top:2rem;padding:.85rem 2.5rem;border-radius:9999px;font-size:1.05rem;font-weight:600;cursor:pointer;border:none;transition:all .3s ease;opacity:0;transform:translateY(15px);animation:obTextIn .6s ease forwards;animation-delay:1s;align-self:flex-start}
.ob-cta{background:linear-gradient(135deg,#C4A35A,#8B6914);color:#0B0E17;font-size:1.15rem;padding:1rem 3rem;box-shadow:0 4px 24px rgba(196,163,90,.3)}
.ob-cta:hover{transform:scale(1.05)!important;box-shadow:0 6px 32px rgba(196,163,90,.5)!important}
.ob-next{background:transparent;border:1px solid rgba(196,163,90,.4)!important;color:rgba(245,237,224,.7)}
.ob-next:hover{border-color:var(--gold,#C4A35A)!important;color:var(--gold,#C4A35A);background:rgba(196,163,90,.08)}
.ob-dots{position:absolute;right:5%;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;z-index:5}
.ob-dot{width:8px;height:8px;border-radius:4px;background:rgba(255,255,255,.2);border:none;cursor:pointer;padding:0;transition:all .4s ease}
.ob-dot:hover{background:rgba(255,255,255,.4)}
.ob-dot-active{width:24px;background:var(--gold,#C4A35A)!important;box-shadow:0 0 10px rgba(196,163,90,.5)}
@media(max-width:768px){
  .ob-content{padding:0 6% 6vh}
  .ob-dots{right:4%;gap:8px}
  .ob-dot{width:6px;height:6px}
  .ob-dot-active{width:20px}
  .ob-cta{font-size:1rem;padding:.85rem 2.2rem}
}

/* ====== WARP TRANSITION v2 — Cinematic ====== */
.ob-warp{position:fixed;inset:0;z-index:10000;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden;perspective:600px}

/* Deep space radial background */
.ob-warp-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,#0c1230 0%,#050818 40%,#000 80%)}

/* Radial light rays from center — pure CSS conic */
.ob-warp-rays{position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;
  background:conic-gradient(from 0deg,
    transparent 0deg,rgba(120,160,255,.15) 2deg,transparent 4deg,
    transparent 10deg,rgba(196,163,90,.12) 12deg,transparent 14deg,
    transparent 22deg,rgba(120,160,255,.08) 24deg,transparent 26deg,
    transparent 34deg,rgba(196,163,90,.06) 36deg,transparent 38deg,
    transparent 48deg,rgba(120,160,255,.07) 50deg,transparent 52deg,
    transparent 60deg,rgba(196,163,90,.05) 62deg,transparent 64deg,
    transparent 74deg,rgba(120,160,255,.08) 76deg,transparent 78deg,
    transparent 88deg,rgba(196,163,90,.06) 90deg,transparent 92deg,
    transparent 102deg,rgba(120,160,255,.07) 104deg,transparent 106deg,
    transparent 116deg,rgba(196,163,90,.05) 118deg,transparent 120deg,
    transparent 130deg,rgba(120,160,255,.08) 132deg,transparent 134deg,
    transparent 144deg,rgba(196,163,90,.06) 146deg,transparent 148deg,
    transparent 158deg,rgba(120,160,255,.07) 160deg,transparent 162deg,
    transparent 172deg,rgba(196,163,90,.05) 174deg,transparent 176deg,
    transparent 186deg,rgba(120,160,255,.08) 188deg,transparent 190deg,
    transparent 200deg,rgba(196,163,90,.06) 202deg,transparent 204deg,
    transparent 214deg,rgba(120,160,255,.07) 216deg,transparent 218deg,
    transparent 228deg,rgba(196,163,90,.05) 230deg,transparent 232deg,
    transparent 242deg,rgba(120,160,255,.08) 244deg,transparent 246deg,
    transparent 256deg,rgba(196,163,90,.06) 258deg,transparent 260deg,
    transparent 270deg,rgba(120,160,255,.07) 272deg,transparent 274deg,
    transparent 284deg,rgba(196,163,90,.05) 286deg,transparent 288deg,
    transparent 298deg,rgba(120,160,255,.08) 300deg,transparent 302deg,
    transparent 312deg,rgba(196,163,90,.06) 314deg,transparent 316deg,
    transparent 326deg,rgba(120,160,255,.07) 328deg,transparent 330deg,
    transparent 340deg,rgba(196,163,90,.05) 342deg,transparent 344deg,
    transparent 354deg,rgba(120,160,255,.08) 356deg,transparent 358deg);
  animation:obWarpRaySpin 4s linear infinite,obWarpRayScale 3s ease-out forwards
}
@keyframes obWarpRaySpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes obWarpRayScale{
  0%{width:0;height:0;opacity:0}
  20%{width:80vmax;height:80vmax;opacity:1}
  70%{width:200vmax;height:200vmax;opacity:.5}
  100%{width:300vmax;height:300vmax;opacity:0}
}

/* Streaking stars — warp speed lines using repeating-linear-gradient */
.ob-warp-streaks{position:absolute;top:50%;left:50%;width:200vmax;height:200vmax;
  transform:translate(-50%,-50%);
  background:
    repeating-conic-gradient(from 0deg at 50% 50%,
      transparent 0deg, transparent 1.2deg,
      rgba(200,220,255,.6) 1.2deg, rgba(200,220,255,.6) 1.5deg,
      transparent 1.5deg, transparent 5deg,
      rgba(196,163,90,.4) 5deg, rgba(196,163,90,.4) 5.15deg,
      transparent 5.15deg, transparent 10deg),
    repeating-conic-gradient(from 2.5deg at 50% 50%,
      transparent 0deg, transparent 2.5deg,
      rgba(180,200,255,.4) 2.5deg, rgba(180,200,255,.4) 2.65deg,
      transparent 2.65deg, transparent 8deg);
  -webkit-mask:radial-gradient(circle,transparent 5%,#000 10%,#000 75%,transparent 100%);
  mask:radial-gradient(circle,transparent 5%,#000 10%,#000 75%,transparent 100%);
  animation:obWarpStreaks .8s linear infinite,obWarpStreaksIn 3s ease-out forwards
}
@keyframes obWarpStreaks{
  0%{transform:translate(-50%,-50%) scale(.3)}
  100%{transform:translate(-50%,-50%) scale(1.1)}
}
@keyframes obWarpStreaksIn{
  0%{opacity:0}
  15%{opacity:0}
  35%{opacity:1}
  85%{opacity:1}
  100%{opacity:0}
}

/* Shockwave rings */
.ob-warp-ring{position:absolute;top:50%;left:50%;border-radius:50%;border:2px solid;transform:translate(-50%,-50%) scale(0);pointer-events:none}
.ob-warp-ring-1{width:60px;height:60px;border-color:rgba(196,163,90,.6);box-shadow:0 0 30px rgba(196,163,90,.3),inset 0 0 30px rgba(196,163,90,.15);animation:obWarpRing 3s ease-out forwards}
.ob-warp-ring-2{width:60px;height:60px;border-color:rgba(140,180,255,.5);box-shadow:0 0 30px rgba(140,180,255,.2),inset 0 0 30px rgba(140,180,255,.1);animation:obWarpRing 3s ease-out .3s forwards}
@keyframes obWarpRing{
  0%{transform:translate(-50%,-50%) scale(0);opacity:0}
  10%{opacity:1}
  70%{opacity:.5}
  100%{transform:translate(-50%,-50%) scale(30);opacity:0}
}

/* Central core light */
.ob-warp-core{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;
  box-shadow:0 0 20px 6px rgba(255,255,255,.95),0 0 40px 15px rgba(196,163,90,.7),0 0 80px 30px rgba(120,160,255,.35),0 0 140px 50px rgba(196,163,90,.15);
  animation:obWarpCore 3s ease-out forwards
}
@keyframes obWarpCore{
  0%{transform:scale(0);opacity:0}
  10%{transform:scale(1);opacity:1}
  35%{transform:scale(15);opacity:1}
  55%{transform:scale(40);opacity:.8}
  75%{transform:scale(80);opacity:.3}
  100%{transform:scale(120);opacity:0}
}

/* White flash at peak */
.ob-warp-flash{position:absolute;inset:0;background:radial-gradient(circle at center,rgba(255,255,255,.8) 0%,rgba(255,250,230,.3) 30%,transparent 60%);opacity:0;pointer-events:none;animation:obWarpFlash 3s ease-out forwards}
@keyframes obWarpFlash{
  0%,45%{opacity:0}
  50%{opacity:1}
  55%{opacity:.3}
  65%{opacity:0}
  100%{opacity:0}
}

/* Center text */
.ob-warp-text{position:relative;z-index:5;font-size:clamp(1rem,2vw,1.35rem);color:var(--gold,#C4A35A);font-weight:500;letter-spacing:.15em;text-shadow:0 0 30px rgba(196,163,90,.7),0 0 60px rgba(120,160,255,.3);animation:obWarpText 3s ease-out forwards;white-space:nowrap}
@keyframes obWarpText{
  0%{opacity:0;transform:translateY(15px) scale(.95);filter:blur(8px)}
  25%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
  70%{opacity:1;filter:blur(0)}
  100%{opacity:0;filter:blur(4px)}
}

/* Image loading placeholder shimmer */
.ob-img:not([data-loaded="true"]){
  background:linear-gradient(135deg,#0B0E17 0%,#151b2e 40%,#1a1f38 50%,#151b2e 60%,#0B0E17 100%);
  background-size:200% 200%;
  animation:obImgShimmer 1.8s ease infinite;
}
@keyframes obImgShimmer{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}