/* ── Whalemetry · лендинг ───────────────────────────────────────────────
   Неоновый контур кита (обведён из картинки); свечи внутри — тускло везде,
   ярко под курсором + светящийся фонарик у курсора. */
:root {
  --whale-stroke: #57e0ff;
  --candle-up: #34d17a;
  --candle-down: #ff5d6c;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #070b18;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif; }

.stage {
  position: fixed; inset: 0; overflow: hidden; transform-origin: 50% 42%;
  background: radial-gradient(1200px 820px at 50% 14%, #1b2c63 0%, #131f47 38%, #0a1230 70%, #070b18 100%);
  animation: stage-in 1.1s ease both;
}
@keyframes stage-in { from { opacity: 0; } to { opacity: 1; } }

.depth { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(900px 700px at 50% 42%, transparent 42%, rgba(0,0,0,.5) 100%); }
.rays { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; opacity: .42; }
.rays span { position: absolute; top: -25%; width: 26vmax; height: 150%;
  background: linear-gradient(180deg, rgba(120,170,255,.10), transparent 70%);
  filter: blur(8px); transform: rotate(14deg); transform-origin: top center; animation: ray-sway 11s ease-in-out infinite;
  will-change: transform; }   /* луч кэшируется как GPU-слой — blur не перерисовывается каждый кадр */
.rays span:nth-child(1) { left: 12%; }
.rays span:nth-child(2) { left: 46%; transform: rotate(-9deg); animation-duration: 14s; opacity: .7; }
.rays span:nth-child(3) { left: 74%; animation-duration: 13s; animation-delay: -4s; }
@keyframes ray-sway { 0%,100% { transform: rotate(12deg) translateX(0); } 50% { transform: rotate(16deg) translateX(20px); } }

.bubbles { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.bubble { position: absolute; bottom: -40px; border-radius: 50%; opacity: .5;
  background: radial-gradient(circle at 32% 30%, rgba(170,210,255,.6), rgba(90,140,255,.05) 70%);
  box-shadow: 0 0 6px rgba(120,170,255,.4);
  animation-name: bubble-rise; animation-timing-function: linear; animation-iteration-count: infinite;
  will-change: transform, opacity; }
@keyframes bubble-rise {
  0% { transform: translateY(0); opacity: 0; } 10% { opacity: .55; }
  90% { opacity: .35; } 100% { transform: translateY(-108vh) translateX(26px); opacity: 0; } }

.content { position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }

.whale-wrap { cursor: pointer; touch-action: none; outline: none; }
/* Кит статичен: анимация «плавания» вверх-вниз убрана — на SVG с drop-shadow
   она подлагивала и смотрелась дёшево. Живость дают лучи, пузыри и свечи. */
.whale-svg { display: block; width: clamp(360px, 72vw, 1080px); height: auto;
  filter: drop-shadow(0 0 18px rgba(87,224,255,.25)); }

/* свечи (залитые) */
.candles g.up rect { fill: var(--candle-up); }
.candles g.up line { stroke: var(--candle-up); stroke-width: 1.4; }
.candles g.down rect { fill: var(--candle-down); }
.candles g.down line { stroke: var(--candle-down); stroke-width: 1.4; }
.candles.base { opacity: .26; }
.candles.bright { opacity: 1; }
/* Фоновое мерцание свечей убрано: каждое изменение opacity внутри SVG с
   drop-shadow заставляло пересчитывать тень всего кита каждый кадр — лаги.
   Интерактив (подсветка под курсором) работает как раньше. */
.orb { mix-blend-mode: screen; pointer-events: none; }

/* неоновый контур */
.whale-outline { fill: none; stroke: var(--whale-stroke); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }

.brand { margin-top: 6px; font-size: clamp(22px, 4.4vw, 38px); font-weight: 700; letter-spacing: .5px;
  color: #eaf1ff; text-shadow: 0 0 22px rgba(87,224,255,.45); }
.brand .logo { margin-right: 6px; }
.brand-mark { display: inline-flex; align-items: center; margin-right: 8px; }
.brand-mark .logo-img { display: none; height: 40px; width: auto; }
.brand-mark.has-img .logo-img { display: inline-block; }
.brand-mark.has-img .logo { display: none; margin: 0; }
.hint { font-size: 14px; color: #8fb0e8; letter-spacing: .3px; animation: hint-pulse 2.4s ease-in-out infinite; text-align: center; padding: 0 16px; }
@keyframes hint-pulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
.skip { margin-top: 12px; font-size: 12px; color: #5f7aa6; text-decoration: none; border-bottom: 1px dashed rgba(95,122,166,.4); padding-bottom: 1px; }
.skip:hover { color: #9db8e6; }

.stairs { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.step { position: absolute; transform-origin: bottom center; opacity: 0;
  animation: step-in .55s cubic-bezier(.2,.8,.3,1) forwards, step-glow 3.2s ease-in-out infinite;
  will-change: transform, opacity; }
.step .body { display: block; width: 100%; height: 100%; border-radius: 2px;
  background: linear-gradient(180deg, #4fe6a6, #1f9e6e); box-shadow: 0 0 10px rgba(46,204,143,.45); }
.step .wick { position: absolute; left: 50%; top: -8px; width: 2px; height: 9px; background: #4fe6a6; transform: translateX(-50%); border-radius: 1px; }
.step.down .body { background: linear-gradient(180deg, #ff7a86, #c83a48); box-shadow: 0 0 10px rgba(255,90,106,.4); }
.step.down .wick { background: #ff7a86; }
@keyframes step-in { from { opacity: 0; transform: translateY(16px) scaleY(.35); } to { opacity: 1; transform: translateY(0) scaleY(1); } }
/* пульсация через opacity вместо filter:brightness — не заставляет браузер
   перерисовывать элементы каждый кадр (это был главный источник лагов) */
@keyframes step-glow { 0%,100% { opacity: .82; } 50% { opacity: 1; } }
.stairs-label { position: absolute; font-size: 11px; letter-spacing: .4px; color: #7fa8d8; opacity: .55; white-space: nowrap; }

.blackout { position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(circle at 50% 44%, rgba(4,8,16,.2) 0%, #02040a 70%);
  opacity: 0; transition: opacity 1.15s ease-in; }

.stage.diving { animation: dive-zoom 1.35s cubic-bezier(.5,0,.3,1) forwards; will-change: transform; }
@keyframes dive-zoom { from { transform: scale(1); } to { transform: scale(1.85); } }
.stage.diving .whale-svg { animation: none; }
.stage.diving .whale-wrap { transform: translateY(72vh) scale(.32) rotate(8deg); opacity: 0;
  transition: transform 1.15s cubic-bezier(.6,0,.35,1), opacity 1.05s ease-in; }
.stage.diving .brand, .stage.diving .hint, .stage.diving .skip, .stage.diving .stairs { opacity: 0; transition: opacity .5s ease; }
.stage.diving .blackout { opacity: 1; }

@media (max-width: 640px) { .whale-svg { width: 96vw; } }
@media (prefers-reduced-motion: reduce) { .whale-svg, .rays span, .bubble, .hint, .candles g { animation: none !important; } }