/* =====================================================================
   MiGreen — Cinematic layer (3D, particles, smooth scroll, transitions)
   Loaded after main.css. Everything degrades gracefully without JS.
   ===================================================================== */

/* ---------- Scroll progress bar ---------- */
.mg-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;background:var(--grad-green);box-shadow:0 0 12px rgba(140,198,63,.6);transition:width .08s linear}

/* ---------- Preloader ---------- */
.mg-pre{position:fixed;inset:0;z-index:10000;background:#06171F;display:grid;place-items:center;transition:opacity .7s var(--ease),visibility .7s}
.mg-pre.is-done{opacity:0;visibility:hidden}
.mg-pre__inner{display:flex;flex-direction:column;align-items:center;gap:22px}
.mg-pre__mark{width:74px;height:74px;animation:preSpin 2.4s var(--ease) infinite}
@keyframes preSpin{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.08)}100%{transform:rotate(360deg) scale(1)}}
.mg-pre__word{font-family:"Manrope",sans-serif;font-weight:800;font-size:1.5rem;letter-spacing:-.02em;color:#fff}
.mg-pre__word b{color:var(--green-400)}
.mg-pre__bar{width:180px;height:3px;background:rgba(255,255,255,.12);border-radius:3px;overflow:hidden}
.mg-pre__bar i{display:block;height:100%;width:0;background:var(--grad-green);transition:width .3s var(--ease)}
.mg-pre__tag{font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:#5f7d87}
body.mg-loading{overflow:hidden}

/* Reveal the hero from behind the curtain */
body.mg-ready .hero__copy>*{--_ok:1}

/* ---------- Custom cursor (desktop, fine pointer) ---------- */
.mg-cursor,.mg-cursor__dot{position:fixed;top:0;left:0;pointer-events:none;z-index:9998;border-radius:50%;transform:translate(-50%,-50%);will-change:transform;mix-blend-mode:difference}
.mg-cursor{width:38px;height:38px;border:1.5px solid rgba(255,255,255,.6);transition:width .28s var(--ease),height .28s var(--ease),background .28s var(--ease),opacity .3s}
.mg-cursor__dot{width:6px;height:6px;background:#fff}
.mg-cursor.is-hover{width:64px;height:64px;background:rgba(255,255,255,.12);border-color:transparent}
.mg-cursor.is-hidden{opacity:0}
@media (hover:hover) and (pointer:fine){ html.mg-cursor-on,html.mg-cursor-on *{cursor:none !important} }

/* ---------- 3D hero canvas ---------- */
#hero-3d{position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity 1.2s var(--ease)}
#hero-3d.is-on{opacity:1}
#hero-3d canvas{display:block;width:100%!important;height:100%!important}
.hero--dark.has-3d #hero-net{opacity:0;transition:opacity .6s}
/* When the 3D globe is active, retire the flat SVG globe to avoid a double motif */
.hero--dark.has-3d .hero-globe{opacity:0;transition:opacity .6s}
.hero--dark.has-3d .chips{opacity:.96}
/* Legibility scrim behind the hero copy over the particle field */
.hero--dark.has-3d .hero__copy{position:relative;z-index:1}
.hero--dark.has-3d .hero__copy::before{content:"";position:absolute;inset:-50px -120px -50px -70px;z-index:-1;pointer-events:none;background:radial-gradient(120% 100% at 24% 46%,rgba(6,23,31,.78),rgba(6,23,31,.35) 55%,rgba(6,23,31,0) 78%)}

/* ---------- Cinematic hero text (word/line mask reveal) ---------- */
.mg-line{display:block;overflow:hidden}
.mg-line>span{display:inline-block;transform:translateY(115%);transition:transform 1s var(--ease-out)}
.mg-anim .mg-line>span,body.mg-ready .mg-anim .mg-line>span{transform:none}
.mg-line:nth-child(1)>span{transition-delay:.05s}
.mg-line:nth-child(2)>span{transition-delay:.16s}
.mg-line:nth-child(3)>span{transition-delay:.27s}
.mg-line:nth-child(4)>span{transition-delay:.38s}
.mg-line:nth-child(5)>span{transition-delay:.49s}
.mg-line:nth-child(6)>span{transition-delay:.60s}

/* ---------- Upgraded reveals (blur + scale, directional) ---------- */
.js .reveal{opacity:0;transform:translateY(38px) scale(.98);filter:blur(8px);transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out),filter 1s var(--ease-out)}
.js .reveal.in{opacity:1;transform:none;filter:blur(0)}
.js .reveal[data-rev="left"]{transform:translateX(-46px)}
.js .reveal[data-rev="right"]{transform:translateX(46px)}
.js .reveal[data-rev="scale"]{transform:scale(.9);filter:blur(10px)}

/* ---------- 3D tilt cards ---------- */
.tilt-wrap{perspective:1100px}
.tilt{transform-style:preserve-3d;transition:transform .4s var(--ease)}
.tilt__glow{position:absolute;inset:0;border-radius:inherit;opacity:0;background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(140,198,63,.18),transparent 60%);transition:opacity .3s;pointer-events:none}
.card:hover .tilt__glow{opacity:1}

/* ---------- Magnetic buttons ---------- */
.btn.is-magnetic{will-change:transform}

/* ---------- Scroll cue ---------- */
.mg-scrollcue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:#9fbcc6;font-family:"Manrope",sans-serif;font-weight:600;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;z-index:2;animation:cueFloat 2.4s ease-in-out infinite}
.mg-scrollcue span{width:22px;height:34px;border:1.5px solid rgba(255,255,255,.35);border-radius:12px;position:relative}
.mg-scrollcue span::before{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;background:var(--green);border-radius:2px;transform:translateX(-50%);animation:cueDot 1.6s var(--ease) infinite}
@keyframes cueFloat{50%{transform:translateX(-50%) translateY(6px)}}
@keyframes cueDot{0%{opacity:0;top:7px}40%{opacity:1}100%{opacity:0;top:18px}}

/* ---------- Section entrance for dark bands ---------- */
.section--navy .container,.ctaband{will-change:transform}

/* ---------- Lenis ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- Reduced motion / no-JS safety ---------- */
@media (prefers-reduced-motion: reduce){
  .mg-pre{display:none}
  .mg-line>span{transform:none!important}
  .js .reveal{opacity:1!important;transform:none!important;filter:none!important}
  #hero-3d{display:none}
  .mg-cursor,.mg-cursor__dot,.mg-scrollcue,.mg-progress{display:none}
}
@media (max-width:860px){
  .mg-cursor,.mg-cursor__dot{display:none}
  html.mg-cursor-on,html.mg-cursor-on *{cursor:auto!important}
  .mg-scrollcue{display:none}
}

/* ---------- Conference gallery + lightbox ---------- */
.mg-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.mg-gallery__item{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:14px;background:var(--mint);box-shadow:var(--shadow-xs);cursor:pointer}
.mg-gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-out),opacity .4s;opacity:0}
.mg-gallery__item img.mg-loaded{opacity:1}
.mg-gallery__item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(6,23,31,.35));opacity:0;transition:opacity .3s}
.mg-gallery__item:hover img{transform:scale(1.06)}
.mg-gallery__item:hover::after{opacity:1}
@media(max-width:520px){.mg-gallery{grid-template-columns:repeat(2,1fr);gap:10px}}

.mg-lightbox{position:fixed;inset:0;z-index:10001;background:rgba(6,23,31,.95);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}
.mg-lightbox.open{display:flex;opacity:1}
.mg-lightbox__img{max-width:92vw;max-height:86vh;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.mg-lightbox__close,.mg-lightbox__nav{position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;cursor:pointer;border-radius:50%;display:grid;place-items:center;transition:background .2s}
.mg-lightbox__close:hover,.mg-lightbox__nav:hover{background:rgba(140,198,63,.35)}
.mg-lightbox__close{top:20px;right:24px;width:46px;height:46px;font-size:1.8rem;line-height:1}
.mg-lightbox__nav{top:50%;transform:translateY(-50%);width:54px;height:54px;font-size:2rem;line-height:1}
.mg-lightbox__prev{left:18px}
.mg-lightbox__next{right:18px}
@media(max-width:600px){.mg-lightbox__nav{width:44px;height:44px;font-size:1.5rem}.mg-lightbox__prev{left:8px}.mg-lightbox__next{right:8px}}