/* CAT — Scene
 * NYC apartment background. Lofi night — moonlit window, warm desk lamp.
 * Styles + CSS animation layer for the SVG scene.
 */

/* ===== Scene wrapper — full-bleed hero background ===== */
.scene-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}

.scene-wrapper > svg {
  display: block;
  width: 100%;
  height: 100%;
  /* Prevent the SVG root (and any un-targeted SVG surface such as fills,
     gradients, vignette rects) from absorbing pointer events.  Individual
     interactive groups opt back in via inline pointer-events:all. */
  pointer-events: none;
}

/* ===== Curtain animations ===== */
@keyframes s-curtain-l-sway {
  0%, 100% { transform: rotate(0deg); }
  35%       { transform: rotate(0.6deg); }
  65%       { transform: rotate(-0.3deg); }
}

@keyframes s-curtain-r-sway {
  0%, 100% { transform: rotate(0deg); }
  40%       { transform: rotate(-0.5deg); }
  70%       { transform: rotate(0.3deg); }
}

#s-curtain-l {
  transform-origin: 140px 26px;
  transform-box: fill-box;
  animation: s-curtain-l-sway 7s ease-in-out infinite;
}

#s-curtain-r {
  transform-origin: 1300px 26px;
  transform-box: fill-box;
  animation: s-curtain-r-sway 9s ease-in-out infinite;
  animation-delay: -3s;
}

/* ===== Bookshelf shadow pulse (very subtle depth) ===== */
@keyframes s-shelf-depth {
  0%, 100% { opacity: 0.75; }
  50%       { opacity: 0.85; }
}

#s-bookshelf {
  animation: s-shelf-depth 8s ease-in-out infinite;
}

/* ===== Monitor screen flicker (subtle aliveness) ===== */
@keyframes s-monitor-life {
  0%, 88%, 100% { opacity: 1; }
  90%            { opacity: 0.94; }
  92%            { opacity: 1; }
  94%            { opacity: 0.96; }
}

#s-monitor-screen {
  animation: s-monitor-life 12s ease-in-out infinite;
  animation-delay: -4s;
}

/* ===== Lamp glow breathe — asymmetric organic ease ===== */
@keyframes s-lamp-breathe {
  0%   { opacity: 0.62; }
  30%  { opacity: 0.88; }/* fast inhale */
  55%  { opacity: 0.92; }/* hold at peak */
  78%  { opacity: 0.80; }/* slow exhale shoulder */
  100% { opacity: 0.62; }/* settle back */
}

#s-lamp-pool {
  animation: s-lamp-breathe 4.8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}


/* ===== Candle glow flicker ===== */
@keyframes s-candle-flicker {
  0%,  100% { opacity: 0.82; transform: scale(1.00); }
  8%         { opacity: 0.95; transform: scale(1.04); }
  20%        { opacity: 0.78; transform: scale(0.97); }
  35%        { opacity: 0.90; transform: scale(1.02); }
  50%        { opacity: 0.72; transform: scale(0.95); }/* deep dip */
  62%        { opacity: 0.88; transform: scale(1.01); }
  80%        { opacity: 0.76; transform: scale(0.98); }
}

#s-candle-glow {
  transform-origin: center bottom;
  transform-box: fill-box;
  animation: s-candle-flicker 2.3s ease-in-out infinite;
  animation-delay: -0.7s;
}

/* ===== Dust particle drift ===== */
@keyframes s-dust-drift {
  0%   { transform: translate(0px, 0px); opacity: 0; }
  12%  { opacity: 0.6; }
  50%  { transform: translate(8px, -18px); opacity: 0.4; }
  88%  { opacity: 0.15; }
  100% { transform: translate(14px, -38px); opacity: 0; }
}

.s-dust-particle {
  animation: s-dust-drift 8s ease-in-out infinite;
}
.s-dust-particle:nth-child(2) { animation-delay: -2.1s; animation-duration: 9.4s; }
.s-dust-particle:nth-child(3) { animation-delay: -5.3s; animation-duration: 7.2s; }
.s-dust-particle:nth-child(4) { animation-delay: -1.6s; animation-duration: 11s; }

/* ===== Rain slide variation ===== */
@keyframes s-rain-slide {
  0%   { transform: translateY(0)   scaleX(1); opacity: 0; }
  8%   { opacity: 0.55; }
  85%  { opacity: 0.45; }
  100% { transform: translateY(540px) scaleX(0.85); opacity: 0; }
}

.s-rain-streak {
  animation: s-rain-slide 0.7s linear infinite;
}
.s-rain-streak:nth-child(odd)  { animation-duration: 0.65s; animation-delay: -0.3s; }
.s-rain-streak:nth-child(even) { animation-duration: 0.78s; animation-delay: -0.1s; }

/* ===== String lights subtle shimmer ===== */
@keyframes s-lights-drift {
  0%, 100% { opacity: 0.9; }
  50%       { opacity: 1; }
}

#s-string-lights {
  animation: s-lights-drift 8s ease-in-out infinite;
}

/* ===== Scene zoom — punch in on engagement, focused on monitor right side ===== */
.hero {
  transform-origin: 74% 35%;
  transition: transform 0.9s cubic-bezier(0.34, 1.04, 0.64, 1);
  will-change: transform;
}

/* ===== Cartoon poof cloud ===== */
@keyframes cat-poof-expand {
  0%   { transform: translate(-50%,-50%) scale(0.08); opacity: 1; }
  50%  { transform: translate(-50%,-50%) scale(1.15); opacity: 0.9; }
  100% { transform: translate(-50%,-50%) scale(1.9);  opacity: 0; }
}

/* ===== Dash speed lines ===== */
@keyframes cat-dash-right {
  from { opacity: 0.75; transform: translateX(0) scaleX(1); }
  to   { opacity: 0;    transform: translateX(60px) scaleX(0.2); }
}
@keyframes cat-dash-left {
  from { opacity: 0.75; transform: translateX(0) scaleX(1); }
  to   { opacity: 0;    transform: translateX(-60px) scaleX(0.2); }
}

.hero--engaged {
  transform: scale(1.55);
}

/* Keep cat video on its own compositor layer so it doesn't inflate the hero texture */
.hero__cat {
  transform: translateZ(0);
  will-change: transform;
}

/* ===== Page transition overlay ===== */
.cat-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.cat-overlay--visible {
  opacity: 1;
  pointer-events: all;
}

/* ===== Picture frame — own compositor layer so curtain animation doesn't bleed ===== */
#s-picture-frame {
  will-change: transform;
  isolation: isolate;
}

/* ===== Desk item interaction cursors ===== */
#s-mug,
#s-candle,
#s-scrap-paper,
#s-bookshelf,
#s-headphones,
#s-lamp {
  cursor: pointer;
}

/* ===== Reduce motion ===== */
@media (prefers-reduced-motion: reduce) {
  .hero { transition: none !important; }

  #s-curtain-l,
  #s-curtain-r,
  #s-bookshelf,
  #s-monitor-screen,
  #s-lamp-pool,
  #s-string-lights,
  #s-candle-glow,
  .s-dust-particle,
  .s-rain-streak {
    animation: none;
  }

  .scene-wrapper svg animate,
  .scene-wrapper svg animateTransform {
    dur: "0s";
  }
}