/* Unruly Cricket — layered hero (UFO → dino). Load AFTER styles.css.
 * All geometry lives in hero-layers.js (SCENES). Everything here is sized in
 * photo pixels × --s, so the layers always stay locked to the plate.
 */

:root {
  --s: 0.6;
  --grow: 0;
  --lit: 0;
  --look: 0;
  --uc-light: 206, 222, 255;
  --uc-sat: 0.6;
  --uc-bright: 0.8;
  --uc-rim: 0.6;
}

/* longer scroll so the story has room (was 155dvh) */
.reveal-track { height: 270svh; height: 270dvh; }

.uc-world { position: absolute; left: 0; top: 0; width: calc(736px * var(--s)); height: calc(2656px * var(--s)); will-change: transform; }
.uc-world.is-narrow {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}
.uc-world img { display: block; max-width: none; }
.uc-abs { position: absolute; }
.uc-ph { filter: saturate(var(--uc-sat)) contrast(1.02) brightness(var(--uc-bright)); }
.uc-plate { left: 0; top: 0; width: 100%; height: 100%; }

/* Stars (night scene only) */
.uc-stars { left: 0; top: 0; width: 100%; height: calc(1640px * var(--s)); mix-blend-mode: screen; opacity: 0.35; animation: uc-twinkle 3.1s ease-in-out infinite; }
.uc-stars--1 { animation-duration: 4.3s; animation-delay: -1.2s; }
.uc-stars--2 { animation-duration: 2.3s; animation-delay: -0.7s; }
@keyframes uc-twinkle { 0%, 100% { opacity: 0.05; } 50% { opacity: 0.85; } }

/* UFO */
.uc-ufo-rig { will-change: transform; }
.uc-ufo-hover { position: absolute; inset: 0; transform-origin: 50% 70%; animation: uc-hover 7.5s ease-in-out infinite; }
@keyframes uc-hover {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  30% { transform: translate(calc(-5px * var(--s)), calc(-9px * var(--s))) rotate(-1.3deg); }
  65% { transform: translate(calc(4px * var(--s)), calc(5px * var(--s))) rotate(0.9deg); }
}
.uc-ufo { position: absolute; inset: 0; width: 100%; height: 100%; }
.uc-ufo-glow {
  position: absolute; left: 50%; top: 78%; width: 150%; height: 190%; translate: -50% -50%;
  background: radial-gradient(ellipse 50% 42% at 50% 45%, rgba(var(--uc-light), 0.32), rgba(var(--uc-light), 0.08) 55%, transparent 72%);
  mix-blend-mode: screen; opacity: calc(0.35 + var(--grow) * 0.55);
  animation: uc-pulse 3.2s ease-in-out infinite;
}
@keyframes uc-pulse { 50% { transform: scale(1.06); filter: brightness(1.25); } }

/* Beam */
.uc-beam { left: 0; top: 0; transform-origin: 50% 0; pointer-events: none; filter: blur(calc(7px * var(--s))); mix-blend-mode: screen; }
.uc-beam__cone, .uc-beam__core, .uc-beam__dust {
  position: absolute; inset: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(var(--grow) * 100% - 14%), transparent calc(var(--grow) * 100%));
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(var(--grow) * 100% - 14%), transparent calc(var(--grow) * 100%));
}
.uc-beam__cone { clip-path: polygon(41% 0, 59% 0, 100% 100%, 0 100%); background: linear-gradient(to bottom, rgba(var(--uc-light), 0.34), rgba(var(--uc-light), 0.16) 55%, rgba(var(--uc-light), 0.2) 88%, rgba(var(--uc-light), 0.1)); }
.uc-beam__core { clip-path: polygon(46.5% 0, 53.5% 0, 72% 100%, 28% 100%); background: linear-gradient(to bottom, rgba(var(--uc-light), 0.45), rgba(var(--uc-light), 0.14) 70%, rgba(var(--uc-light), 0.22)); animation: uc-flicker 6s steps(1) infinite; }
@keyframes uc-flicker { 0%, 100% { opacity: 1; } 41% { opacity: 0.75; } 42% { opacity: 1; } 77% { opacity: 0.85; } 78% { opacity: 1; } }
.uc-beam__dust { clip-path: polygon(43% 0, 57% 0, 92% 100%, 8% 100%); background-repeat: repeat; background-size: calc(160px * var(--s)) calc(320px * var(--s)); opacity: 0.55; animation: uc-rise 9s linear infinite; }
@keyframes uc-rise { to { background-position: 0 calc(-320px * var(--s)); } }
.uc-pool { background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(var(--uc-light), 0.3), transparent 70%); mix-blend-mode: screen; opacity: calc(var(--lit) * 0.9); }

/* Dino rig */
.uc-dino img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.uc-dino .uc-ph { filter: saturate(var(--uc-sat)) contrast(1.02) brightness(calc(var(--uc-bright) + var(--lit) * 0.13)); }
.uc-rim { opacity: calc(var(--lit) * var(--uc-rim)); }
.uc-breathe, .uc-neck, .uc-neck-idle, .uc-head, .uc-head-idle { position: absolute; inset: 0; }
.uc-breathe { animation: uc-breathe 5.6s ease-in-out infinite; }
@keyframes uc-breathe { 45% { transform: scale(var(--uc-breathe-x, 1.003), var(--uc-breathe-y, 1.009)); } }
.uc-neck { transform: rotate(calc(var(--look) * var(--uc-neck-deg, 3deg))); }
.uc-head { transform: rotate(calc(var(--look) * var(--uc-head-deg, -10deg))); }
.uc-neck-idle { animation: uc-sway 9s ease-in-out infinite; }
.uc-head-idle { animation: uc-nod 6.5s ease-in-out infinite; }
@keyframes uc-sway { 30% { transform: rotate(-0.45deg); } 70% { transform: rotate(0.35deg); } }
@keyframes uc-nod { 0%, 40%, 100% { transform: rotate(0deg); } 55% { transform: rotate(-2.4deg); } 75% { transform: rotate(0.8deg); } }

/* Fog bands */
.uc-fog { left: -60%; width: 220%; pointer-events: none; background-repeat: repeat-x; will-change: transform; }
.uc-fog--sky { height: calc(320px * var(--s)); background-size: calc(1024px * var(--s)) 100%; opacity: 0.55; animation: uc-drift 95s linear infinite; }
.uc-fog--back { height: calc(384px * var(--s)); background-size: calc(1024px * var(--s)) 100%; opacity: 0.55; animation: uc-drift 70s linear infinite reverse; }
.uc-fog--front { height: calc(420px * var(--s)); background-size: calc(1100px * var(--s)) 100%; opacity: 0.75; animation: uc-drift2 46s linear infinite; }
@keyframes uc-drift { to { background-position: calc(1024px * var(--s)) 0; } }
@keyframes uc-drift2 { to { background-position: calc(1100px * var(--s)) 0; } }

/* Film grain on top of the scene, under the existing veil */
.uc-grain { position: absolute; inset: -20%; pointer-events: none; opacity: 0.07; mix-blend-mode: overlay; animation: uc-grain 0.8s steps(4) infinite; }
@keyframes uc-grain { 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-1%, -1%); } }

@media (prefers-reduced-motion: reduce) {
  .reveal-track { height: 100svh; height: 100dvh; }   /* keep the site's static still (shows the dino) */
  .uc-stars, .uc-ufo-hover, .uc-ufo-glow, .uc-beam__core, .uc-beam__dust,
  .uc-breathe, .uc-neck-idle, .uc-head-idle, .uc-fog, .uc-grain { animation: none !important; }
}