/* =============================================================
   POLISH — lighting / glow / depth / motion micro-details
   Layered on top of scene CSS.
   ============================================================= */

/* Ambient drifting orb behind every dark scene */
.act--storm::before,
.act--wave::before,
.act--kinetic::before,
.act--goo::before {
  content: "";
  position: absolute;
  width: 80vw; height: 80vw;
  top: -20vw; left: -20vw;
  background: radial-gradient(circle, rgba(198,93,58,0.08), transparent 60%);
  pointer-events: none;
  mix-blend-mode: screen;
  animation: ambient-drift 30s ease-in-out infinite alternate;
  z-index: 0;
}
.act--wave::before { top: auto; bottom: -30vw; left: auto; right: -20vw;
  background: radial-gradient(circle, rgba(58,90,120,0.25), transparent 60%); }
.act--kinetic::before { background: radial-gradient(circle, rgba(198,93,58,0.12), transparent 60%); }
.act--goo::before    { background: radial-gradient(circle, rgba(216,153,69,0.15), transparent 60%); }
@keyframes ambient-drift {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(20vw, 10vw) scale(1.3); }
}

/* Dust/star particles for storm + threed acts */
.act--storm .storm-sky::before,
.act--threed::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 80% 20%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 10% 80%, rgba(255,255,255,0.3), transparent),
    radial-gradient(2px 2px at 40% 45%, rgba(216,153,69,0.4), transparent),
    radial-gradient(1px 1px at 90% 60%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 30% 90%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 70% 10%, rgba(255,255,255,0.5), transparent);
  background-size: 800px 800px, 600px 600px, 700px 700px, 500px 500px, 900px 900px, 650px 650px, 750px 750px, 550px 550px;
  opacity: 0.6;
  animation: starfield 120s linear infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes starfield {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 800px 400px, -600px 300px, 700px -350px, -500px -250px, 900px 450px, -650px 320px, 750px -375px, -550px -275px; }
}

/* Becalmed — layered sky with drifting cloud hint */
.act--becalmed {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,220,180,0.3), transparent 50%),
    radial-gradient(ellipse at 70% 10%, rgba(200,220,240,0.4), transparent 60%),
    linear-gradient(180deg, #f5efe4 0%, #ebe0c8 60%, #d4c4a0 100%);
  position: relative;
}
.act--becalmed::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 600px 80px at 20% 25%, rgba(255,255,255,0.5), transparent),
    radial-gradient(ellipse 500px 60px at 75% 35%, rgba(255,255,255,0.4), transparent),
    radial-gradient(ellipse 400px 50px at 50% 18%, rgba(255,255,255,0.6), transparent);
  pointer-events: none;
  animation: cloud-drift 90s linear infinite;
}
@keyframes cloud-drift {
  from { transform: translateX(-5%); }
  to   { transform: translateX(5%); }
}
.act--becalmed::after {
  /* sun glow */
  content: "";
  position: absolute;
  top: 15%; left: 65%;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(255,220,160,0.8), rgba(255,200,120,0.3) 40%, transparent 70%);
  border-radius: 50%;
  mix-blend-mode: screen;
  filter: blur(10px);
  animation: sun-shimmer 8s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes sun-shimmer {
  from { opacity: 0.7; transform: scale(1); }
  to   { opacity: 1;   transform: scale(1.1); }
}
.becalmed-title em {
  text-shadow: 0 0 60px rgba(198,93,58,0.3);
}

/* Storm — lightning glow halo on bolt */
.bolt { filter: drop-shadow(0 0 60px #fff) drop-shadow(0 0 30px #a0c8ff) drop-shadow(0 0 120px rgba(160,200,255,0.6)); }

/* Additional rain: angled + heavier foreground */
.rain::after {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    15deg,
    transparent 0 4px,
    rgba(180,200,230,0.15) 4px 5px,
    transparent 5px 30px
  );
  animation: rain-sheet 0.3s linear infinite;
  pointer-events: none;
}
@keyframes rain-sheet {
  from { background-position: 0 0; }
  to   { background-position: 10px 40px; }
}

/* Boat glow on wet hull */
.boat { filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6)) drop-shadow(0 0 30px rgba(100,140,200,0.2)); }

/* Wave scene — caustic shimmer */
.act--wave::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(ellipse 200px 40px at 20% 70%, rgba(150,200,255,0.2), transparent),
    radial-gradient(ellipse 250px 50px at 70% 85%, rgba(150,200,255,0.15), transparent),
    radial-gradient(ellipse 180px 30px at 50% 60%, rgba(200,230,255,0.25), transparent);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: caustics 8s ease-in-out infinite alternate;
}
@keyframes caustics {
  from { transform: translateX(-3%) scaleY(1); opacity: 0.8; }
  to   { transform: translateX(3%) scaleY(1.2); opacity: 1; }
}

/* Break — vignette pulses */
.act--break::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.9) 100%);
  pointer-events: none;
  animation: break-pulse 4s ease-in-out infinite;
}
@keyframes break-pulse {
  0%,100% { opacity: 0.8; }
  50%     { opacity: 1; }
}
.break-copy em { text-shadow: 0 0 40px rgba(198,93,58,0.6), 0 0 80px rgba(198,93,58,0.3); }

/* Rainbow — crisp, no extra blur overlays */
.act--rainbow::before { display: none; }
.rainbow-sun { }

/* 3D act — volumetric light rays from top */
.act--threed .threed-stage::before {
  content: "";
  position: absolute;
  top: -100px; left: 50%;
  width: 60%; height: 120%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(216,153,69,0.15) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
.fig-cube, .fig-torus, .fig-sphere, .fig-helix, .fig-cascade, .fig-pyramid, .fig-gyro {
  filter: drop-shadow(0 40px 60px rgba(0,0,0,0.6)) drop-shadow(0 0 30px rgba(216,153,69,0.15));
}
/* Cube face specular highlight */
.cube-face {
  background:
    radial-gradient(ellipse 80% 50% at 30% 20%, rgba(255,255,255,0.15), transparent 60%),
    linear-gradient(135deg, rgba(198,93,58,0.15), rgba(58,90,120,0.3)),
    radial-gradient(circle at 70% 80%, rgba(216,153,69,0.2), transparent 50%);
}

/* Geometry garden — card specular + subtle inner glow */
.geo-card {
  box-shadow:
    0 20px 40px -20px rgba(60,40,20,0.2),
    inset 0 1px 0 rgba(255,255,255,0.5);
}
.geo-card:hover {
  box-shadow:
    0 40px 80px -20px rgba(60,40,20,0.3),
    0 0 40px rgba(198,93,58,0.15),
    inset 0 1px 0 rgba(255,255,255,0.6);
}
.geo-card::before {
  /* top glossy highlight */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,0.4), transparent);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}

/* Kinetic — glow on italic pieces + ambient flicker */
.kinetic-title em {
  color: transparent;
  background: linear-gradient(90deg, #c65d3a 0%, #d89945 50%, #c65d3a 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: kinetic-shine 4s ease-in-out infinite, kinetic-zoom linear both;
  animation-timeline: auto, view();
  animation-range: auto, entry 0% cover 80%;
  text-shadow: 0 0 60px rgba(216,153,69,0.3);
  filter: drop-shadow(0 10px 40px rgba(216,153,69,0.4));
}
@keyframes kinetic-shine {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}
.text-on-path text {
  filter: drop-shadow(0 0 20px rgba(198,93,58,0.4));
}
/* Marquee subtle motion-blur look via layered copies */
.kinetic-marquee {
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

/* Grid — per-tile glow ring on hot */
.grid-tile.hot {
  box-shadow: 0 0 20px rgba(198,93,58,0.4), inset 0 0 10px rgba(198,93,58,0.3);
}
.grid-tile {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.3), transparent 50%),
    var(--lw-bg-elev);
}

/* Goo — scene lighting */
.act--goo::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 0%, rgba(13,22,32,0.8) 100%);
  pointer-events: none;
  mix-blend-mode: multiply;
}
.goo-stage {
  filter: url(#goo) drop-shadow(0 0 60px rgba(198,93,58,0.3));
}

/* Calm — soft warm halo on title */
.calm-title em {
  text-shadow: 0 0 40px rgba(198,93,58,0.25);
  background: linear-gradient(180deg, #c65d3a, #9c4425);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Footer — giant wordmark with gradient shimmer */
.footer-wordmark {
  background: linear-gradient(180deg, #f5efe4 0%, #948b7d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
}
.footer-wordmark::after {
  content: "";
  position: absolute;
  top: 50%; left: -10%;
  width: 120%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(198,93,58,0.6), transparent);
  animation: footer-scan 6s ease-in-out infinite;
}
@keyframes footer-scan {
  0%,100% { transform: translateX(-100%); opacity: 0; }
  50%     { transform: translateX(100%); opacity: 1; }
}

/* Nav — frosted floating pill on scroll (visual depth) */
.nav {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Scroll progress with terracotta glow */
.scroll-progress {
  box-shadow: 0 0 12px rgba(198,93,58,0.8), 0 0 24px rgba(198,93,58,0.4);
}

/* Custom cursor with subtle glow */
.cursor.dot { box-shadow: 0 0 12px rgba(198,93,58,0.6); }

/* Act entry — opacity only, no transform/perspective to keep text crisp */
.act {
  animation: act-enter linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 40%;
}
@keyframes act-enter {
  from { opacity: 0.7; }
  to   { opacity: 1; }
}
.act--becalmed { animation: none; }