/* ITERA landing, 3D layer: loaded after style.css. Everything here is progressive:
   .fx        — motion.js is running (layout/visual polish)
   .fx-motion — motion allowed (no prefers-reduced-motion)
   .fx-gl     — WebGL particle scene is on screen */
:root{--gold-1:#f6e3b0;--gold-2:#dfbb70;--gold-3:#b8893f;--glass:rgba(20,18,13,.52);--glass-line:rgba(223,187,112,.22)}

/* Canvas, grain and the pointer light sit behind/above the page without taking clicks. */
#fx-scene{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none}
.fx body{background:radial-gradient(1200px 700px at 78% 18%,#2a1f0c 0%,transparent 60%),radial-gradient(900px 600px at 8% 92%,#1c150a 0%,transparent 60%),#070706}
.fx body:after{content:'';position:fixed;inset:-50%;z-index:40;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#fx-cursor{position:fixed;left:-260px;top:-260px;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(circle,rgba(233,196,120,.13),rgba(233,196,120,.04) 40%,transparent 70%);mix-blend-mode:screen}
.fx .story main{position:relative;z-index:2}
.fx header{z-index:30;background:linear-gradient(180deg,rgba(7,7,6,.82),rgba(7,7,6,.55));border-bottom:1px solid transparent;border-image:linear-gradient(90deg,transparent,rgba(223,187,112,.45),transparent) 1}
.fx nav a{position:relative;letter-spacing:.3px}.fx nav a:after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:1px;background:var(--gold-2);transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.2,.8,.2,1)}.fx nav a:hover:after,.fx nav a[aria-current=location]:after{transform:scaleX(1);transform-origin:left}
.fx #reading-progress{background:linear-gradient(90deg,var(--gold-3),var(--gold-1));box-shadow:0 0 14px rgba(240,200,120,.7)}

/* Sections become transparent so the 3D scene shows through. */
.fx-gl .hero,.fx-gl .steps-section,.fx-gl .reviews-section{background:transparent}
.fx .steps-section{border-block:0}
.fx-gl .hero-image{mask-image:radial-gradient(ellipse 60% 70% at 72% 50%,black 35%,transparent 72%);-webkit-mask-image:radial-gradient(ellipse 60% 70% at 72% 50%,black 35%,transparent 72%)}
html[dir=rtl].fx-gl .hero-image{mask-image:radial-gradient(ellipse 60% 70% at 28% 50%,black 35%,transparent 72%);-webkit-mask-image:radial-gradient(ellipse 60% 70% at 28% 50%,black 35%,transparent 72%)}

/* Typography. */
.fx h1 .fx-wi{background:linear-gradient(180deg,#fff 35%,#d6cdbb);-webkit-background-clip:text;background-clip:text;color:transparent}
.fx .gold,.fx .fx-gsplit .fx-wi{background:linear-gradient(100deg,#c1924a 0%,#f7e2a8 25%,#d9ae5f 45%,#fff1c9 60%,#b8893f 85%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.fx .fx-gsplit{background:none!important;color:inherit}
.fx-motion .gold,.fx-motion .fx-gsplit .fx-wi{animation:fx-shine 6s ease-in-out infinite}
@keyframes fx-shine{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
.fx .eyebrow{display:inline-flex;align-items:center;gap:12px;color:#c9b58c}
.fx .eyebrow:before{content:'';width:28px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-2))}
.fx .footer-top .eyebrow:before{display:none}

/* Word-by-word reveal of headings when their section comes into view. */
.fx-w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .12em;margin:0 -.04em -.12em}
.fx-wi{display:inline-block}
.fx-motion .fx-wi{transform:translate3d(0,110%,0) rotate(7deg);opacity:0;transition:transform 1.1s cubic-bezier(.16,.84,.24,1),opacity .8s ease;transition-delay:calc(var(--i)*55ms + 120ms)}
.fx-motion .active .fx-wi{transform:none;opacity:1}

/* 3D page turn: every section tilts back into depth as it leaves or enters. */
.fx-motion main>section{perspective:1500px;perspective-origin:50% 40%}
.fx-motion .story main>section>.wrap,.fx-motion .story main>section>.band,.fx-motion .story main>section.active>.wrap,.fx-motion .story main>section.active>.band{transition:none;transform-origin:50% calc(50% - var(--p,0)*60%);transform:translate3d(0,calc(var(--p,0)*9vh),calc(var(--ap,0)*-380px)) rotateX(calc(var(--p,0)*-16deg));opacity:calc(1 - var(--ap,0)*.95);will-change:transform,opacity}
.fx-motion .story main>section .animate,.fx-motion .story main>section.active .animate{animation:none}
.fx-motion main>section.active .step,.fx-motion main>section.active .course-row,.fx-motion main>section.active .band article{animation-fill-mode:backwards}
.fx-motion .story .hero-image,.fx-motion .story .active .hero-image{transition:none;transform:translate3d(calc(var(--mx,0)*-26px),calc(var(--p,0)*-22vh + var(--my,0)*-18px),0) scale(calc(1.04 + var(--ap,0)*.3)) rotate(calc(var(--p,0)*5deg));opacity:calc(1 - var(--ap,0)*1.2)}

.fx .hero .wrap{position:relative;z-index:2}

/* Glass cards with a pointer-following glare; tilt comes from motion.js. */
.fx .course-row,.fx .band article,.fx #course-guide,.fx details,.fx .topics button,.fx dialog{-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.fx .course-row{position:relative;border:1px solid var(--glass-line);border-radius:18px;background:linear-gradient(135deg,rgba(40,33,20,.62),rgba(14,13,10,.5));box-shadow:0 20px 60px rgba(0,0,0,.35),inset 0 1px rgba(255,235,190,.08);overflow:hidden}
.fx .course-row:hover{background:linear-gradient(135deg,rgba(58,46,24,.7),rgba(20,18,12,.55));border-color:rgba(229,194,125,.55)}
.fx .course-row .num{font-size:54px;font-weight:800;color:transparent;-webkit-text-stroke:1px var(--gold-2);letter-spacing:-2px}
.fx .course-row button{color:var(--gold-1)}
.fx .fx-tilt,.fx .fx-tilt:hover{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s cubic-bezier(.2,.8,.2,1),background .3s,border-color .3s,box-shadow .3s;transform-style:preserve-3d}
.fx .fx-tilt:hover{transition:transform .12s linear,background .3s,border-color .3s,box-shadow .3s}
.fx-tilt:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(255,228,170,.14),transparent 45%);opacity:0;transition:opacity .4s}
.fx-tilt:hover:after{opacity:1}
.fx .steps{perspective:1200px}
/* The WebGL scene replaces the flat SVG decorations from blockchain-effects.js; they stay for browsers without WebGL. */
.fx-gl .market-scene,.fx-gl .space-ornament{display:none!important}
.fx #about .band{width:min(1280px,90%)}
.fx .band article:last-child{background:linear-gradient(140deg,rgba(30,26,17,.88),rgba(11,11,9,.84))}
.fx .story main>section#company{align-items:stretch}
.fx .company-footer{display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(12,11,9,.55),rgba(7,7,6,.94) 35%);border-top:1px solid rgba(223,187,112,.22)}
.fx .company-footer .social-links a{transition:border-color .3s,color .3s}.fx .company-footer .social-links a:hover{border-color:var(--gold-2);color:var(--gold-1)}
.fx .band{width:min(1280px,90%);margin:auto;gap:18px;border:0}
.fx .band article{border-radius:22px;border:1px solid var(--glass-line);background:linear-gradient(140deg,rgba(34,28,17,.62),rgba(10,10,8,.5));overflow:hidden}
.fx .band article:first-child{background:linear-gradient(125deg,rgba(240,212,146,.94),rgba(190,150,80,.9));border-color:rgba(255,230,170,.6);box-shadow:0 30px 90px rgba(191,146,70,.25)}
.fx #course-guide{border-radius:18px;border:1px solid var(--glass-line);background:linear-gradient(115deg,rgba(45,37,22,.6),rgba(14,13,10,.5));position:relative;overflow:hidden}
.fx .guide-options button{border-radius:999px;transition:background .25s,color .25s,border-color .25s}
.fx .guide-options button:hover{border-color:var(--gold-2);background:rgba(223,187,112,.12)}
.fx .topics button{background:rgba(20,18,13,.5);border-color:rgba(223,187,112,.22)}
.fx details{border-bottom-color:rgba(223,187,112,.18);transition:background .3s}
.fx details[open]{background:linear-gradient(90deg,rgba(223,187,112,.06),transparent)}
.fx summary{transition:color .25s,padding .35s}.fx summary:hover{color:var(--gold-1)}
.fx .club-art{background:radial-gradient(ellipse,rgba(94,68,24,.55) 0%,rgba(21,19,14,.2) 45%,transparent 70%)}
.fx .club-art img{filter:drop-shadow(0 30px 60px rgba(0,0,0,.8)) drop-shadow(0 0 40px rgba(223,187,112,.25))}
.fx-motion .club-art img{animation:fx-float 7s ease-in-out infinite}
@keyframes fx-float{50%{translate:0 -14px}}
.fx .footer{border-top-color:rgba(223,187,112,.2)}
.fx dialog{background:linear-gradient(150deg,rgba(33,29,20,.92),rgba(12,11,9,.94));border-color:rgba(223,187,112,.4);border-radius:20px;box-shadow:0 40px 120px rgba(0,0,0,.6)}

/* Buttons: magnetic pull and a light sweep. */
.fx .btn{border-radius:999px;padding-inline:30px;background:linear-gradient(120deg,#f3da98,#c99f52 60%,#e7c77f);box-shadow:0 10px 40px rgba(220,183,110,.22),inset 0 1px rgba(255,255,255,.5)}
.fx-motion .btn{transform:translate3d(var(--tx,0px),var(--ty,0px),0)}
.fx-motion .btn:hover{transform:translate3d(var(--tx,0px),calc(var(--ty,0px) - 3px),0);box-shadow:0 14px 50px rgba(220,183,110,.4)}
.fx .btn:before{content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-20deg);pointer-events:none}
.fx-motion .btn:hover:before{animation:fx-sweep .9s ease}
@keyframes fx-sweep{to{left:130%}}
.fx .account-link{border-radius:999px;border-color:rgba(223,187,112,.45);transition:background .3s,color .3s}.fx .account-link:hover{background:var(--gold-2);color:#141009}
.fx #lang{border-radius:999px}
.fx .text-link{border-bottom-color:rgba(223,187,112,.6)}

/* Section rail (desktop). */
#fx-rail{position:fixed;left:max(18px,1.6vw);top:50%;transform:translateY(-50%);z-index:26;display:none;flex-direction:column;align-items:flex-start;gap:18px}
#fx-rail .fx-rail-num{font-size:12px;letter-spacing:2px;color:#8e8676}#fx-rail .fx-rail-num b{display:block;font-size:22px;color:var(--gold-1);font-weight:700;letter-spacing:0}
#fx-rail .fx-rail-track{display:flex;flex-direction:column;gap:6px}
#fx-rail button{position:relative;width:22px;height:20px;padding:0;background:none;border:0;display:flex;align-items:center}
#fx-rail button:before{content:'';width:10px;height:1px;background:#6f6145;transition:width .4s cubic-bezier(.2,.8,.2,1),background .3s}
#fx-rail button[aria-current=true]:before{width:22px;background:var(--gold-1);box-shadow:0 0 10px rgba(246,227,176,.7)}
#fx-rail button span{position:absolute;left:34px;white-space:nowrap;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#d7c49b;opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s;pointer-events:none}
#fx-rail button:hover span,#fx-rail button:focus-visible span{opacity:1;transform:none}
@media(min-width:1180px){#fx-rail{display:flex}}

/* Desktop spacing for the glass layout. */
@media(min-width:701px){
  .fx .course-row{padding:30px 34px}
  .fx .band article{padding:44px 48px}
  .fx .band article:last-child p,.fx .band article:last-child h3{max-width:62%}
}

/* Phones: slides are tuned to fit one screen, so only colours and borders change here; heavy blur is dropped. */
@media(max-width:700px){
  .fx .course-row,.fx .band article,.fx #course-guide,.fx details,.fx .topics button{-webkit-backdrop-filter:none;backdrop-filter:none}
  .fx .course-row{border-radius:14px;background:rgba(22,19,13,.78)}
  .fx .course-row .num{font-size:26px}
  .fx .band{width:92%;gap:10px}
  .fx .band article{border-radius:16px;padding:22px 20px;background:rgba(18,16,12,.78)}
  .fx .band article:first-child{background:linear-gradient(125deg,rgba(240,212,146,.96),rgba(190,150,80,.94))}
  .fx #course-guide{border-radius:14px;background:rgba(26,22,15,.8)}
  .fx .btn{padding-inline:20px}
  .fx-gl .hero-image{mask-image:linear-gradient(180deg,transparent,black 25%,black 80%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,black 25%,black 80%,transparent)}
  .fx-motion .story main>section>.wrap,.fx-motion .story main>section>.band,.fx-motion .story main>section.active>.wrap,.fx-motion .story main>section.active>.band{transform:translate3d(0,calc(var(--p,0)*6vh),calc(var(--ap,0)*-220px)) rotateX(calc(var(--p,0)*-12deg))}
  #fx-cursor{display:none}
}

@media(prefers-reduced-motion:reduce){
  main>section>.wrap,main>section>.band{transform:none!important;opacity:1!important}
  .fx-wi{transform:none!important;opacity:1!important}
  body:after{animation:none!important}
}



/* ---- October 2026 polish ---- */

/* Step cards: the decorative corner circle and the pointer glow shared one pseudo-element, which drew a
   140px gold square in the top corner on hover. The glow now fills the card and the circle is gone. */
.fx .step.fx-tilt::after,.fx .step::after{inset:0;width:auto;height:auto;border:0;border-radius:inherit;right:auto;top:auto}

/* Arabic hero: the coin stays unmirrored (a mirrored ₿ reads wrong) and moves to the free left side. */
html[dir=rtl].fx-gl .hero-image,html[dir=rtl] .hero-image{left:-27%;right:auto;object-position:100% 50%;
  mask-image:linear-gradient(90deg,#000 48%,transparent 96%),linear-gradient(180deg,transparent,#000 16%,#000 80%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 48%,transparent 96%),linear-gradient(180deg,transparent,#000 16%,#000 80%,transparent);
  mask-composite:intersect;-webkit-mask-composite:source-in}
@media(max-width:700px){
  html[dir=rtl].fx-gl .hero-image,html[dir=rtl] .hero-image{left:0;object-position:85% center;
    mask-image:linear-gradient(180deg,transparent,black 25%,black 80%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,black 25%,black 80%,transparent);mask-composite:add;-webkit-mask-composite:source-over}
}

/* One arrow everywhere: slim, and it slides through on hover. Inside gold buttons it sits in a small disc. */
:root{--itera-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12h14.5M13.5 6.5 19 12l-5.5 5.5' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.link-arrow{display:inline-block!important;position:relative;width:16px;height:16px;flex:0 0 16px;vertical-align:middle;margin-inline-start:8px;transform:none!important;overflow:hidden;clip-path:inset(0)}
.link-arrow::before,.link-arrow::after{content:'';position:absolute;inset:0;width:auto;height:auto;top:0;left:0;right:0;border:0;background:currentColor;transform:none;
  -webkit-mask:var(--itera-arrow) center/contain no-repeat;mask:var(--itera-arrow) center/contain no-repeat;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.link-arrow::after{transform:translateX(-260%)}
:is(a,button,summary):hover .link-arrow{translate:none}
:is(a,button,summary):hover .link-arrow::before{transform:translateX(260%)}
:is(a,button,summary):hover .link-arrow::after{transform:none}
html[dir=rtl] .link-arrow{scale:-1 1}
.btn .link-arrow{width:32px;height:32px;flex-basis:32px;margin-inline-start:14px;border-radius:50%;background:rgba(20,17,11,.14);box-shadow:inset 0 0 0 1px rgba(20,17,11,.12);clip-path:circle(50%)}
.btn .link-arrow::before,.btn .link-arrow::after{inset:9px}
.btn:hover .link-arrow{background:rgba(20,17,11,.9);color:#f3da98}
.btn .link-arrow{transition:background .35s,color .35s}
.btn span,.btn:hover span,.fx-motion .btn:hover span{transform:none}
.btn>span:has(.link-arrow){display:inline-flex}

/* Every gold button gets the "Explore the club" treatment: lift, glow, light sweep and magnetic pull. */
.fx .account-link{position:relative;overflow:hidden;border:0;background:linear-gradient(120deg,#f3da98,#c99f52 60%,#e7c77f);color:#141009;font-weight:700;
  box-shadow:0 8px 26px rgba(220,183,110,.22),inset 0 1px rgba(255,255,255,.5);transition:transform .3s,box-shadow .3s}
.fx .account-link:hover{background:linear-gradient(120deg,#f3da98,#c99f52 60%,#e7c77f);color:#141009}
.fx-motion .account-link,.fx-motion #course-access{transform:translate3d(var(--tx,0px),var(--ty,0px),0)}
.fx-motion .account-link:hover,.fx-motion #course-access:hover{transform:translate3d(var(--tx,0px),calc(var(--ty,0px) - 3px),0);box-shadow:0 14px 44px rgba(220,183,110,.45)}
.fx .account-link::before{content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-20deg);pointer-events:none}
.fx-motion .account-link:hover::before{animation:fx-sweep .9s ease}
html[data-theme=light] .fx .account-link{color:#141009}
.course-row button,.guide-options button{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.story-controls button{font-size:0!important;display:grid;place-items:center}
.story-controls button::before{content:'';width:18px;height:18px;background:currentColor;-webkit-mask:var(--itera-arrow) center/contain no-repeat;mask:var(--itera-arrow) center/contain no-repeat;rotate:-90deg;transition:translate .35s cubic-bezier(.2,.8,.2,1)}
.story-controls #next::before{rotate:90deg}
.story-controls #prev:hover::before{translate:0 -3px}
.story-controls #next:hover::before{translate:0 3px}

/* Log in: the next screen is prerendered on hover and cross-fades in (see cabinet.css). Browsers without
   cross-page view transitions get an immediate fade-out on click, so the page never just freezes. */
@view-transition{navigation:auto}
html.fx-leaving body>*{transition:opacity .35s ease,transform .5s cubic-bezier(.4,0,.2,1),filter .35s ease;opacity:0;transform:scale(1.04);filter:blur(6px);pointer-events:none}