/* ===== ASCENDEX landing screen ===== */
@property --el { syntax:'<color>'; inherits:true; initial-value:#ff7a2a; }
#title { display:block; padding:0; background:#05040c; backdrop-filter:none; overflow:hidden; --el:#ff7a2a; transition:--el .9s ease; }
#lp { position:absolute; inset:0; }
#lp-glow { position:absolute; inset:0; background:
  radial-gradient(ellipse 42% 60% at 68% 46%, color-mix(in srgb, var(--el) 38%, transparent), transparent 72%),
  radial-gradient(ellipse 70% 38% at 62% 108%, color-mix(in srgb, var(--el) 30%, transparent), transparent 70%),
  radial-gradient(ellipse 50% 60% at 0% 0%, rgba(48,28,233,.22), transparent 70%); }
#lp-grid { position:absolute; left:-10%; right:-10%; bottom:-40px; height:300px; transform:perspective(500px) rotateX(62deg); transform-origin:50% 100%;
  background-image:linear-gradient(rgba(150,120,255,.28) 1px, transparent 1px), linear-gradient(90deg, rgba(150,120,255,.28) 1px, transparent 1px); background-size:56px 56px;
  -webkit-mask:linear-gradient(transparent, #000 70%); mask:linear-gradient(transparent, #000 70%); opacity:.55; }

/* hero art */
#hero { position:absolute; inset:0; pointer-events:none; }
#hero .himg { position:absolute; left:870px; top:-6px; height:740px; width:493px; margin-left:-246px; object-fit:cover; opacity:0; transition:opacity .8s ease;
  transform:translate(calc(var(--mx,0) * -10px), calc(var(--my,0) * -6px));
  -webkit-mask-image:radial-gradient(ellipse 50% 49% at 50% 50%, #000 55%, transparent 100%); mask-image:radial-gradient(ellipse 50% 49% at 50% 50%, #000 55%, transparent 100%); }
#hero .himg.on { opacity:1; }
#rings { position:absolute; inset:0; width:1280px; height:720px; pointer-events:none; }
#rings ellipse { fill:none; stroke-width:2; stroke-linecap:round; stroke-dasharray:380 900; animation:ringflow 9s linear infinite; filter:drop-shadow(0 0 6px currentColor); }
#rings .r2 { animation-duration:13s; animation-direction:reverse; stroke-dasharray:300 1000; } #rings .r3 { animation-duration:17s; stroke-dasharray:240 1100; opacity:.7; }
@keyframes ringflow { to { stroke-dashoffset:-1280; } }

/* floating element cards */
#fcards { position:absolute; inset:0; }
.fc { position:absolute; width:112px; height:152px; margin:-76px 0 0 -56px; transform:translate(calc(var(--mx,0) * var(--p) * 1px), calc(var(--my,0) * var(--p) * .6px)); transition:transform .25s ease-out; cursor:pointer; z-index:3; }
.fcard { --c:#fff; width:100%; height:100%; border-radius:18px; display:grid; place-items:center; transform:rotate(var(--r)); animation:bobc 6s ease-in-out infinite; animation-delay:var(--d);
  background:linear-gradient(160deg, color-mix(in srgb, var(--c) 24%, rgba(10,8,22,.78)), rgba(10,8,22,.6)); border:1.5px solid color-mix(in srgb, var(--c) 78%, #fff 8%);
  box-shadow:0 0 26px color-mix(in srgb, var(--c) 45%, transparent), inset 0 0 24px color-mix(in srgb, var(--c) 26%, transparent); backdrop-filter:blur(6px); transition:box-shadow .4s, filter .4s, scale .4s var(--ease); filter:saturate(.8) brightness(.8); }
.fcard svg { width:58px; height:58px; color:var(--c); filter:drop-shadow(0 0 10px var(--c)); overflow:visible; }
.fcard small { position:absolute; bottom:9px; font:600 8px var(--display); letter-spacing:.24em; color:rgba(255,255,255,.65); }
.fc:hover .fcard { filter:none; scale:1.06; }
.fc.on .fcard { filter:none; scale:1.14; box-shadow:0 0 54px color-mix(in srgb, var(--c) 80%, transparent), inset 0 0 30px color-mix(in srgb, var(--c) 38%, transparent); border-color:var(--c); }
.fc.soon .fcard { filter:saturate(.7) brightness(.72); }
@keyframes bobc { 0%,100% { transform:translateY(0) rotate(var(--r)); } 50% { transform:translateY(-12px) rotate(calc(var(--r) + 3deg)); } }

#lp-fx { position:absolute; left:0; top:0; width:1280px; height:720px; pointer-events:none; z-index:2; }

/* top bar */
#lp-top { position:absolute; left:62px; right:56px; top:34px; display:flex; align-items:center; z-index:5; }
.brand { display:flex; align-items:center; gap:16px; }
.brand svg { width:42px; height:42px; filter:drop-shadow(0 0 10px rgba(140,110,255,.6)); }
.brand span { font:400 33px 'Michroma','Space Grotesk',sans-serif; letter-spacing:.34em; color:#f2f2f5; }
.lp-ctl { margin-left:auto; display:flex; align-items:center; gap:16px; color:var(--dim); position:relative; }
.lp-ctl button { display:flex; align-items:center; gap:10px; background:none; border:0; color:var(--muted); font:500 14px var(--ui); cursor:pointer; padding:6px; border-radius:10px; transition:color .15s, background .15s; }
.lp-ctl button:hover { color:#fff; background:var(--chip); } .lp-ctl svg { width:22px; height:22px; } .lp-ctl .sep { width:1px; height:26px; background:var(--line); }
#lp-set { position:absolute; right:0; top:44px; width:230px; padding:14px; border-radius:16px; background:var(--glass); backdrop-filter:blur(22px); border:1px solid var(--line2); box-shadow:0 20px 50px rgba(0,0,0,.6); z-index:9; }
#lp-set .eyebrow { margin-bottom:8px; }
#lp-set label { display:flex; align-items:center; justify-content:space-between; padding:9px 4px; font:500 14px var(--ui); color:var(--fg); cursor:pointer; }
#lp-set input { appearance:none; width:38px; height:22px; border-radius:999px; background:var(--chip3); position:relative; cursor:pointer; transition:background .2s; }
#lp-set input::after { content:''; position:absolute; left:3px; top:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .2s; }
#lp-set input:checked { background:var(--brand); } #lp-set input:checked::after { transform:translateX(16px); }

/* copy */
#lp-copy { position:absolute; left:62px; top:140px; width:560px; z-index:5; }
.lp-eb { display:flex; align-items:center; gap:14px; font:500 11px var(--display); letter-spacing:.38em; color:var(--dim); }
.lp-eb i { width:28px; height:1.5px; background:var(--accent); display:block; }
#lp-copy h1 { margin:14px 0 0; font:700 69px/0.93 var(--display); letter-spacing:-.045em; color:#fff; }
#lp-copy h1 span { background:linear-gradient(90deg,#a47bff,#7a5cff 55%,#b79bff); -webkit-background-clip:text; background-clip:text; color:transparent; display:block; }
#lp-copy p { margin:20px 0 0; font:400 18px/1.5 var(--ui); color:#a8a5c4; }
.lp-btns { display:flex; gap:16px; margin-top:28px; align-items:center; }
.lp-play { display:flex; align-items:center; gap:14px; justify-content:center; width:212px; height:58px; border:0; border-radius:999px; cursor:pointer; color:#fff; font:600 15px var(--display); letter-spacing:.26em;
  background:linear-gradient(90deg,#7e5fff,#4a2cff); box-shadow:0 0 40px rgba(110,70,255,.55), inset 0 1px 0 rgba(255,255,255,.3); transition:transform .2s var(--ease), box-shadow .2s; }
.lp-play:hover { transform:translateY(-2px) scale(1.03); box-shadow:0 0 56px rgba(130,90,255,.8), inset 0 1px 0 rgba(255,255,255,.35); } .lp-play svg { width:22px; height:22px; }
.lp-how { height:54px; padding:0 30px; border-radius:999px; background:transparent; border:1.5px solid rgba(255,255,255,.4); color:#fff; font:600 12px var(--display); letter-spacing:.24em; cursor:pointer; transition:background .2s, border-color .2s; }
.lp-how:hover { background:rgba(255,255,255,.08); border-color:#fff; }
.lp-stages { margin-top:20px; font:500 12px var(--ui); letter-spacing:.08em; color:var(--dim); }
.lp-stages b { font-weight:500; margin:0 8px; opacity:.6; }

/* element rail */
#rail { position:absolute; left:62px; right:62px; bottom:34px; display:flex; align-items:center; z-index:6; }
.ri { --c:#fff; display:flex; align-items:center; gap:11px; background:none; border:0; padding:6px 2px; cursor:pointer; font:600 11px var(--display); letter-spacing:.26em; color:var(--dim); transition:color .3s; white-space:nowrap; }
.ri i { width:11px; height:11px; border-radius:50%; background:var(--c); box-shadow:0 0 10px var(--c); opacity:.75; transition:transform .3s var(--ease), opacity .3s, box-shadow .3s; }
.ri small { font:600 8px var(--display); letter-spacing:.18em; opacity:.55; border:1px solid rgba(255,255,255,.3); border-radius:999px; padding:2px 6px; }
.ri:hover { color:#fff; } .ri.on { color:#fff; } .ri.on i { transform:scale(1.5); opacity:1; box-shadow:0 0 18px var(--c), 0 0 0 4px color-mix(in srgb, var(--c) 28%, transparent); }
.ln { flex:1; height:1px; background:rgba(255,255,255,.14); margin:0 16px; position:relative; display:block; }
.ln b { position:absolute; left:0; top:-.5px; height:2px; width:0; background:linear-gradient(90deg, transparent, var(--el)); }
.pg { font:500 12px var(--display); letter-spacing:.16em; color:var(--dim); margin-left:6px; } .pg b { color:#fff; font-weight:600; }

.calm #lp *, .calm .fcard, .calm #rings ellipse { animation-play-state:paused !important; }

/* transparent cut-outs stand in front of the floating cards */
#hero .himg.cut { z-index:4; margin-left:0; object-fit:fill; -webkit-mask-image:none; mask-image:none;
  filter:drop-shadow(0 0 28px color-mix(in srgb, var(--el) 45%, transparent)) drop-shadow(0 22px 22px rgba(0,0,0,.55)); }
.fc { pointer-events:auto; }
#ped { position:absolute; left:872px; top:552px; width:560px; height:150px; margin-left:-280px; z-index:1; pointer-events:none; }
#ped::before { content:''; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(ellipse at center, color-mix(in srgb, var(--el) 60%, transparent) 0%, color-mix(in srgb, var(--el) 22%, transparent) 38%, transparent 68%); }
#ped::after { content:''; position:absolute; left:6%; right:6%; top:26%; bottom:20%; border-radius:50%; border:2px solid color-mix(in srgb, var(--el) 80%, #fff 10%);
  box-shadow:0 0 28px var(--el), inset 0 0 26px color-mix(in srgb, var(--el) 50%, transparent); background:radial-gradient(ellipse, rgba(8,6,20,.55), rgba(8,6,20,.15) 70%); }

#title.old #ped { display:none; }

/* background render sits behind the cards; the cut-out of the same artwork sits in front of them */
#hero .himg.bg { z-index:0; filter:none; }
#hero .himg.cut { transform:translate(calc(var(--mx,0) * -10px), calc(var(--my,0) * -6px)); }
#ped { display:none; }

#lp-set .rng { flex-direction:column; align-items:stretch; gap:6px; }
#lp-set input[type=range] { appearance:auto; width:100%; height:auto; background:none; accent-color:#8d6bff; cursor:pointer; padding:0; }
#lp-set input[type=range]::after { display:none; }

/* element symbols */
.fcard img.sym { width:62px; height:62px; object-fit:contain; filter:drop-shadow(0 0 12px var(--c)); }
.ri i { display:none; }
.ri img.rsym { width:18px; height:18px; object-fit:contain; opacity:.7; filter:drop-shadow(0 0 5px var(--c)); transition:transform .3s var(--ease), opacity .3s, filter .3s; }
.ri.on img.rsym { transform:scale(1.5); opacity:1; filter:drop-shadow(0 0 10px var(--c)) drop-shadow(0 0 4px var(--c)); }

.brand img { height:62px; width:auto; display:block; filter:drop-shadow(0 0 14px rgba(120,90,255,.45)); }
#lp-top { top:24px; }

/* ---- Light: slowly turning sun rays behind the beast ---- */
#sunrays { position:absolute; left:872px; top:300px; width:1100px; height:1100px; margin:-550px 0 0 -550px; pointer-events:none; z-index:0; opacity:0; transition:opacity .9s ease; mix-blend-mode:screen;
  -webkit-mask:radial-gradient(circle, #000 8%, rgba(0,0,0,.7) 35%, transparent 68%); mask:radial-gradient(circle, #000 8%, rgba(0,0,0,.7) 35%, transparent 68%); }
#sunrays i { position:absolute; inset:0; border-radius:50%; }
#sunrays i:first-child { background:repeating-conic-gradient(from 0deg, rgba(255,226,140,.55) 0 5deg, transparent 5deg 18deg); animation:raysSpin 70s linear infinite; }
#sunrays i:last-child { background:repeating-conic-gradient(from 9deg, rgba(255,246,200,.4) 0 3deg, transparent 3deg 22deg); animation:raysSpin 110s linear infinite reverse, raysPulse 5s ease-in-out infinite; }
@keyframes raysSpin { to { transform:rotate(360deg); } }
@keyframes raysPulse { 50% { opacity:.45; } }
/* ---- Shadow: low drifting fog over the floor + smoke puffs (canvas) ---- */
#fog { position:absolute; left:560px; right:-40px; bottom:70px; height:240px; pointer-events:none; z-index:2; opacity:0; transition:opacity .9s ease;
  background:radial-gradient(ellipse 45% 55% at 30% 70%, rgba(120,20,36,.42), transparent 70%), radial-gradient(ellipse 50% 50% at 72% 78%, rgba(30,16,40,.7), transparent 70%), radial-gradient(ellipse 35% 45% at 52% 90%, rgba(80,12,26,.5), transparent 70%);
  filter:blur(14px); animation:fogDrift 9s ease-in-out infinite alternate; }
@keyframes fogDrift { from { transform:translateX(-30px) scale(1); } to { transform:translateX(40px) scale(1.12); } }
#title[data-el=shadow] #fog { opacity:1; }
.calm #sunrays i, .calm #fog { animation-play-state:paused !important; }

/* ---- subtler Light rays + Shadow fog ---- */
#sunrays { width:760px; height:760px; margin:-380px 0 0 -380px; -webkit-mask:radial-gradient(circle, #000 5%, rgba(0,0,0,.45) 30%, transparent 62%); mask:radial-gradient(circle, #000 5%, rgba(0,0,0,.45) 30%, transparent 62%); }
#sunrays i:first-child { background:repeating-conic-gradient(from 0deg, rgba(255,226,140,.2) 0 4deg, transparent 4deg 24deg); }
#sunrays i:last-child { background:repeating-conic-gradient(from 12deg, rgba(255,246,200,.14) 0 2deg, transparent 2deg 30deg); }
#fog { opacity:0; background:radial-gradient(ellipse 45% 50% at 35% 75%, rgba(120,20,36,.18), transparent 70%), radial-gradient(ellipse 45% 45% at 70% 80%, rgba(30,16,40,.28), transparent 70%); }
#title[data-el=shadow] #fog { opacity:.7; }

#lp-credit { position:absolute; right:62px; bottom:10px; text-align:right; z-index:6; font:500 10px var(--ui); letter-spacing:.06em; color:rgba(255,255,255,.34); text-decoration:none; transition:color .2s; }
#lp-credit b { font-weight:600; color:rgba(255,255,255,.6); letter-spacing:.04em; text-transform:none; }
#lp-credit:hover, #lp-credit:hover b { color:#fff; }