/* ==========================================================================
   LYTTA — enhance.css
   Premium progressive-enhancement layer: preloader, custom cursor, grain,
   gradient mesh, marquee, swiper showcase, magnetic buttons, parallax decor.
   Loaded AFTER site.css. Everything here degrades gracefully.
   ========================================================================== */

/* ---------- Preloader ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
  background: var(--bg);
  transition: opacity 0.7s ease, visibility 0.7s ease;
}
.preloader.done { opacity: 0; visibility: hidden; }
.preloader-inner { text-align: center; }
.preloader-logo {
  font-family: var(--font-head); font-size: clamp(2.5rem, 8vw, 4.5rem); letter-spacing: 4px;
  color: var(--white); line-height: 1;
}
.preloader-logo span { color: var(--accent); }
.preloader-bar { width: 220px; max-width: 60vw; height: 3px; background: rgba(255,255,255,0.12); border-radius: 4px; margin: 22px auto 0; overflow: hidden; }
.preloader-bar i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--blue)); transition: width 0.3s ease; }
.preloader-tag { margin-top: 14px; font-size: 0.72rem; letter-spacing: 4px; text-transform: uppercase; color: var(--muted-2); }

/* spinning ball */
.preloader-ball { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--accent) 70%); margin: 0 auto 18px; animation: ploat 1.1s ease-in-out infinite; box-shadow: 0 8px 20px var(--accent-glow); }
@keyframes ploat { 0%,100% { transform: translateY(0) scale(1);} 50% { transform: translateY(-14px) scale(0.92);} }

/* ---------- Custom ping-pong paddle cursor (pointer:fine only) ---------- */
.paddle-cursor { position: fixed; top: 0; left: 0; z-index: 9001; pointer-events: none; transform-origin: 22px 22px; will-change: transform; }
.paddle-svg { display: block; transform-origin: 22px 22px; transition: scale 0.18s cubic-bezier(0.34,1.56,0.64,1); filter: drop-shadow(0 5px 9px rgba(0,0,0,0.45)); }
.paddle-cursor.hover .paddle-svg { scale: 1.22; }
.paddle-cursor.swing .paddle-svg { animation: paddle-swing 0.42s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes paddle-swing { 0% { rotate: 0deg; } 26% { rotate: -48deg; } 100% { rotate: 0deg; } }

/* the ping-pong ball that trails the paddle */
.cursor-ball { position: fixed; top: 0; left: 0; z-index: 9000; width: 12px; height: 12px; border-radius: 50%; pointer-events: none; transform: translate(-50%,-50%); will-change: transform; background: radial-gradient(circle at 34% 30%, #fff, #d6dae6 72%); box-shadow: 0 4px 10px rgba(0,0,0,0.4); }

/* burst when you click ("ping!") */
.ping-ball { position: fixed; z-index: 8999; width: 16px; height: 16px; border-radius: 50%; pointer-events: none; transform: translate(-50%,-50%); background: radial-gradient(circle at 35% 30%, #fff, var(--accent) 82%); animation: ping-pop 0.6s ease-out forwards; }
@keyframes ping-pop { 0% { opacity: 0.95; transform: translate(-50%,-50%) scale(0.4); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(2.8); } }

body.has-paddle-cursor,
body.has-paddle-cursor a, body.has-paddle-cursor button,
body.has-paddle-cursor .card, body.has-paddle-cursor .gallery-item,
body.has-paddle-cursor input, body.has-paddle-cursor textarea, body.has-paddle-cursor select { cursor: none; }
@media (hover: none), (pointer: coarse) { .paddle-cursor, .cursor-ball { display: none !important; } }

/* ---------- Film grain overlay ---------- */
.grain {
  position: fixed; inset: -150%; z-index: 8000; pointer-events: none; opacity: 0.04;
  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='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.7s steps(4) infinite;
}
@keyframes grain { 0%{transform:translate(0,0)} 25%{transform:translate(-4%,3%)} 50%{transform:translate(3%,-4%)} 75%{transform:translate(-3%,-2%)} 100%{transform:translate(2%,4%)} }

/* ---------- Gradient-mesh depth on sections ---------- */
.section { isolation: isolate; }
.section::after {
  content: ""; position: absolute; z-index: -1; width: 520px; height: 520px; border-radius: 50%;
  filter: blur(120px); opacity: 0.10; pointer-events: none;
  background: radial-gradient(circle, var(--accent), transparent 70%);
  top: -120px; right: -120px;
}
.section--alt::after { background: radial-gradient(circle, var(--blue), transparent 70%); left: -140px; right: auto; top: auto; bottom: -120px; }

/* ---------- Gradient display headings ---------- */
.section-title, .hero h1, .page-hero h1 { background-clip: border-box; }
.text-gradient {
  background: linear-gradient(110deg, #fff 0%, #fff 40%, var(--accent) 75%, var(--blue) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- Floating parallax ping-pong balls ---------- */
.float-ball { position: absolute; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #fff, rgba(255,255,255,0.35) 60%, transparent 72%); box-shadow: 0 10px 30px rgba(0,0,0,0.3); pointer-events: none; z-index: 1; opacity: 0.55; animation: ballPulse 4.5s ease-in-out infinite; }
.float-ball:nth-child(2) { animation-delay: 0.8s; }
.float-ball:nth-child(3) { animation-delay: 1.6s; }
.float-ball:nth-child(4) { animation-delay: 2.4s; }
@keyframes ballPulse {
  0%, 100% { box-shadow: 0 10px 30px rgba(0,0,0,0.3); filter: brightness(1); }
  50% { box-shadow: 0 16px 46px var(--accent-glow); filter: brightness(1.14); }
}

/* ---------- Marquee ticker ---------- */
.marquee { position: relative; overflow: hidden; background: var(--accent); padding: 16px 0; transform: rotate(-1.4deg) scale(1.04); margin: 60px 0; border-top: 1px solid rgba(255,255,255,0.2); border-bottom: 1px solid rgba(255,255,255,0.2); }
.marquee-track { display: flex; gap: 0; white-space: nowrap; width: max-content; animation: marquee 26s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span { font-family: var(--font-head); font-size: clamp(1.3rem, 3vw, 2rem); color: #fff; letter-spacing: 1px; padding: 0 26px; display: inline-flex; align-items: center; gap: 26px; text-transform: uppercase; }
.marquee-track span::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.85); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* bouncing ping-pong ball flying across the ticker */
.marquee-ball {
  position: absolute; top: 50%; left: -5%; width: 14px; height: 14px; border-radius: 50%; z-index: 3;
  pointer-events: none; background: radial-gradient(circle at 34% 30%, #fff, #e9ecf5 72%);
  box-shadow: 0 4px 10px rgba(0,0,0,0.35);
  animation: mqCross 7s linear infinite, mqBounce 0.72s ease-in-out infinite alternate;
}
@keyframes mqCross { from { left: -5%; } to { left: 105%; } }
@keyframes mqBounce { from { transform: translateY(-14px); } to { transform: translateY(11px); } }

/* ---------- Ping-pong "net" rally divider (injected between sections) ---------- */
.net-divider { position: relative; height: 110px; margin: 6px 0 -14px; pointer-events: none; overflow: hidden; }
.net-divider::before {           /* table baseline */
  content: ""; position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%);
  width: min(440px, 72%); height: 2px;
  background: linear-gradient(90deg, transparent, var(--line) 16%, var(--line) 84%, transparent);
}
.net-divider .net {              /* the net + mesh + white tape */
  position: absolute; left: 50%; bottom: 33px; transform: translateX(-50%);
  width: 88px; height: 30px; opacity: 0.7;
  border-top: 3px solid rgba(255,255,255,0.75);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.22) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.16) 0 1px, transparent 1px 7px);
}
.net-divider .rally-ball {       /* ball arcing over the net, back and forth */
  position: absolute; width: 13px; height: 13px; border-radius: 50%; left: 14%; bottom: 32px;
  background: radial-gradient(circle at 34% 30%, #fff, var(--accent) 85%);
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  animation: pingRally 4.2s ease-in-out infinite alternate;
}
@keyframes pingRally {
  0%   { left: 14%; bottom: 32px; }
  25%  { left: 30%; bottom: 70px; }
  50%  { left: 50%; bottom: 84px; }
  75%  { left: 70%; bottom: 70px; }
  100% { left: 86%; bottom: 32px; }
}

/* ---------- Swiper showcase ---------- */
.showcase { padding-bottom: 0; }
.showcase-swiper { overflow: hidden; border-radius: var(--radius-lg); }
.showcase-slide { position: relative; aspect-ratio: 16/8; overflow: hidden; }
.showcase-slide img { width: 100%; height: 100%; object-fit: cover; }
.showcase-slide .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px; background: linear-gradient(transparent, rgba(8,11,22,0.85)); }
.showcase-slide .cap h3 { font-size: clamp(1.5rem, 4vw, 2.6rem); color: #fff; }
.showcase-slide .cap p { color: var(--muted); max-width: 460px; }
.swiper-pagination-bullet { background: #fff; opacity: 0.4; }
.swiper-pagination-bullet-active { background: var(--accent); opacity: 1; width: 26px; border-radius: 5px; }
.swiper-button-next, .swiper-button-prev { color: #fff; background: rgba(255,255,255,0.12); width: 50px; height: 50px; border-radius: 50%; backdrop-filter: blur(6px); transition: background var(--transition); }
.swiper-button-next:hover, .swiper-button-prev:hover { background: var(--accent); }
.swiper-button-next::after, .swiper-button-prev::after { font-size: 18px; font-weight: 700; }

/* ---------- GSAP split-text reveal helpers ---------- */
.line-mask { display: block; overflow: hidden; }
.reveal-word { display: inline-block; }

/* ---------- Magnetic wrap (keeps transform isolated from hover) ---------- */
.magnetic { display: inline-flex; will-change: transform; }

/* Hide native scrollbar polish (Lenis) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .grain, .marquee-track, .preloader-ball { animation: none !important; }
  .float-ball, .marquee-ball, .net-divider { display: none; }
}