/* Art-led FT420 entrance. The plates are the scene; WebGL is only a light touch at hotspots. */
.hero#entrance { display:block; width:100%; max-width:none; min-height:0; height:220svh; padding:0; margin:0; background:#07131b; }
.hero#entrance::before,.hero#entrance::after { display:none; }
.academy-viewport {
  --scene-inside:0; --scene-scale:1; --scene-pan:0; --scene-room-scale:1.12; --scene-copy:1; --scene-exit:0; --door-open:0;
  position:sticky; top:0; isolation:isolate; overflow:hidden; display:flex; align-items:center;
  width:100%; height:100svh; padding:100px max(28px,calc((100vw - 1480px)/2)) 75px;
  background:#07131b;
}
.academy-viewport::before {
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:url('/img/landing-hero-closed-v1.png') center center/cover no-repeat;
  transform:translateX(calc(var(--scene-pan) * -1vw)) scale(var(--scene-scale)); transform-origin:66% 49%;
  opacity:calc(1 - var(--scene-inside));
}
.academy-depth {
  display:block; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url('/img/landing-academy-room-v4.png') center center/cover no-repeat;
  opacity:var(--scene-inside); transform:scale(var(--scene-room-scale));
}
.academy-open-view {
  position:absolute; inset:0; pointer-events:none; background:url('/img/landing-hero-v3.webp') center center/cover no-repeat;
  z-index:0; opacity:calc(var(--door-open) * (1 - var(--scene-inside)));
  clip-path:circle(calc(var(--door-open) * 125%) at 69% 48%);
  transform:translateX(calc(var(--scene-pan) * -1vw)) scale(var(--scene-scale)); transform-origin:66% 49%;
}
.academy-viewport::after {
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,rgb(2 14 21/.80),rgb(2 14 21/.30) 38%,transparent 72%),
    linear-gradient(0deg,rgb(3 13 18/.62),transparent 24%);
  opacity:var(--scene-copy);
}
.academy-walk-canvas { display:none; }
.academy-crossing { display:block; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(180deg,transparent 86%,#031017 100%); opacity:var(--scene-exit); }
.academy-viewport .hero-grid {
  position:relative; z-index:4; width:min(100%,1480px); margin:auto;
  opacity:var(--scene-copy); transform:translateY(calc((1 - var(--scene-copy))*-22px));
}
.academy-viewport .hero-grid>div:first-child { max-width:720px; }
.academy-viewport .hero-sub { max-width:34ch; }

.academy-library#features {
  --art-width:max(100vw,177.68svh); --art-height:max(100svh,56.28vw);
  position:relative; isolation:isolate; width:100%; max-width:none; height:100svh; min-height:620px;
  padding:0; overflow:hidden; background:#07131b; scroll-margin-top:0;
}
.academy-library#features::before {
  inset:0; z-index:-1; background:url('/img/landing-academy-room-v4.png') center center/cover no-repeat;
}
.academy-library#features::after {
  inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg,#031017,rgba(3,16,23,.68) 5%,transparent 22%,transparent 78%,rgb(3 11 17/.30));
}
.academy-room-canvas { position:absolute; inset:0; z-index:1; display:block; width:100%; height:100%; pointer-events:none; }
.academy-room-head {
  position:absolute; z-index:3; top:clamp(118px,14vh,155px); left:max(32px,calc((100vw - 1480px)/2));
  max-width:440px; color:#faf4ec; text-shadow:0 3px 18px #000;
}
.academy-room-head .kicker { color:#e8c48d; font-size:.77rem; letter-spacing:.08em; }
.academy-room-head h2 { margin:7px 0 6px; font-size:clamp(2rem,2.5vw,3.2rem); line-height:1.18; }
.academy-room-head p { margin:0; font-size:.94rem; color:#e8e2da; line-height:1.55; }
.academy-destinations { position:absolute; z-index:4; inset:0; pointer-events:none; }
.academy-destination {
  --px:50%; --py:50%; --dx:0; --dy:0; position:absolute; top:var(--py); left:var(--px);
  top:calc(50% + var(--dy) * var(--art-height)); left:calc(50% + var(--dx) * var(--art-width));
  display:flex; flex-direction:column; align-items:center; gap:5px;
  min-width:74px; min-height:48px; padding:0; border:0; color:#fff8e8;
  background:transparent; font:inherit; font-size:.78rem; line-height:1.3; text-shadow:0 2px 8px #000,0 1px 2px #000;
  transform:translate(-50%,-50%); cursor:pointer; pointer-events:auto;
}
.academy-destination .destination-spark {
  position:relative; display:grid; place-items:center; width:48px; height:48px; flex:none;
  color:var(--spark-color,#efc88e); filter:drop-shadow(0 5px 3px #000b) drop-shadow(0 0 10px var(--spark-glow,#dcaf6a88));
  transform:perspective(90px) rotateX(10deg) rotateY(-12deg);
  transition:transform .25s ease,filter .25s ease;
}
.destination-spark svg { width:39px; height:39px; stroke:currentColor; stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; fill:rgb(4 21 29/.7); }
.academy-destination[data-place="signals"] { --spark-color:#8bf9f4; --spark-glow:#5ef3f2aa; }
.academy-destination[data-place="courses"] { --spark-color:#e9d4af; }
.academy-destination[data-place="dashboard"] { --spark-color:#dfc08a; }
.academy-destination[data-place="risk"] { --spark-color:#f1d6a0; }
.academy-destination[data-place="portfolio"] { --spark-color:#ddb77b; }
@media(min-width:701px) { .academy-library.has-3d-destinations .destination-spark svg { opacity:0; } }
.academy-destination span:last-child { padding:3px 7px; border-radius:7px; background:rgb(2 11 18/.54); backdrop-filter:blur(4px); }
.academy-destination:hover .destination-spark,.academy-destination:focus-visible .destination-spark,.academy-destination.is-selected .destination-spark {
  transform:translateY(-5px) perspective(90px) rotateX(2deg) rotateY(8deg) scale(1.16);
  filter:drop-shadow(0 8px 5px #000c) drop-shadow(0 0 17px var(--spark-glow,#e7bd80aa));
}
.academy-destination:focus-visible { outline:2px solid #83dfdc; outline-offset:6px; }
.academy-destination[data-place="trade"] { --px:30%; --py:64%; --dx:-.20; --dy:.14; }
.academy-destination[data-place="signals"] { --px:31%; --py:43%; --dx:-.19; --dy:-.07; }
.academy-destination[data-place="courses"] { --px:49%; --py:58%; --dx:-.01; --dy:.08; }
.academy-destination[data-place="dashboard"] { --px:61%; --py:43%; --dx:.11; --dy:-.07; }
.academy-destination[data-place="risk"] { --px:75%; --py:51%; --dx:.25; --dy:.01; }
.academy-destination[data-place="portfolio"] { --px:71%; --py:68%; --dx:.21; --dy:.18; }
.academy-place-detail {
  position:fixed; z-index:6; left:50%; bottom:clamp(22px,4vh,44px); transform:translateX(-50%);
  display:flex; gap:22px; align-items:center; justify-content:space-between;
  width:min(550px,calc(100vw - 48px)); padding:17px 19px; border:1px solid rgb(236 205 156/.45); border-radius:16px;
  color:#f8f2e7; background:rgb(4 20 28/.82); backdrop-filter:blur(18px); box-shadow:0 16px 36px #000a;
}
.academy-place-detail[hidden] { display:none; }
.academy-place-kicker { color:#f1c989; font-size:.7rem; letter-spacing:.04em; }
.academy-place-detail h3 { margin:3px 0; font-size:1.2rem; }
.academy-place-detail p { margin:0; color:#d3dcd9; font-size:.78rem; line-height:1.45; }
.academy-place-detail .btn { min-height:42px; padding:9px 12px; flex:none; white-space:nowrap; font-size:.8rem; }
.academy-detail-close { position:absolute; top:-13px; right:-13px; width:30px; height:30px; border:1px solid #b6a88e; border-radius:50%; color:#fff; background:#0b2229; cursor:pointer; }
.academy-room-fallback { display:none; }

@media(max-width:900px) {
  .academy-viewport { padding:100px 24px 65px; }
  .academy-viewport .hero-grid { margin-top:clamp(170px,27vh,265px); }
  .academy-viewport::before { background-size:auto 100%; background-position:62% center; }
  .academy-open-view { background-size:auto 100%; background-position:62% center; }
  .academy-depth { background-size:auto 100%; background-position:51% center; }
  .academy-library#features::before { background-size:auto 100%; background-position:50% center; }
  .academy-room-head { left:24px; max-width:380px; }
}
@media(max-width:680px) {
  .hero#entrance { height:190svh; }
  .academy-viewport { align-items:flex-start; padding:86px 20px 46px; }
  .academy-viewport::before { background-position:65% center; }
  .academy-depth { background-position:50% center; }
  .academy-viewport::after { background:linear-gradient(180deg,rgb(2 13 20/.70),rgb(2 13 20/.1) 47%,rgb(2 13 20/.82)); }
  .academy-viewport .hero-grid { margin:clamp(240px,38vh,345px) auto 0; }
  .academy-library#features { height:auto; min-height:100svh; padding-bottom:185px; }
  .academy-library#features::before { background-size:auto 74svh; background-position:center 38px; }
  .academy-library#features::after { background:linear-gradient(180deg,#06131dbd,transparent 19%,transparent 59%,#06131be8 73%,#06131b); }
  .academy-room-canvas { display:none; }
  .academy-room-head { top:85px; left:18px; max-width:calc(100vw - 36px); }
  .academy-room-head h2 { max-width:15ch; font-size:1.75rem; }
  .academy-room-head p { max-width:33ch; font-size:.82rem; }
  .academy-destinations {
    inset:auto 0 105px; display:flex; align-items:center; gap:7px; width:100%; height:76px;
    padding:8px 16px; overflow-x:auto; scroll-snap-type:x mandatory; pointer-events:auto;
    scrollbar-width:thin; scrollbar-color:#987a53 transparent;
  }
  .academy-destination {
    position:relative; top:auto; left:auto; transform:none; flex:none; flex-direction:row; gap:8px;
    min-width:max-content; min-height:48px; padding:7px 13px; border:1px solid rgb(226 195 145/.4); border-radius:26px;
    background:rgb(5 21 29/.80); backdrop-filter:blur(8px); scroll-snap-align:center;
  }
  .academy-destination .destination-spark { width:30px; height:30px; animation:destination-float 3s ease-in-out infinite alternate; }
  .destination-spark svg { width:28px; height:28px; }
  .academy-destination:nth-child(2n) .destination-spark { animation-delay:-1.5s; }
  .academy-destination span:last-child { padding:0; background:none; }
  .academy-place-detail { left:12px; right:12px; bottom:18px; transform:none; width:auto; min-height:85px; padding:10px 13px; gap:10px; }
  .academy-place-detail h3 { font-size:.94rem; }
  .academy-place-detail p { font-size:.7rem; }
  .academy-place-detail .btn { max-width:99px; white-space:normal; line-height:1.25; text-align:center; font-size:.7rem; }
}
@media(prefers-reduced-motion:reduce) {
  .hero#entrance { height:auto; min-height:100svh; }
  .academy-viewport { position:relative; height:auto; min-height:100svh; }
  .academy-room-canvas { display:none; }
  .academy-destination .destination-spark { transition:none; animation:none; }
}
@keyframes destination-float { from { transform:translateY(1px) perspective(90px) rotateY(-10deg); } to { transform:translateY(-3px) perspective(90px) rotateY(13deg); } }

/* Illustrated 3D props replace the former uniform orbs and the experimental WebGL objects. */
.academy-library .academy-room-canvas { display:none; }
.academy-destination .destination-spark {
  width:clamp(100px,9vw,132px); height:clamp(100px,9vw,132px);
  background-image:none; background-position:center; background-size:contain; background-repeat:no-repeat;
  transform:none; transform-origin:center 70%; will-change:transform;
  filter:drop-shadow(0 10px 5px #000c) drop-shadow(0 0 7px var(--spark-glow,#e4b87555));
  animation:prop-float 3.4s ease-in-out infinite alternate paused;
}
.academy-destination .destination-spark svg { display:block; }
.academy-destination.art-ready .destination-spark { background-image:var(--prop-image); }
.academy-destination.art-ready .destination-spark svg { display:none; }
.academy-library.is-visible .destination-spark { animation-play-state:running; }
.academy-destination[data-place="trade"] { --prop-image:url('/img/landing-destinations/trade-v1.png'); --spark-glow:#f2b65f66; }
.academy-destination[data-place="portfolio"] { --prop-image:url('/img/landing-destinations/portfolio-v1.png'); --spark-glow:#e6c48255; }
.academy-destination[data-place="signals"] { --prop-image:url('/img/landing-destinations/signals-v1.png'); --spark-glow:#5cf6f3aa; }
.academy-destination[data-place="courses"] { --prop-image:url('/img/landing-destinations/courses-v1.png'); --spark-glow:#ffdc8a70; }
.academy-destination[data-place="dashboard"] { --prop-image:url('/img/landing-destinations/dashboard-v1.png'); --spark-glow:#eec27870; }
.academy-destination[data-place="risk"] { --prop-image:url('/img/landing-destinations/risk-v1.png'); --spark-glow:#64e7d980; }
.academy-destination[data-place="trade"] { --dy:.08; }
.academy-destination[data-place="portfolio"] { --dx:.23; --dy:.08; }
.academy-destination[data-place="signals"] { --dy:-.17; }
.academy-destination[data-place="courses"] { --dx:-.03; --dy:-.03; }
.academy-destination[data-place="dashboard"] { --dy:-.20; }
.academy-destination[data-place="risk"] { --dy:-.07; }
.academy-destination[data-place="portfolio"] .destination-spark { animation-name:prop-tilt; animation-duration:4.3s; animation-delay:-1.3s; }
.academy-destination[data-place="signals"] .destination-spark { animation-name:prop-crystal; animation-duration:3.1s; animation-delay:-.8s; }
.academy-destination[data-place="courses"] .destination-spark { animation-name:prop-book; animation-duration:4.8s; animation-delay:-2s; }
.academy-destination[data-place="dashboard"] .destination-spark { animation-name:prop-armillary; animation-duration:5.4s; animation-delay:-1.2s; }
.academy-destination[data-place="risk"] .destination-spark { animation-name:prop-shield; animation-duration:3.8s; animation-delay:-2.5s; }
.academy-destination:hover .destination-spark,.academy-destination:focus-visible .destination-spark,.academy-destination.is-selected .destination-spark {
  animation-play-state:paused; transform:translateY(-8px) scale(1.13); filter:drop-shadow(0 15px 8px #000d) drop-shadow(0 0 17px var(--spark-glow));
}
.academy-destination span:last-child { margin-top:-14px; padding:4px 9px; border:1px solid rgb(224 190 132/.35); background:rgb(3 16 23/.8); }
@keyframes prop-float { from { transform:translateY(2px) rotate(-2deg); } to { transform:translateY(-6px) rotate(2deg); } }
@keyframes prop-tilt { from { transform:translateY(1px) rotate(-4deg); } to { transform:translateY(-5px) rotate(3deg); } }
@keyframes prop-crystal { from { transform:translateY(3px) rotate(-6deg) scale(.96); } to { transform:translateY(-9px) rotate(6deg) scale(1.04); } }
@keyframes prop-book { from { transform:translateY(2px) rotate(-2deg) scaleX(.97); } to { transform:translateY(-4px) rotate(2deg) scaleX(1.04); } }
@keyframes prop-armillary { from { transform:translateY(2px) rotate(-8deg); } to { transform:translateY(-5px) rotate(8deg); } }
@keyframes prop-shield { from { transform:translateY(1px) rotateY(-9deg) rotate(-2deg); } to { transform:translateY(-5px) rotateY(9deg) rotate(2deg); } }
@media(max-width:680px) {
  .academy-destination .destination-spark { width:40px; height:40px; }
  .academy-destination span:last-child { margin:0; padding:0; border:0; background:none; }
}
@media(prefers-reduced-motion:reduce) { .academy-destination .destination-spark { animation:none; will-change:auto; } }