/* ==========================================================
   POETRY & TYPOGRAPHY
   ========================================================== */
#paw-etry {
    background-image: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%);
}

.font-serif {
    font-family: 'Georgia', 'Times New Roman', serif;
}

#paw-etry p {
    transition: opacity 0.5s ease-in-out;
}

/* Subtle "glow" when hovering over a poem card */
#paw-etry .relative:hover {
    background-color: rgba(255, 255, 255, 0.03);
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.05); /* Amber glow */
}

/* ==========================================================
   PARALLAX ENGINE (Consolidated)
   ========================================================== */

/* ==========================================================
   BANNER STRIPS (The Simplified Parallax Alternative)
   ========================================================== */
.banner-strip {
    position: relative;
    height: 288px; /* Approx 3 inches on most desktop screens */
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(15,23,42,0.3), rgba(15,23,42,0.6));
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure the text stays on top of the overlay */
.banner-strip h3 {
    position: relative;
    z-index: 10;
}


/* MOBILE FIX: iOS Safari disables 'fixed' backgrounds to save battery.
   Without this fix, the image often looks "zoomed in" or blurry on iPhones.
*/
@media (max-width: 1024px) {
    .parallax-window {
        background-attachment: scroll !important; /* Fallback to standard scroll */
        height: 300px; 
        background-position: center center;
    }
}

/* Custom Seek Bar Styling */
#seek-slider {
    -webkit-appearance: none;
    background: #4f4f4f; /* Track color */
}

#seek-slider::-webkit-slider-runnable-track {
    height: 4px;
}

#seek-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background: #1ed760; /* Spotify Green */
    margin-top: -4px; /* Centers the thumb */
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

/* Make the thumb appear only on hover (Like real Spotify) */
#seek-slider::-webkit-slider-thumb { opacity: 0; transition: opacity 0.2s; }
#seek-slider:hover::-webkit-slider-thumb { opacity: 1; }



/* ==========================================================
   1. GLOBAL & UTILITY STYLES
   ========================================================== */

/* Smooth scrolling for anchor links (e.g., #comics, #origin) */
html { 
    scroll-behavior: smooth; 
}

/* Glass-morphism effect for modern UI elements */
.glass {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ==========================================================
   2. FLOATING CONTROLS (BarkGPT & Treat-o-Meter)
   ========================================================== */

/* Base styles for the floating nodes (Left & Right).
   The transition here handles the smooth "sliding" when Spot-fi starts.
*/
#barkgpt-container, 
#treat-controls {
    position: fixed;
    z-index: 1000; 
    transition: bottom 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    bottom: 2rem; /* Default position when Spot-fi is NOT active */
}

/* --- THE LIFT LOGIC --- */

/* Desktop: Lift them just enough to clear the 60-80px player bar */
body.spotfi-active #barkgpt-container,
body.spotfi-active #treat-controls {
    bottom: 85px !important; 
}

/* iPhone/Mobile Override: Lifts them higher to clear the bar + iPhone home swipe area */
@media (max-width: 768px) {
    body.spotfi-active #barkgpt-container,
    body.spotfi-active #treat-controls {
        bottom: 115px !important;
    }
}

/* ==========================================================
   3. SPOT-FI SPECIFIC STYLES
   ========================================================== */

/* Ensure thumb is visible on touch devices */
@media (max-pointer: coarse) {
    #seek-slider::-webkit-slider-thumb {
        opacity: 1 !important;
    }
}

/* Ensures artist profile photos are perfectly circular without stretching */
.artist-circle {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

/* The Spotify-esque Player Bar */
#spotfi-player-bar {
    /* Safe-guard against iPhone bottom bar */
    padding-bottom: env(safe-area-inset-bottom, 80px);
}

/* ==========================================================
   4. HERO & PARALLAX SECTIONS
   ========================================================== */

.hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

#hero-video {
    position: absolute;
    top: 50%; left: 50%;
    min-width: 100%; min-height: 100%;
    transform: translate(-50%, -50%);
    z-index: 0;
    filter: brightness(0.4);
    object-fit: cover;
}

.hero-content { z-index: 10; position: relative; }

.hero-content h1 {
    font-size: clamp(2.5rem, 10vw, 6.5rem);
    margin: 0; 
    letter-spacing: -3px; 
    line-height: 0.9;
}

/* ==========================================================
   5. ANIMATIONS & PRANKS
   ========================================================== */

/* The slow bounce for the Treat Bone button */
@keyframes bounce-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.treat-btn {
    animation: bounce-slow 3s infinite ease-in-out;
}

/* Treat popup "+1 Treat" animation */
#treat-count-popup {
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
}

/* The shake effect for the 'Danger' German Shepherd alerts */
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  25% { transform: translate(-1px, -2px) rotate(-1deg); }
  50% { transform: translate(-3px, 0px) rotate(1deg); }
  100% { transform: translate(1px, -1px) rotate(0deg); }
}

.alert-shake:hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}

/* Hazard Tape Pattern */
.caution-pattern {
  background: repeating-linear-gradient(
    45deg,
    #facc15,
    #facc15 10px,
    #000 10px,
    #000 20px
  );
}