/* ==========================================================================
   Cloud World — premium layer
   Cinematic WebGL loader, liquid page transitions, grain, spotlight borders,
   kinetic typography + glass lens, particles, liquid hover, button roll.
   ========================================================================== */

/* ---------------------------------------------------------------- LOADER */
.preloader {
  position: fixed; inset: 0; z-index: 3000; overflow: hidden; color: #e8eaee;
  animation: cw-failsafe 0.6s ease 7s forwards;
}
.preloader.is-js { animation: none; }
html:not(.js) .preloader, .reduced-motion .preloader { display: none; }
@keyframes cw-failsafe { to { opacity: 0; visibility: hidden; } }

.pl-curtain { position: absolute; inset: 0; width: 100%; height: 100%; }
.pl-curtain path { fill: #02040a; }

.pl-aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.pl-aurora i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.55; }
.pl-aurora i:nth-child(1) { width: 55vw; height: 55vw; left: -12vw; top: -18vw; background: #1d3d7a; animation: pl-drift 9s ease-in-out infinite; }
.pl-aurora i:nth-child(2) { width: 45vw; height: 45vw; right: -10vw; bottom: -20vw; background: #0f5f78; animation: pl-drift 11s ease-in-out infinite reverse; }
.pl-aurora i:nth-child(3) { width: 30vw; height: 30vw; left: 40vw; top: 30vh; background: #2a2f8f; opacity: 0.35; animation: pl-drift 13s ease-in-out infinite; }
@keyframes pl-drift { 50% { transform: translate(6vw, 5vh) scale(1.15); } }
.pl-grid {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.25;
  background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse at center, #000 10%, transparent 70%);
}

.pl-stage {
  --s: min(58vw, 380px);
  position: absolute; left: 50%; top: 46%; width: var(--s); height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
}
.pl-gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.pl-halo { position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, rgba(70, 182, 213, 0.32), rgba(60, 101, 172, 0.14) 38%, transparent 66%); }
.pl-ring { position: absolute; inset: -9%; width: 118%; height: 118%; transform: rotate(-90deg); overflow: visible; }
.pl-ring circle { fill: none; stroke-width: 0.6; }
.pl-ring-track { stroke: rgba(255, 255, 255, 0.08); }
.pl-ring-bar { stroke: #46b6d5; stroke-linecap: round; stroke-dasharray: 603.2; stroke-dashoffset: 603.2; filter: drop-shadow(0 0 6px rgba(70, 182, 213, 0.8)); }

/* CSS fallback when WebGL is unavailable: gooey liquid blobs */
.pl-goo { position: absolute; inset: 18%; display: none; filter: url(#cw-goo); }
.no-gl .pl-goo { display: block; }
.no-gl .pl-gl { display: none; }
.pl-goo i { position: absolute; left: 50%; top: 50%; width: 46%; height: 46%; margin: -23% 0 0 -23%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #9be5fc, #3c65ac 55%, #10234d); }
.pl-goo i:nth-child(1) { animation: pl-orbit 2.6s ease-in-out infinite; }
.pl-goo i:nth-child(2) { animation: pl-orbit 3.2s ease-in-out infinite reverse; width: 36%; height: 36%; margin: -18% 0 0 -18%; }
.pl-goo i:nth-child(3) { animation: pl-orbit 3.8s ease-in-out infinite 0.4s; width: 30%; height: 30%; margin: -15% 0 0 -15%; }
.pl-goo i:nth-child(4) { animation: pl-orbit 4.4s ease-in-out infinite reverse 0.8s; width: 26%; height: 26%; margin: -13% 0 0 -13%; }
@keyframes pl-orbit { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(40%, -30%); } 50% { transform: translate(-10%, 40%); } 75% { transform: translate(-40%, -20%); } }

.pl-logo { position: absolute; left: 50%; top: calc(46% + min(29vw, 190px) + 42px); width: 150px; height: auto; margin-left: -75px; }
.pl-top, .pl-bottom { position: absolute; left: 4%; right: 4%; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.pl-top { top: 34px; align-items: center; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: #7d8592; }
.pl-top sup { font-size: 0.7em; }
.pl-status::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); margin-right: 10px; box-shadow: 0 0 12px var(--cyan); animation: pl-blink 1s ease-in-out infinite; vertical-align: 1px; }
@keyframes pl-blink { 50% { opacity: 0.25; } }
.pl-bottom { bottom: 40px; }
.pl-counter { display: flex; align-items: flex-start; font-size: clamp(76px, 12vw, 190px); font-weight: 300; letter-spacing: -0.06em; line-height: 1; }
.pl-counter sup { font-size: 0.24em; top: 0.4em; margin-left: 0.25em; color: var(--cyan); letter-spacing: 0; }
.odo-col { display: inline-block; height: 1em; overflow: hidden; }
.odo-stack { display: block; will-change: transform; }
.odo-stack > span { display: block; height: 1em; line-height: 1; text-align: center; }
.pl-words { position: relative; height: 1.25em; width: 9em; overflow: hidden; font-size: clamp(18px, 1.8vw, 30px); font-weight: 300; letter-spacing: -0.03em; text-align: right; margin-bottom: 0.4em; }
.pl-words span { position: absolute; right: 0; top: 0; line-height: 1.25; white-space: nowrap; }
.pl-words span:last-child { color: var(--cyan); }
.pl-line { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, 0.06); }
.pl-line i { display: block; height: 100%; background: linear-gradient(90deg, #3c65ac, #46b6d5, #9be5fc); transform: scaleX(0); transform-origin: left; box-shadow: 0 0 14px rgba(70, 182, 213, 0.8); }

/* Return visits / page-to-page: short branded reveal */
.is-return .pl-stage, .is-return .pl-top, .is-return .pl-bottom, .is-return .pl-grid { display: none; }
.is-return .pl-logo { top: 50%; margin-top: -20px; }
.is-return .pl-aurora { opacity: 0.4; }

@media (max-width: 700px) {
  .pl-stage { top: 42%; }
  .pl-logo { top: calc(42% + 29vw + 30px); width: 130px; margin-left: -65px; }
  .pl-top { font-size: 10px; top: 22px; }
  .pl-bottom { bottom: 28px; }
  .pl-words { width: 7em; }
}

/* ------------------------------------------------------ PAGE TRANSITION */
.page-transition { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2950; pointer-events: none; }
.page-transition path { fill: #02040a; }
.pt-logo { position: fixed; left: 50%; top: 50%; width: 150px; height: auto; margin: -20px 0 0 -75px; z-index: 2960; opacity: 0; pointer-events: none; }

/* ------------------------------------------------------------------ GRAIN */
.grain {
  position: fixed; left: -50%; top: -50%; width: 200%; height: 200%; z-index: 2600; pointer-events: none; opacity: 0.055;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: cw-grain 0.9s steps(6) infinite;
}
@keyframes cw-grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-6%, 4%); } 40% { transform: translate(5%, -7%); }
  60% { transform: translate(-3%, 8%); } 80% { transform: translate(7%, 2%); } 100% { transform: translate(0, 0); }
}
.reduced-motion .grain { animation: none; }

/* ------------------------------------------------ SPOTLIGHT GLASS BORDERS */
.spot { position: relative; }
.spot::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: 4; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(155, 229, 252, 0.95), rgba(70, 182, 213, 0.35) 25%, transparent 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity 0.5s;
}
.spot:hover::before { opacity: 1; }
.spot-glow { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; opacity: 0; transition: opacity 0.5s;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(70, 182, 213, 0.09), transparent 45%); }
.spot:hover .spot-glow { opacity: 1; }

/* ------------------------------------------------------------ BUTTON ROLL */
.connect .btn-roll, .about-hero-cta .btn-roll, .btn-roll { display: inline-flex; flex-direction: column; font-size: inherit; height: 1.35em; line-height: 1.35em; overflow: hidden; vertical-align: middle; }
.connect .btn-roll > span, .about-hero-cta .btn-roll > span, .btn-roll > span { display: block; font-size: inherit; line-height: 1.35em; height: 1.35em; transition: transform 0.55s cubic-bezier(0.7, 0, 0.2, 1); }
.connect:hover .btn-roll > span, .about-hero-cta:hover .btn-roll > span, .connect:focus-visible .btn-roll > span { transform: translateY(-100%); }

/* ------------------------------------------------------------ HERO EXTRAS */
.fx-particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fx-spot {
  position: absolute; left: 0; top: 0; width: 640px; height: 640px; margin: -320px 0 0 -320px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(110, 200, 235, 0.22), rgba(60, 101, 172, 0.1) 40%, transparent 68%);
  mix-blend-mode: screen; opacity: 0; transition: opacity 0.6s;
}
.hero:hover .fx-spot, .page-hero:hover .fx-spot { opacity: 1; }
.hero-video { will-change: clip-path; }
.reduced-motion .fx-particles, .reduced-motion .fx-spot { display: none; }

/* --------------------------------------------- KINETIC TYPE + GLASS LENS */
.kinetic-band { position: relative; max-width: 1920px; margin: 0 auto; padding: 110px 0; overflow: hidden; isolation: isolate; }
.kinetic-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 50% 60% at 50% 50%, rgba(60, 101, 172, 0.16), transparent 70%); }
.kinetic-row { display: flex; align-items: center; width: max-content; white-space: nowrap; will-change: transform; }
.kinetic-row > span { font-size: clamp(58px, 9.4vw, 178px); font-weight: 300; letter-spacing: -0.055em; line-height: 1.08; color: #e6e8eb; padding: 0 0.28em; }
.kinetic-row > .is-outline { color: transparent; -webkit-text-stroke: 1px rgba(230, 232, 235, 0.42); }
.kinetic-row > .is-grad { background: linear-gradient(100deg, #9be5fc, #46b6d5 40%, #3c65ac 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kinetic-row > i { font-style: normal; color: var(--cyan); font-size: clamp(26px, 3.6vw, 66px); display: inline-block; }
.kinetic-row + .kinetic-row { margin-top: 8px; }
.kinetic-lens {
  position: absolute; inset: 0; margin: auto; z-index: 2; pointer-events: none;
  width: clamp(170px, 19vw, 320px); height: clamp(170px, 19vw, 320px); border-radius: 50%;
  -webkit-backdrop-filter: blur(5px) saturate(180%) brightness(1.3); backdrop-filter: blur(5px) saturate(180%) brightness(1.3);
  background: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05) 32%, rgba(70, 182, 213, 0.06) 62%, rgba(255, 255, 255, 0.14) 100%);
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: inset 0 0 50px rgba(70, 182, 213, 0.28), inset 0 -18px 40px rgba(0, 0, 0, 0.45), inset 0 10px 24px rgba(255, 255, 255, 0.12), 0 40px 90px rgba(0, 0, 0, 0.55);
}
.kinetic-lens img { position: absolute; left: 14%; top: 14%; width: 72%; height: auto; opacity: 0.95; filter: drop-shadow(0 12px 30px rgba(70, 182, 213, 0.35)); }
.kinetic-lens::after { content: ""; position: absolute; left: 16%; top: 9%; width: 36%; height: 16%; border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent); filter: blur(2px); transform: rotate(-24deg); }
@media (max-width: 700px) { .kinetic-band { padding: 60px 0; } }

/* -------------------------------------------------- FOOTER WORDMARK GLOW */
.footer-wordmark-inner { position: relative; }
.wm-glow {
  position: absolute; left: 0; top: 0; width: 100%; height: auto; pointer-events: none; opacity: 0; transition: opacity 0.5s;
  filter: brightness(2.6) saturate(1.6) drop-shadow(0 0 24px rgba(70, 182, 213, 0.7));
  -webkit-mask-image: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), #000 0%, transparent 70%);
  mask-image: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), #000 0%, transparent 70%);
}
.footer-wordmark:hover .wm-glow { opacity: 1; }
.footer-wordmark:hover img:not(.wm-glow) { opacity: 0.42; filter: none; }

/* ---------------------------------------------------- SVG filter defs */
.fx-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* GSAP drives the badge spin when motion is on (so scroll can speed it up) */
.motion-on .scroll-badge svg { animation: none; }