/* ================================================================
   RESPONSIVE OVERRIDES
   Base styles in style.css are fluid (clamp/vw) already;
   these breakpoints handle structural changes.
   ================================================================ */

/* ---------- TABLET (<=1024px) ---------- */
@media (max-width: 1024px){
  .gallery-photo{ width:140px; height:140px; border-radius:8px; }
  .message-box, .notes-box{ padding:1.4rem; }
  .lightbox-arrow{ width:44px; height:44px; font-size:1.5rem; }
  .lightbox-prev{ left:12px; }
  .lightbox-next{ right:12px; }
}

/* ---------- MOBILE (<=680px) ---------- */
@media (max-width: 680px){
  .music-player{ top:16px; right:16px; }
  .music-toggle{ width:46px; height:46px; }

  .lock-inner{ padding: 0 0.5rem; }
  .pookie-title{ margin-bottom:2.2rem; }
  .date-wrap{ gap:0.8rem; }
  .password-form{ padding:1.8rem 1.4rem; }

  .cake-stage{ height: 260px; }
  .cake{ width: 60vw; max-width:220px; }
  .candles{ gap:14px; }

  .cta-btn{ padding: 0.85rem 1.6rem; font-size:0.92rem; text-align:center; }
  .gallery-cta{ width: 88%; text-align:center; justify-content:center; }

  .gallery-photo{ width:108px; height:108px; border-radius:7px; }
  .gallery-center-card{ padding:1.4rem 1.2rem; width:90%; }
  .gallery-typed{ font-size:1.05rem; }

  .lightbox-frame{ padding:10px; max-width:92vw; max-height:78vh; }
  .lightbox-img{ max-width:88vw; max-height:64vh; }
  .lightbox-close{ top:14px; right:14px; width:38px; height:38px; font-size:0.95rem; }
  .lightbox-arrow{ width:38px; height:38px; font-size:1.3rem; }
  .lightbox-prev{ left:8px; }
  .lightbox-next{ right:8px; }

  .envelope{ width: 78vw; height: 50vw; max-width:300px; max-height:190px; }

  .sticker{ font-size:1.8rem; }

  .notes-headline{ font-size:1.6rem; }
  .notes-box{ padding:1.4rem; }

  /* disable custom cursor visuals entirely on touch-first small screens */
  .cursor-glow, .cursor-dot{ display:none; }
  body{ cursor:auto; }
}

/* ---------- VERY SMALL PHONES ---------- */
@media (max-width: 380px){
  .pookie-title{ font-size:2.1rem; }
  .date-circle{ width:84px; height:84px; }
  .date-number{ font-size:1.6rem; }
  .cta-btn span{ font-size:0.85rem; }
  .gallery-photo{ width:92px; height:92px; border-radius:6px; }
}

/* ---------- Respect reduced motion preference ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}