/* =========================================================
   MoozDay SPLASH v2 — "ICE GENESIS"
   3-act cinematic 3.2s. GPU-only (transform/opacity).
   Activated by class="md-splash-v2" on #splash.
   ========================================================= */

/* hard reset for v2 — disables v1 layers */
#splash.md-splash-v2,
#splash.md-splash-v2 * { box-sizing: border-box; }
#splash.md-splash-v2 .md-splash-bg,
#splash.md-splash-v2 .md-splash-img,
#splash.md-splash-v2 .splash-stage,
#splash.md-splash-v2 .splash-rays,
#splash.md-splash-v2 .splash-logo,
#splash.md-splash-v2 .md-pre-fade,
#splash.md-splash-v2 .md-scan,
#splash.md-splash-v2 .md-ring,
#splash.md-splash-v2 .md-burst,
#splash.md-splash-v2 .md-drop,
#splash.md-splash-v2 .md-logo-glow,
#splash.md-splash-v2 .md-ice,
#splash.md-splash-v2 .md-pearl,
#splash.md-splash-v2 .md-loader-wrap { display: none !important; }

/* root layer */
#splash.md-splash-v2 {
  position: fixed; inset: 0; z-index: 9999;
  background: #000;
  overflow: hidden;
  isolation: isolate;
  perspective: 1200px;
  perspective-origin: 50% 45%;
}

/* ============== FINAL 3D ZOOM (Иван 29.04) ==============
   На 5400-6400ms wordmark advances toward viewer with rotateX +
   bright cyan radial flash → fade out. */
#splash.md-splash-v2 .sv-stage {
  transform-style: preserve-3d;
  animation: sv-stage-base 360ms cubic-bezier(.36,.07,.19,.97) 2200ms,
             sv-finale-3d 1000ms cubic-bezier(.34,.05,.18,1) 5400ms forwards;
}
@keyframes sv-stage-base {
  0%, 100% { transform: translate(-50%, -50%); }
  10%      { transform: translate(calc(-50% - .5px), calc(-50% + .4px)); }
  25%      { transform: translate(calc(-50% + .6px), calc(-50% - .5px)); }
  45%      { transform: translate(calc(-50% - .5px), calc(-50% - .3px)); }
  65%      { transform: translate(calc(-50% + .4px), calc(-50% + .5px)); }
  85%      { transform: translate(calc(-50% - .3px), calc(-50% + .2px)); }
}
@keyframes sv-finale-3d {
  0%   { transform: translate(-50%, -50%) translateZ(0) rotateX(0deg) scale(1); filter: drop-shadow(0 0 0 rgba(123,201,240,0)); opacity: 1; }
  40%  { transform: translate(-50%, -50%) translateZ(140px) rotateX(-4deg) scale(1.16); filter: drop-shadow(0 0 36px rgba(123,201,240,.85)); opacity: 1; }
  100% { transform: translate(-50%, -50%) translateZ(420px) rotateX(2deg) scale(1.55); filter: drop-shadow(0 0 60px rgba(255,255,255,1)) drop-shadow(0 0 30px rgba(123,201,240,.9)); opacity: 0; }
}

/* finale flash overlay */
.sv-finale-flash-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 9;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 48%, rgba(255,255,255,1) 0%, rgba(123,201,240,.6) 35%, rgba(61,168,229,.15) 65%, transparent 85%);
  animation: sv-finale-flash 1000ms cubic-bezier(.16,.7,.28,1) 5400ms forwards;
  mix-blend-mode: screen;
}
@keyframes sv-finale-flash {
  0%   { opacity: 0; transform: scale(.4); }
  55%  { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0; transform: scale(2.2); }
}

/* ============== ACT 1 BACKDROP ============== */

/* cinematic white flash 0-120ms */
.sv-flash {
  position: absolute; inset: 0;
  background: #fff;
  opacity: 0;
  animation: sv-flash 640ms ease-out forwards;
  pointer-events: none;
  z-index: 10;
}
@keyframes sv-flash {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  30%  { opacity: 0.55; }
  100% { opacity: 0; }
}

/* deep cyan radial glow waking up under logo */
.sv-glow {
  position: absolute;
  left: 50%; top: 50%;
  width: 140vmax; height: 140vmax;
  transform: translate(-50%, -50%) scale(.55);
  background: radial-gradient(closest-side,
              rgba(61,168,229,.55) 0%,
              rgba(61,168,229,.22) 28%,
              rgba(26,122,184,.10) 55%,
              transparent 75%);
  opacity: 0;
  animation: sv-glow-rise 4800ms cubic-bezier(.16,.7,.28,1) 700ms forwards,
             sv-glow-pulse 3.6s ease-in-out 5200ms infinite;
  z-index: 1;
  filter: blur(2px);
}
@keyframes sv-glow-rise {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.55); }
  60%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: .9; transform: translate(-50%, -50%) scale(1.05); }
}
@keyframes sv-glow-pulse {
  0%, 100% { opacity: .9; }
  50%      { opacity: 1; }
}

/* frosty noise overlay (subtle texture) */
.sv-noise {
  position: absolute; inset: 0;
  opacity: 0; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .65 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  animation: sv-noise-in 1600ms ease-out 1200ms forwards;
  z-index: 2;
}
@keyframes sv-noise-in { to { opacity: .045; } }

/* ============== ACT 1 LOGO ASSEMBLY ============== */

/* logo stage with screen-shake during shatter */
.sv-stage {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 8;
  text-align: center;
  animation: sv-shake 720ms cubic-bezier(.36,.07,.19,.97) 2200ms;
  will-change: transform;
}
@keyframes sv-shake {
  0%, 100% { transform: translate(-50%, -50%); }
  10%      { transform: translate(calc(-50% - .5px), calc(-50% + .4px)); }
  25%      { transform: translate(calc(-50% + .6px), calc(-50% - .5px)); }
  45%      { transform: translate(calc(-50% - .5px), calc(-50% - .3px)); }
  65%      { transform: translate(calc(-50% + .4px), calc(-50% + .5px)); }
  85%      { transform: translate(calc(-50% - .3px), calc(-50% + .2px)); }
}

/* wordmark */
.sv-word {
  font-family: "Fredoka", system-ui, sans-serif;
  font-size: clamp(56px, 13vw, 132px);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: .95;
  color: #fff;
  display: inline-flex;
  gap: .02em;
  text-shadow: 0 0 30px rgba(123,201,240,.45);
  position: relative;
}
.sv-word .sv-letter {
  display: inline-block;
  opacity: 0;
  transform: translate(var(--from-x,0), var(--from-y,0)) rotate(var(--from-r,0deg)) scale(.4);
  filter: blur(8px);
  animation: sv-letter-arrive 2200ms cubic-bezier(.18,.85,.32,1.05) var(--delay,0ms) forwards;
}
.sv-word .day { color: #3DA8E5; }
@keyframes sv-letter-arrive {
  0%   { opacity: 0; filter: blur(8px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translate(0,0) rotate(0) scale(1); filter: blur(0); }
}

/* logo micro-pulse just before shatter */
.sv-word.sv-pulse {
  animation: sv-word-pulse 960ms cubic-bezier(.34,1.6,.64,1) 1900ms;
}
@keyframes sv-word-pulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.06); filter: drop-shadow(0 0 28px rgba(123,201,240,.9)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(123,201,240,0)); }
}

/* ============== ACT 2 SHATTER FX ============== */

/* central white flash on shatter */
.sv-shatter-flash {
  position: absolute;
  left: 50%; top: 50%;
  width: 30vmax; height: 30vmax;
  transform: translate(-50%, -50%) scale(.2);
  background: radial-gradient(circle, #fff 0%, rgba(123,201,240,.85) 22%, transparent 70%);
  opacity: 0;
  animation: sv-shatter-flash 1400ms cubic-bezier(.16,.7,.28,1) 2200ms forwards;
  z-index: 7;
  pointer-events: none;
  mix-blend-mode: screen;
}
@keyframes sv-shatter-flash {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.2); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(2.4); }
}

/* concentric shockwave rings */
.sv-ring {
  position: absolute;
  left: 50%; top: 50%;
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 2px solid rgba(123,201,240,.85);
  transform: translate(-50%, -50%) scale(.4);
  opacity: 0;
  animation: sv-ring 3000ms cubic-bezier(.16,.7,.28,1) forwards;
  z-index: 5;
  pointer-events: none;
}
.sv-ring-1 { animation-delay: 2200ms; }
.sv-ring-2 { animation-delay: 2560ms; border-color: rgba(255,255,255,.75); }
.sv-ring-3 { animation-delay: 2880ms; border-color: rgba(61,168,229,.6); border-width: 1.5px; }
@keyframes sv-ring {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.4); }
  10%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(28); border-width: .5px; }
}

/* ICE SHARDS — 12 SVG triangles flying outward */
.sv-shards { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.sv-shard {
  position: absolute;
  left: 50%; top: 50%;
  width: 22px; height: 30px;
  background: linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(123,201,240,.6) 100%);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  transform: translate(-50%, -50%) rotate(0) scale(1);
  opacity: 0;
  animation: sv-shard-fly 4000ms cubic-bezier(.18,.74,.28,1) 2280ms forwards;
  filter: drop-shadow(0 2px 6px rgba(123,201,240,.6));
  will-change: transform, opacity;
}
@keyframes sv-shard-fly {
  0%   { opacity: 0; transform: translate(-50%,-50%) rotate(var(--start-r,0deg)) scale(.6); }
  10%  { opacity: 1; }
  60%  { opacity: 1; }
  100% {
    opacity: 0;
    transform:
      translate(calc(-50% + var(--dx,0)), calc(-50% + var(--dy,0)))
      rotate(var(--end-r,720deg))
      scale(.3);
  }
}
.sv-shard:nth-child(1)  { --dx: 38vw;  --dy: -36vh; --end-r: 540deg; }
.sv-shard:nth-child(2)  { --dx: 46vw;  --dy:  -8vh; --end-r: -480deg; width: 18px; height: 24px; }
.sv-shard:nth-child(3)  { --dx: 42vw;  --dy:  28vh; --end-r: 720deg; width: 26px; height: 34px; }
.sv-shard:nth-child(4)  { --dx: 18vw;  --dy:  44vh; --end-r: -600deg; }
.sv-shard:nth-child(5)  { --dx: -16vw; --dy:  46vh; --end-r: 540deg; width: 20px; height: 26px; }
.sv-shard:nth-child(6)  { --dx: -42vw; --dy:  30vh; --end-r: -720deg; }
.sv-shard:nth-child(7)  { --dx: -48vw; --dy:  -2vh; --end-r: 480deg; width: 28px; height: 36px; }
.sv-shard:nth-child(8)  { --dx: -38vw; --dy: -34vh; --end-r: -540deg; }
.sv-shard:nth-child(9)  { --dx: -10vw; --dy: -48vh; --end-r: 660deg; width: 16px; height: 22px; }
.sv-shard:nth-child(10) { --dx:  14vw; --dy: -46vh; --end-r: -660deg; width: 24px; height: 32px; }
.sv-shard:nth-child(11) { --dx:  28vw; --dy:  10vh; --end-r: 420deg; width: 14px; height: 20px; }
.sv-shard:nth-child(12) { --dx: -28vw; --dy:  12vh; --end-r: -420deg; width: 14px; height: 20px; }

/* ============== ACT 2 BUBBLE PEARLS RISE ============== */

.sv-pearls { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.sv-pearl {
  position: absolute;
  bottom: -40px;
  width: var(--size, 16px);
  height: var(--size, 16px);
  border-radius: 50%;
  background: var(--color, #0A0A0A);
  box-shadow:
    inset -3px -4px 8px rgba(0,0,0,.35),
    inset 3px 3px 6px rgba(255,255,255,.45),
    0 4px 12px rgba(0,0,0,.4);
  opacity: 0;
  animation: sv-pearl-rise var(--dur, 6400ms) cubic-bezier(.22,.06,.36,1) var(--delay, 2600ms) forwards;
  will-change: transform, opacity;
}
@keyframes sv-pearl-rise {
  0%   { opacity: 0; transform: translateY(0) scaleY(.6) scaleX(1.3); }
  8%   { opacity: 1; transform: translateY(-30px) scaleY(1.25) scaleX(.85); }
  18%  { transform: translateY(-80px) scaleY(.9) scaleX(1.05); }
  60%  { opacity: 1; transform: translate(var(--drift, 0), -70vh) scale(1); }
  100% { opacity: 0; transform: translate(var(--drift, 0), -110vh) scale(.85); }
}
/* 14 pearls — mixed colors + sizes + drift */
.sv-pearl:nth-child(1)  { left: 8%;  --size: 18px; --color: #0A0A0A;             --delay: 2560ms; --dur: 5800ms; --drift: 12px; }
.sv-pearl:nth-child(2)  { left: 14%; --size: 12px; --color: #3DA8E5;             --delay: 2760ms; --dur: 5400ms; --drift: -18px; }
.sv-pearl:nth-child(3)  { left: 22%; --size: 22px; --color: #0A0A0A;             --delay: 2680ms; --dur: 6000ms; --drift: 8px; }
.sv-pearl:nth-child(4)  { left: 30%; --size: 14px; --color: #EAF4FB;             --delay: 2960ms; --dur: 5500ms; --drift: -10px; }
.sv-pearl:nth-child(5)  { left: 38%; --size: 16px; --color: #7BC9F0;             --delay: 2820ms; --dur: 5700ms; --drift: 14px; }
.sv-pearl:nth-child(6)  { left: 46%; --size: 20px; --color: #0A0A0A;             --delay: 3060ms; --dur: 6100ms; --drift: -6px; }
.sv-pearl:nth-child(7)  { left: 54%; --size: 11px; --color: #FFFFFF;             --delay: 2900ms; --dur: 5300ms; --drift: 16px; }
.sv-pearl:nth-child(8)  { left: 62%; --size: 18px; --color: #1A7AB8;             --delay: 3160ms; --dur: 5900ms; --drift: -14px; }
.sv-pearl:nth-child(9)  { left: 70%; --size: 14px; --color: #0A0A0A;             --delay: 2740ms; --dur: 5600ms; --drift: 10px; }
.sv-pearl:nth-child(10) { left: 78%; --size: 24px; --color: #3DA8E5;             --delay: 3240ms; --dur: 6200ms; --drift: -8px; }
.sv-pearl:nth-child(11) { left: 86%; --size: 13px; --color: #0A0A0A;             --delay: 2860ms; --dur: 5400ms; --drift: 12px; }
.sv-pearl:nth-child(12) { left: 92%; --size: 17px; --color: #EAF4FB;             --delay: 3100ms; --dur: 5800ms; --drift: -16px; }
.sv-pearl:nth-child(13) { left: 4%;  --size: 10px; --color: #7BC9F0;             --delay: 3000ms; --dur: 5200ms; --drift: 8px; }
.sv-pearl:nth-child(14) { left: 96%; --size: 11px; --color: #1A7AB8;             --delay: 3320ms; --dur: 5400ms; --drift: -10px; }

/* ============== ACT 2/3 TAGLINE TYPEWRITER ============== */

.sv-tagline {
  position: absolute;
  left: 50%;
  top: calc(50% + clamp(60px, 10vw, 110px));
  transform: translateX(-50%);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: clamp(12px, 2.2vw, 15px);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  white-space: nowrap;
  z-index: 9;
  display: flex;
  gap: .04em;
}
.sv-tagline span {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  animation: sv-tag-letter 760ms cubic-bezier(.22,1,.36,1) var(--td, 3000ms) forwards;
}
@keyframes sv-tag-letter {
  to { opacity: 1; transform: translateY(0); }
}

/* ============== ACT 3 LIQUID-FILL GLASS LOADER ============== */

.sv-glass-wrap {
  position: absolute;
  left: 50%;
  bottom: clamp(48px, 8vh, 90px);
  transform: translateX(-50%) translateY(20px);
  width: clamp(90px, 13vw, 130px);
  height: clamp(120px, 17vw, 170px);
  z-index: 9;
  opacity: 0;
  animation: sv-glass-in 1400ms cubic-bezier(.22,1,.36,1) 3800ms forwards;
}
@keyframes sv-glass-in {
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.sv-glass-svg { width: 100%; height: 100%; overflow: visible; }
.sv-glass-outline {
  fill: none;
  stroke: rgba(255,255,255,.85);
  stroke-width: 2;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(123,201,240,.5));
}

.sv-liquid-clip rect {
  transform-origin: 50% 100%;
  animation: sv-liquid-fill 2800ms cubic-bezier(.32,.04,.24,1) 4100ms forwards;
}
@keyframes sv-liquid-fill {
  0%   { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}
.sv-liquid {
  fill: url(#sv-liquid-grad);
}

.sv-liquid-wave {
  animation: sv-wave 2.4s ease-in-out 4100ms infinite;
}
@keyframes sv-wave {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-8px); }
}

/* loader text below glass */
.sv-loader-text {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 3vh, 30px);
  transform: translateX(-50%);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  z-index: 9;
  opacity: 0;
  animation: sv-loader-text 1000ms ease-out 4400ms forwards;
}
@keyframes sv-loader-text {
  to { opacity: 1; }
}
.sv-loader-text .sv-dots i {
  display: inline-block;
  animation: sv-dot 1.4s infinite;
}
.sv-loader-text .sv-dots i:nth-child(2) { animation-delay: .2s; }
.sv-loader-text .sv-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes sv-dot {
  0%, 80%, 100% { opacity: .25; }
  40%           { opacity: 1; }
}

/* ============== EXIT ============== */
#splash.md-splash-v2.splash-leave { transition: opacity 1.1s ease, transform 1.1s ease; }
#splash.md-splash-v2.splash-leave-start { opacity: 1; transform: scale(1); }
#splash.md-splash-v2.splash-leave-end   { opacity: 0; transform: scale(1.05); pointer-events: none; }

/* ============== REDUCED MOTION ============== */
@media (prefers-reduced-motion: reduce) {
  #splash.md-splash-v2 .sv-flash,
  #splash.md-splash-v2 .sv-noise,
  #splash.md-splash-v2 .sv-shatter-flash,
  #splash.md-splash-v2 .sv-ring,
  #splash.md-splash-v2 .sv-shards,
  #splash.md-splash-v2 .sv-pearls,
  #splash.md-splash-v2 .sv-glass-wrap,
  #splash.md-splash-v2 .sv-tagline,
  #splash.md-splash-v2 .sv-loader-text { animation: none !important; opacity: 1 !important; }
  #splash.md-splash-v2 .sv-letter      { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
  #splash.md-splash-v2 .sv-glow        { animation: none !important; opacity: .9 !important; transform: translate(-50%, -50%) scale(1) !important; }
  #splash.md-splash-v2 .sv-liquid-clip rect { animation: none !important; transform: scaleY(1) !important; }
}

/* ============== MOBILE TUNING ============== */
@media (max-width: 480px) {
  .sv-tagline { letter-spacing: .12em; }
  .sv-shard { width: 16px; height: 22px; }
  .sv-pearl { transform: scale(.9); }
}