/* ══════════════════════════════════════════════════════════════════════════
   SPLASH — Cinematic Kittysort Landing Screen
   Layer: Splash Scene
   ══════════════════════════════════════════════════════════════════════════ */

.splash {
    position: fixed; inset: 0; z-index: 9000;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    overflow: hidden;
    background: #2a1f10;
    font-family: 'Fredoka', 'Nunito', sans-serif;
    user-select: none; -webkit-user-select: none;
    transition: opacity .85s cubic-bezier(.3,0,.2,1), transform .85s cubic-bezier(.3,0,.2,1);
}
.splash.hiding { opacity: 0; transform: scale(1.03); pointer-events: none; }
.splash.hidden { display: none; }
.splash.bg-only .splash-content { display: none; }
.splash.bg-only .splash-version { display: none; }

/* ── Background image ── */
.splash-bg {
    position: absolute; inset: 0; z-index: 0;
    /* Compressed WebP (~104 KB) with PNG fallback for old browsers.
       The .splash backdrop (#2a1f10) shows instantly, so this never blocks paint. */
    background-image: url('../img/splash-bg.png');
    background-image: -webkit-image-set(url('../img/splash-bg.webp') type('image/webp'), url('../img/splash-bg.png') type('image/png'));
    background-image: image-set(url('../img/splash-bg.webp') type('image/webp'), url('../img/splash-bg.png') type('image/png'));
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    animation: kenBurns 6s ease-out forwards;
    transform-origin: 50% 40%;
}
.splash.fast-forward .splash-bg { animation-duration: .2s; }
@keyframes kenBurns {
    0%   { transform: scale(1.0)  translate(0, 0); }
    100% { transform: scale(1.08) translate(-2%, -1%); }
}
/* Soft darkening overlay so text pops */
.splash-bg::before {
    content: ''; position: absolute; inset: 0;
    background:
        linear-gradient(to bottom, rgba(0,0,0,.25) 0%, rgba(0,0,0,.05) 30%, rgba(0,0,0,.05) 70%, rgba(0,0,0,.35) 100%);
}
.splash-bg::after { display: none; }

/* Vignette -- subtle framing over photo */
.splash-vignette {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(ellipse 80% 75% at 50% 44%, transparent 40%, rgba(0,0,0,.45) 100%);
}

/* Ambient light orbs — hidden (image provides its own atmosphere) */
.splash-orb { display: none; }

/* Lens flare — hidden */
.splash-flare { display: none; }

/* Particle canvas */
.splash-particles { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

/* Content wrapper — play button at bottom over image */
.splash-content {
    position: relative; z-index: 10;
    display: flex; flex-direction: column; align-items: center;
    justify-content: flex-end;
    width: 100%; max-width: 520px;
    padding: 2rem 1rem 12vh;
    height: 100%;
}

/* Logo comes from the background image — hide text overlays */
.splash-presents { display: none; }

/* ── Logo — hidden, image has it ── */
.splash-logo { display: none; }
@keyframes splashFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.splash-tagline { display: none; }

/* ── Cat & Yarn Scene — hidden (image provides the scene) ── */
.splash-scene { display: none; }

/* ── Detailed Cat SVG ── */
.splash-cat {
    position: absolute; bottom: 5%; left: 50%;
    transform: translateX(-50%);
    width: clamp(160px, 42vw, 240px);
    filter: drop-shadow(0 18px 46px rgba(0,0,0,.62)) drop-shadow(0 6px 14px rgba(0,0,0,.28));
}
.cat-tail { transform-origin: 72% 85%; animation: tailWag 4.4s ease-in-out infinite; }
@keyframes tailWag { 0%,100% { transform: rotate(-10deg); } 50% { transform: rotate(14deg); } }
.cat-chest { animation: catBreathe 4.4s ease-in-out infinite; transform-origin: 50% 75%; }
@keyframes catBreathe { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(1.025); } }
.cat-eyelid { transform: scaleY(0); transform-origin: 50% 50%; animation: catBlink 6.4s ease-in-out infinite; }
@keyframes catBlink { 0%,90%,100% { transform: scaleY(0); } 93%,97% { transform: scaleY(1); } }

/* Mascot canvas (for custom cat) */
#splashMascotCanvas {
    position: absolute; bottom: 5%; left: 50%;
    transform: translateX(-50%);
    width: clamp(160px, 42vw, 240px);
    height: clamp(180px, 48vw, 260px);
}

/* ── Yarn Balls ── */
.yarn-ball {
    position: absolute; border-radius: 50%; cursor: pointer;
    transition: transform .3s cubic-bezier(.22,.61,.36,1), filter .3s ease;
    will-change: transform;
}
.yarn-ball:hover, .yarn-ball:active {
    transform: scale(1.1) rotate(8deg) !important;
    filter: brightness(1.05);
}
.yarn-ball svg { width: 100%; height: 100%; display: block; }

.yarn-ball--red {
    width: clamp(50px, 13vw, 72px); height: clamp(50px, 13vw, 72px);
    bottom: 8%; left: 5%;
    filter: drop-shadow(0 0 18px rgba(220,60,40,.6)) drop-shadow(0 4px 8px rgba(0,0,0,.4));
    animation: yarnBob 3.2s ease-in-out infinite;
}
.yarn-ball--blue {
    width: clamp(44px, 11vw, 62px); height: clamp(44px, 11vw, 62px);
    bottom: 18%; right: 4%;
    filter: drop-shadow(0 0 16px rgba(40,100,220,.5)) drop-shadow(0 4px 8px rgba(0,0,0,.4));
    animation: yarnBob 3.8s ease-in-out infinite .6s;
}
.yarn-ball--green {
    width: clamp(46px, 12vw, 66px); height: clamp(46px, 12vw, 66px);
    bottom: 2%; left: 30%;
    filter: drop-shadow(0 0 16px rgba(40,180,80,.5)) drop-shadow(0 4px 8px rgba(0,0,0,.4));
    animation: yarnBob 3.5s ease-in-out infinite 1.1s;
}
.yarn-ball--yellow {
    width: clamp(40px, 10vw, 56px); height: clamp(40px, 10vw, 56px);
    bottom: 15%; right: 22%;
    filter: drop-shadow(0 0 14px rgba(230,180,20,.5)) drop-shadow(0 4px 8px rgba(0,0,0,.4));
    animation: yarnBob 4s ease-in-out infinite 1.6s;
}
.yarn-ball--purple {
    width: clamp(38px, 9vw, 52px); height: clamp(38px, 9vw, 52px);
    top: 18%; right: 8%;
    filter: drop-shadow(0 0 14px rgba(140,70,200,.5)) drop-shadow(0 4px 8px rgba(0,0,0,.4));
    animation: yarnBob 3.6s ease-in-out infinite 2.1s;
}
@keyframes yarnBob { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-8px) rotate(6deg); } }

/* ── Play Button ── */
.splash-play {
    font-family: 'Fredoka', sans-serif; font-weight: 600;
    font-size: clamp(1.3rem, 4.5vw, 1.7rem); letter-spacing: .1em; text-transform: uppercase;
    color: #fff; border: none; padding: .9em 3em; border-radius: 100px;
    cursor: pointer; position: relative; overflow: hidden;
    background: linear-gradient(140deg, #5dd862 0%, #40c44c 40%, #2daa38 70%, #22902c 100%);
    box-shadow:
        0 5px 0 #1a7524, 0 7px 0 #125a1a, 0 9px 25px rgba(0,0,0,.5),
        inset 0 2px 1px rgba(255,255,255,.32), inset 0 -2px 3px rgba(0,0,0,.15),
        0 0 56px rgba(93,216,98,.18);
    animation: splashPlayPulse 3.2s ease-in-out infinite;
    transition: transform .12s, box-shadow .12s;
}
.splash-play:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 0 #1a7524, 0 10px 0 #125a1a, 0 12px 35px rgba(0,0,0,.5),
        inset 0 2px 1px rgba(255,255,255,.3), 0 0 70px rgba(60,200,70,.4);
}
.splash-play:active {
    transform: translateY(4px); animation: none;
    box-shadow: 0 1px 0 #1a7524, 0 2px 0 #125a1a, 0 3px 8px rgba(0,0,0,.3),
        inset 0 3px 5px rgba(0,0,0,.2);
}
.splash-play::after {
    content: ''; position: absolute; top: 0; left: -120%; width: 70%; height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.25) 50%, transparent 100%);
    animation: shineSweep 3.5s ease-in-out infinite;
}
@keyframes shineSweep { 0%,65%,100% { left: -120%; } 35% { left: 160%; } }
@keyframes splashPlayPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.045); } }

.splash-version {
    position: absolute; bottom: 1rem; right: 1.2rem;
    font-size: .6rem; color: rgba(255,255,255,.12); letter-spacing: .1em; z-index: 10;
}

@media (prefers-reduced-motion: reduce) {
    .splash-flare, .splash-logo, .cat-tail, .cat-chest, .cat-eyelid { animation: none !important; }
}

.splash-welcome {
  position: absolute;
  bottom: 24vh;
  left: 50%;
  transform: translateX(-50%);
  font-size: .75rem;
  color: rgba(255,215,0,.85);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-shadow: 0 2px 6px rgba(0,0,0,.6), 0 0 12px rgba(255,215,0,.3);
  z-index: 11;
  animation: splashWelcomeIn 1s ease-out 1.2s both;
}
@keyframes splashWelcomeIn {
  0%   { opacity: 0; transform: translateX(-50%) translateY(6px); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}