/* ==========================================================================
   v5 — special effects layer
   ========================================================================== */

/* hero mouse spotlight */
.v2-hero,.v2-page,main>section.spot:first-of-type{--mx:50%;--my:40%}
.v2-hero>.spot-light,.v2-page>.spot-light,main>section.spot:first-of-type>.spot-light{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(520px circle at var(--mx) var(--my),rgba(125,211,252,.16),rgba(255,165,82,.07) 40%,transparent 65%);transition:opacity .4s}

/* 3D tilt + glare */
.fx-tilt{transform-style:preserve-3d;will-change:transform}
.fx-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;opacity:0;transition:opacity .35s;
  background:radial-gradient(300px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.55),rgba(255,255,255,0) 60%);mix-blend-mode:soft-light}
.fx-tilt:hover .fx-glare{opacity:1}

/* staggered 3D flip-in for grids */
.feat-grid>.rv,.grid-cards>.rv,.family>.rv,.bento>.rv,.lang-strip.rv>a,.clocks>.rv,.steps>.rv{transform:perspective(900px) rotateX(18deg) translateY(50px) scale(.96)!important;transform-origin:50% 100%}
.feat-grid>.rv.in,.grid-cards>.rv.in,.family>.rv.in,.bento>.rv.in,.clocks>.rv.in,.steps>.rv.in{transform:none!important}
.feat-grid>.rv:nth-child(2),.grid-cards>.rv:nth-child(2),.clocks>.rv:nth-child(2){transition-delay:.08s!important}
.feat-grid>.rv:nth-child(3),.grid-cards>.rv:nth-child(3),.clocks>.rv:nth-child(3){transition-delay:.16s!important}
.feat-grid>.rv:nth-child(4),.grid-cards>.rv:nth-child(4),.clocks>.rv:nth-child(4){transition-delay:.24s!important}
.feat-grid>.rv:nth-child(5),.clocks>.rv:nth-child(5){transition-delay:.32s!important}
.feat-grid>.rv:nth-child(6),.clocks>.rv:nth-child(6){transition-delay:.4s!important}

/* headline shine sweep when revealed */
.sec-head h2,.sec h2{background-size:220% 100%!important;background-position:100% 0}
.fx-shine h2,.sec-head.in h2{animation:h2shine 1.6s cubic-bezier(.2,.8,.2,1) .2s both}
@keyframes h2shine{0%{background-position:100% 0}100%{background-position:0 0}}

/* section top: glowing line that grows */
.sec,.sec-tight{position:relative}
.fx-line{position:absolute;left:50%;top:0;height:2px;width:min(1180px,90vw);transform:translateX(-50%) scaleX(0);transform-origin:50% 50%;background:linear-gradient(90deg,transparent,#38BDF8 30%,#FFA552 50%,#38BDF8 70%,transparent);opacity:.55;transition:transform 1.4s cubic-bezier(.2,.8,.2,1);pointer-events:none;z-index:1}
.fx-line.in{transform:translateX(-50%) scaleX(1)}

/* image reveal: curtain + zoom settle */
.media.fx-img{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1)}
.media.fx-img img{transform:scale(1.25);transition:transform 1.6s cubic-bezier(.2,.8,.2,1)}
.media.fx-img.in{clip-path:inset(0 0 0 0)}
.media.fx-img.in img{transform:scale(1)}
.media.fx-img::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(135deg,#38BDF8,#FFA552);transform:scaleY(1);transform-origin:50% 0;transition:transform .9s cubic-bezier(.7,0,.2,1) .35s;pointer-events:none}
.media.fx-img.in::before{transform:scaleY(0)}

/* floating glass shapes */
.fx-shapes{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.fx-shape{position:absolute;will-change:transform;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.fx-shape.ring{width:150px;height:150px;border-radius:50%;border:14px solid transparent;background:linear-gradient(#0000,#0000) padding-box,linear-gradient(135deg,rgba(56,189,248,.5),rgba(255,165,82,.4)) border-box;-webkit-mask:linear-gradient(#000 0 0) padding-box exclude,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) padding-box exclude,linear-gradient(#000 0 0);opacity:.45}
.fx-shape.orb{width:110px;height:110px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,rgba(125,211,252,.6) 40%,rgba(26,154,214,.25) 70%,transparent 72%);opacity:.55;filter:blur(.3px)}
.fx-shape.cube{width:70px;height:70px;border-radius:18px;background:linear-gradient(135deg,rgba(255,201,138,.75),rgba(255,165,82,.35));box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 20px 40px -20px rgba(255,140,56,.6);opacity:.55}
.fx-shape .spin{width:100%;height:100%;border-radius:inherit;animation:fxfloat 9s ease-in-out infinite alternate}
.fx-shape.ring{animation:fxspin 24s linear infinite}
.fx-shape.cube{animation:fxbob 7s ease-in-out infinite alternate}
.fx-shape.orb{animation:fxbob 9s ease-in-out infinite alternate-reverse}
@keyframes fxspin{to{rotate:360deg}}
@keyframes fxbob{0%{translate:0 0;rotate:0deg}100%{translate:0 -26px;rotate:14deg}}
.sec>.wrap,.sec-tight>.wrap{position:relative;z-index:1}

/* button ripple + sparks */
.btn .rip{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.55);animation:rip .7s ease-out forwards;pointer-events:none}
@keyframes rip{to{transform:scale(4);opacity:0}}
.fx-burst{position:fixed;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;pointer-events:none;z-index:9996;animation:burst .75s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes burst{to{transform:translate(var(--bx),var(--by)) scale(.1);opacity:0}}

/* logos: colour on hover */
.marquee img{transition:filter .4s,opacity .4s,transform .4s}
.marquee img:hover{filter:none!important;opacity:1!important;transform:scale(1.08)}

/* kinetic band: drifting star dust */
.kinetic::before,.kinetic::after{content:"";position:absolute;inset:-50%;pointer-events:none;background-image:radial-gradient(1.5px 1.5px at 20% 30%,rgba(255,255,255,.8),transparent),radial-gradient(1px 1px at 70% 60%,rgba(125,211,252,.9),transparent),radial-gradient(1.5px 1.5px at 40% 80%,rgba(255,201,138,.9),transparent),radial-gradient(1px 1px at 85% 15%,rgba(255,255,255,.7),transparent);background-size:220px 220px;animation:dust 40s linear infinite;opacity:.6}
.kinetic::after{background-size:330px 330px;animation-duration:65s;opacity:.4}
@keyframes dust{to{transform:translate3d(-220px,110px,0)}}
.kinetic .row{position:relative;z-index:1}

/* text scramble */
.fx-scr{font-variant-ligatures:none}

/* glowing card border sweep on hover */
.feat::before,.choose-card::before,.lang-strip a::before{content:"";position:absolute;inset:-1.5px;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--ang,0deg),transparent 0 65%,#38BDF8 78%,#FFA552 88%,transparent 96%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s;animation:spin-ang 3.5s linear infinite;pointer-events:none;z-index:2}
.feat:hover::before,.choose-card:hover::before,.lang-strip a:hover::before{opacity:1}

/* iGoinLearn mock: floating + glow */
.mock,.meet,.lvq{transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s}
.mock:hover,.lvq:hover{box-shadow:0 60px 120px -40px rgba(14,125,181,.7),0 0 0 1px rgba(125,211,252,.25),0 0 60px -10px rgba(56,189,248,.35)!important}
main>section.spot:first-of-type .mock{animation:fxbob 8s ease-in-out infinite alternate}

/* scroll velocity skew on big images */
.show-stage{transition:transform .08s linear}

@media (prefers-reduced-motion:reduce){.fx-shape,.kinetic::before,.kinetic::after{animation:none!important}.media.fx-img{clip-path:none}.media.fx-img::before{display:none}.media.fx-img img{transform:none}}
@media (max-width:760px){.fx-shapes{display:none}}

.fx-tilt.fx-tilt{transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,rotate .3s ease-out,opacity .9s,filter .9s!important}
.feat-grid,.choose,.family,.lang-strip,.clocks,.igl-spot .wrap,.sec-tight>.wrap,.split{perspective:1200px}
.btn-primary{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s!important}

/* ===== photo gallery strip ===== */
.gallery{position:relative;padding:clamp(64px,8vw,110px) 0 clamp(50px,6vw,80px);overflow:hidden;background:radial-gradient(70% 120% at 50% 0%,#0E3462,#050E1C)}
.gallery .sec-head h2{background:linear-gradient(100deg,#fff,#BDE9FF 50%,#FFC98A)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important}
.gallery .kicker{color:#7DD3FC!important}
.gal-track{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);padding:20px 0 30px}
.gal-row{display:flex;gap:22px;width:max-content;animation:galmove 70s linear infinite}
.gal-track:hover .gal-row{animation-play-state:paused}
@keyframes galmove{to{transform:translateX(-50%)}}
.gal-card{position:relative;margin:0;flex:0 0 auto;width:clamp(260px,30vw,420px);aspect-ratio:4/3;border-radius:26px;overflow:hidden;transform:rotate(var(--r,0deg));transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s;box-shadow:0 30px 60px -30px rgba(0,0,0,.7);border:1px solid rgba(125,211,252,.25)}
.gal-card:nth-child(odd){--r:-1.6deg;margin-top:26px}.gal-card:nth-child(even){--r:1.4deg}
.gal-card img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1),filter .6s;filter:saturate(.9)}
.gal-card:hover{transform:rotate(0) scale(1.06);z-index:2;box-shadow:0 50px 90px -30px rgba(0,0,0,.8),0 0 0 2px rgba(255,165,82,.6),0 0 60px -10px rgba(56,189,248,.5)}
.gal-card:hover img{transform:scale(1.12);filter:saturate(1.15)}
.gal-card figcaption{position:absolute;left:14px;right:14px;bottom:14px;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:16px;background:rgba(5,14,28,.55);backdrop-filter:blur(10px);color:#fff;font-weight:600;font-size:.96rem;border:1px solid rgba(255,255,255,.15)}
.gal-card figcaption span{font-family:var(--display);font-size:.78rem;color:#FFC98A}
@media (prefers-reduced-motion:reduce){.gal-row{animation:none}}

/* founder portrait */
.founder-card{position:relative;width:min(340px,80%);margin:0 0 26px;border-radius:30px;padding:6px;background:conic-gradient(from var(--ang,0deg),#38BDF8,#FFA552,#1A9AD6,#FFC98A,#38BDF8);animation:spin-ang 6s linear infinite;box-shadow:0 40px 80px -40px rgba(14,52,98,.7)}
.founder-card img{display:block;width:100%;height:auto;border-radius:25px}
.founder-tag{position:absolute;right:-14px;bottom:22px;padding:8px 14px;border-radius:999px;background:linear-gradient(135deg,#FFC98A,#FFA552);color:#2A1300;font-weight:700;font-size:.85rem;box-shadow:0 12px 26px -10px rgba(255,140,56,.7)}
/* photo bands: deep cinematic overlay */
.photo-band{background:#050E1C!important;color:#DCEBF7!important}
.photo-band .bg .media::after{background:linear-gradient(95deg,rgba(5,14,28,.92) 0%,rgba(5,14,28,.7) 45%,rgba(5,14,28,.15) 100%)!important}
.photo-band h2{color:#fff!important;-webkit-text-fill-color:#fff!important;background:none!important}
.photo-band .lead,.photo-band p{color:#C7DAEC!important}
.photo-band .kicker{color:#FFC98A!important}
.team-shot{position:relative;margin:0;border-radius:32px;overflow:hidden;box-shadow:0 60px 120px -60px rgba(5,14,28,.8);border:1px solid rgba(125,211,252,.25)}
.team-shot .media{aspect-ratio:16/9;border-radius:0}
.team-shot img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.team-shot:hover img{transform:scale(1.04)}
.team-shot figcaption{position:absolute;right:22px;bottom:22px;max-width:420px;padding:18px 22px;border-radius:22px;background:rgba(5,14,28,.6);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.16);color:#C7DAEC}
.team-shot figcaption b{display:block;color:#fff;font-family:var(--display);font-size:1.2rem;margin-bottom:4px}
@media (max-width:700px){.team-shot figcaption{position:static;max-width:none;border-radius:0}}

/* iConnect licence plans */
.plans{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.plan{position:relative;display:flex;flex-direction:column;gap:8px;padding:24px 20px;border-radius:24px;text-decoration:none;color:var(--ink-2);background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,rgba(56,189,248,.55),rgba(26,154,214,.08) 45%,rgba(125,211,252,.5)) border-box;border:1.5px solid transparent;box-shadow:0 20px 50px -38px rgba(14,125,181,.7);transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.plan:hover{transform:translateY(-8px);box-shadow:0 40px 80px -36px rgba(14,125,181,.65)}
.plan-n{font-weight:700;color:#0E7DB5;text-transform:uppercase;letter-spacing:.06em;font-size:.8rem}
.plan b{font-family:var(--display);font-size:1.45rem;color:var(--navy)}
.plan-d{font-size:.92rem;flex:1}
.plan-go{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:#1A9AD6;font-size:.92rem}
.plan-go svg{width:16px;height:16px;transition:transform .3s}.plan:hover .plan-go svg{transform:translateX(4px)}
.plan.hot{background:radial-gradient(60% 80% at 100% 0%,rgba(255,165,82,.35),transparent 60%),linear-gradient(160deg,#0A2342,#0E3462);color:#C7DAEC;border-color:rgba(255,165,82,.5)}
.plan.hot b{color:#fff}.plan.hot .plan-n{color:#FFC98A}.plan.hot .plan-go{color:#FFC98A}
@media (max-width:1100px){.plans{grid-template-columns:repeat(3,1fr)}}@media (max-width:700px){.plans{grid-template-columns:1fr}}