/* season-theme.css (clean)
   - Snow overlay uses DOM + CSS animation.
   - Fireworks uses canvas in JS.
*/

/* === Snow === */
.season-snow-overlay{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147483000;
  overflow: hidden;
}

.season-snowflake{
  position: absolute;
  top: -12vh;
  will-change: transform;
  opacity: 0.9;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.25));
  animation-name: season-snow-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes season-snow-fall{
  from{ transform: translate3d(var(--x,0), -12vh, 0) rotate(0deg); }
  to  { transform: translate3d(var(--x,0), 112vh, 0) rotate(360deg); }
}

/* === Banner === */
.season-banner{
  position: fixed;
  top: 56px;
  right: 16px;
  z-index: 2147483002;
  pointer-events: none;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 10px 14px;
  border-radius: 12px;
  color: #fff;
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  line-height: 1.1;
}
.season-banner small{
  display:block;
  margin-top: 4px;
  font-weight: 600;
  opacity: 0.9;
}

/* Layering: keep fireworks in background behind app UI */
.app-shell{position:relative; z-index:2;}
#season-fireworks{z-index:0;}



/* Make main schedule container ~20% more transparent */
.container{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.048));
}


/* === Generic seasonal emoji FX === */
.season-fx-overlay{
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2147482500;
}

.season-fx-item{
  position: absolute;
  left: 50vw;
  will-change: transform;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
  transform: translate3d(0,0,0) rotate(var(--r, 0deg));
}

.season-fx-overlay[data-mode="down"] .season-fx-item{
  top: -10vh;
  animation-name: seasonFxDown;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.season-fx-overlay[data-mode="up"] .season-fx-item{
  bottom: -12vh;
  animation-name: seasonFxUp;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes seasonFxDown{
  0%   { transform: translate3d(0,-10vh,0) rotate(var(--r,0deg)); }
  50%  { transform: translate3d(var(--x, 0px), 50vh,0) rotate(calc(var(--r,0deg) + 180deg)); }
  100% { transform: translate3d(calc(var(--x,0px) * 1.2), 115vh,0) rotate(calc(var(--r,0deg) + 360deg)); }
}

@keyframes seasonFxUp{
  0%   { transform: translate3d(0, 10vh,0) rotate(var(--r,0deg)); }
  50%  { transform: translate3d(var(--x, 0px), -45vh,0) rotate(calc(var(--r,0deg) - 180deg)); }
  100% { transform: translate3d(calc(var(--x,0px) * 1.2), -120vh,0) rotate(calc(var(--r,0deg) - 360deg)); }
}

/* === Spring rain === */
.season-rain-overlay{
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2147482400;
}

.season-raindrop{
  position: absolute;
  top: -20vh;
  border-radius: 999px;
  background: linear-gradient(to bottom, rgba(255,255,255,.0), rgba(255,255,255,.55));
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.22));
  transform: translateZ(0) skewX(-10deg);
  animation-name: rainFall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes rainFall{
  0%   { transform: translate3d(0,-20vh,0) skewX(-10deg); }
  100% { transform: translate3d(0,120vh,0) skewX(-10deg); }
}

/* === Performance profile: mobile + hidden tab === */
.season-paused .season-snowflake,
.season-paused .season-fx-item,
.season-paused .season-raindrop{
  animation-play-state: paused !important;
}

@media (max-width: 760px), (prefers-reduced-motion: reduce){
  body{
    background-attachment: scroll !important;
    background:
      radial-gradient(70% 42% at 50% 0%, rgba(124,58,237,.18), transparent 68%),
      linear-gradient(180deg, #0f172a 0%, #111827 58%, #0b1220 100%) !important;
  }
  .app-shell{ padding: 10px !important; }
  .container,
  .modal,
  .bday-modal,
  .meta .pill,
  .birthday-banner,
  .season-banner,
  .auth-backdrop,
  .auth-card,
  .names-nav{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .container{
    width: min(100%, 100vw) !important;
    padding: 14px 10px !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, rgba(17,24,39,.92), rgba(17,24,39,.88)) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.34) !important;
  }
  .container::before{
    display: none !important;
  }
  .meta{ gap: 8px !important; }
  .meta .pill{
    font-size: 12px !important;
    padding: 6px 10px !important;
  }
  .birthday-banner{
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }
  h2{
    font-size: clamp(18px, 6.8vw, 30px) !important;
    line-height: 1.15 !important;
    margin-bottom: 14px !important;
  }
  .controls{
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  .controls button{
    flex: 1 1 180px;
    min-height: 44px;
    font-size: 15px;
  }
  .table-card{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 16px !important;
  }
  .table-card table{ min-width: 640px; }
  thead th, tbody td{
    padding: 8px 6px !important;
    font-size: 12px !important;
  }
  .season-snowflake,
  .season-fx-item,
  .season-raindrop{
    filter: none !important;
  }
  td.locked.birthday-booking{
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .season-snowflake,
  .season-fx-item,
  .season-raindrop{
    animation: none !important;
    display: none !important;
  }
}