/* ============================================
   SCROLL ANIMATIONS — Cabañas Pewma
   Lightweight CSS-only reveal system
   ============================================ */

/* Accessibility: Disable animations if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-scale, .reveal-left, .reveal-right,
    .stagger-card, .tinaja-immersive, .sauna-split,
    .feature-item { 
        opacity: 1 !important; 
        transform: none !important; 
        transition: none !important;
        animation: none !important;
    }
}

/* ── Fade Up ── */
.reveal {
    opacity: 0; transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.reveal.revealed { opacity: 1; transform: translateY(0); }

/* ── Scale Reveal ── */
.reveal-scale {
    opacity: 0; transform: scale(0.92);
    transition: opacity 1s cubic-bezier(0.16,1,0.3,1), transform 1.2s cubic-bezier(0.16,1,0.3,1);
}
.reveal-scale.revealed { opacity: 1; transform: scale(1); }

/* ── Slide Left ── */
.reveal-left {
    opacity: 0; transform: translateX(-60px);
    transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1);
}
.reveal-left.revealed { opacity: 1; transform: translateX(0); }

/* ── Slide Right ── */
.reveal-right {
    opacity: 0; transform: translateX(60px);
    transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1);
}
.reveal-right.revealed { opacity: 1; transform: translateX(0); }

/* ── Stagger Cards — dramatic entrance ── */
.bento-card.stagger-card {
    opacity: 0; transform: translateY(80px) scale(0.92);
    transition: opacity 1s cubic-bezier(0.16,1,0.3,1), transform 1s cubic-bezier(0.16,1,0.3,1);
}
.bento-card.stagger-card.revealed { opacity: 1; transform: translateY(0) scale(1); }
.bento-card.stagger-card[data-delay="1"] { transition-delay: 0.25s; }
.bento-card.stagger-card[data-delay="2"] { transition-delay: 0.5s; }
.bento-card.stagger-card[data-delay="3"] { transition-delay: 0.75s; }
.bento-card.stagger-card[data-delay="4"] { transition-delay: 1s; }

/* ── Feature Items Stagger ── */
.feature-item.stagger-feature {
    opacity: 0; transform: translateY(40px);
    transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.feature-item.stagger-feature.revealed { opacity: 1; transform: translateY(0); }
.feature-item.stagger-feature[data-delay="1"] { transition-delay: 0.1s; }
.feature-item.stagger-feature[data-delay="2"] { transition-delay: 0.2s; }
.feature-item.stagger-feature[data-delay="3"] { transition-delay: 0.3s; }
.feature-item.stagger-feature[data-delay="4"] { transition-delay: 0.4s; }
.feature-item.stagger-feature[data-delay="5"] { transition-delay: 0.5s; }
.feature-item.stagger-feature[data-delay="6"] { transition-delay: 0.6s; }
.feature-item.stagger-feature[data-delay="7"] { transition-delay: 0.7s; }

/* ── Sauna Split Animation ── */
.sauna-feature.sauna-anim {
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
.sauna-anim > div:first-child {
    opacity: 0; transform: translateX(-80px);
    transition: opacity 1s cubic-bezier(0.16,1,0.3,1), transform 1s cubic-bezier(0.16,1,0.3,1);
}
.sauna-anim.revealed > div:first-child { opacity: 1; transform: translateX(0); }

.sauna-anim .sauna-content {
    opacity: 0; transform: translateX(80px);
    transition: opacity 1s cubic-bezier(0.16,1,0.3,1) 0.15s, transform 1s cubic-bezier(0.16,1,0.3,1) 0.15s;
}
.sauna-anim.revealed .sauna-content { opacity: 1; transform: translateX(0); }

/* Animated Temperature */
.temp-display {
    font-size: 3.5rem; font-weight: 800; color: #FF6B35; line-height: 1;
    text-shadow: 0 0 30px rgba(255,107,53,0.3); margin-bottom: 0.3rem;
}
.temp-display .temp-unit { font-size: 1.5rem; opacity: 0.6; }

/* Heat bar */
.heat-bar {
    width: 100%; height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px;
    margin: 0.8rem 0; overflow: hidden;
}
.heat-bar-fill {
    height: 100%; width: 0%; border-radius: 2px;
    background: linear-gradient(90deg, #FF6B35, #FF4500, #FF6B35);
    transition: width 2s cubic-bezier(0.16,1,0.3,1) 0.5s;
}
.sauna-anim.revealed .heat-bar-fill { width: 80%; }

/* ── Section Headers Reveal ── */
.section-header.reveal-header {
    opacity: 0; transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.section-header.reveal-header.revealed { opacity: 1; transform: translateY(0); }

/* ═══════════════════════════════════════════
   🛁 TINAJA IMMERSIVE EXPERIENCE
   ═══════════════════════════════════════════ */

/* Bubbles */
.tinaja-bubble {
    position: absolute; border-radius: 50%; pointer-events: none; z-index: 3;
    background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 70%);
    opacity: 0;
}
.tinaja-immersive.revealed .tinaja-bubble { animation: bubble-float ease-in-out infinite; }

.tinaja-bubble[data-b="1"]  { width:10px; height:10px; bottom:20%; left:25%; animation-duration:4s !important; animation-delay:0s !important; }
.tinaja-bubble[data-b="2"]  { width:7px;  height:7px;  bottom:18%; left:35%; animation-duration:3.5s !important; animation-delay:0.8s !important; }
.tinaja-bubble[data-b="3"]  { width:12px; height:12px; bottom:22%; left:50%; animation-duration:5s !important; animation-delay:1.2s !important; }
.tinaja-bubble[data-b="4"]  { width:6px;  height:6px;  bottom:24%; left:62%; animation-duration:3.8s !important; animation-delay:2s !important; }
.tinaja-bubble[data-b="5"]  { width:9px;  height:9px;  bottom:19%; left:44%; animation-duration:4.5s !important; animation-delay:0.5s !important; }
.tinaja-bubble[data-b="6"]  { width:8px;  height:8px;  bottom:21%; left:30%; animation-duration:4.2s !important; animation-delay:1.8s !important; }
.tinaja-bubble[data-b="7"]  { width:11px; height:11px; bottom:17%; left:55%; animation-duration:5.5s !important; animation-delay:3s !important; }
.tinaja-bubble[data-b="8"]  { width:5px;  height:5px;  bottom:23%; left:40%; animation-duration:3.2s !important; animation-delay:2.5s !important; }
.tinaja-bubble[data-b="9"]  { width:7px;  height:7px;  bottom:20%; left:70%; animation-duration:4.8s !important; animation-delay:1s !important; }
.tinaja-bubble[data-b="10"] { width:9px;  height:9px;  bottom:16%; left:22%; animation-duration:4s !important; animation-delay:3.5s !important; }

@keyframes bubble-float {
    0% { transform: translateY(0) scale(0.5); opacity: 0; }
    20% { opacity: 0.8; transform: translateY(-20px) scale(1); }
    60% { opacity: 0.4; }
    100% { transform: translateY(-140px) translateX(-5px) scale(0.6); opacity: 0; }
}

/* Vapor/Steam - Dense & highly visible */
.tinaja-vapor {
    position: absolute; pointer-events: none; z-index: 3;
    border-radius: 50%; filter: blur(18px);
    background: radial-gradient(circle, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.12) 40%, transparent 70%);
    opacity: 0;
}
.tinaja-immersive.revealed .tinaja-vapor { animation: vapor-drift ease-in-out infinite; }

.tinaja-vapor[data-v="1"] { width:240px; height:180px; bottom:28%; left:10%;  animation-duration:5.5s !important; animation-delay:0s !important; }
.tinaja-vapor[data-v="2"] { width:200px; height:160px; bottom:22%; left:35%;  animation-duration:6s !important;   animation-delay:0.8s !important; }
.tinaja-vapor[data-v="3"] { width:280px; height:200px; bottom:30%; left:50%;  animation-duration:7s !important;   animation-delay:1.8s !important; }
.tinaja-vapor[data-v="4"] { width:220px; height:170px; bottom:25%; left:25%;  animation-duration:5.8s !important; animation-delay:3s !important; }
.tinaja-vapor[data-v="5"] { width:180px; height:140px; bottom:32%; left:60%;  animation-duration:6.5s !important; animation-delay:1.2s !important; }
.tinaja-vapor[data-v="6"] { width:260px; height:190px; bottom:26%; left:18%;  animation-duration:7.5s !important; animation-delay:2.5s !important; }
.tinaja-vapor[data-v="7"] { width:190px; height:150px; bottom:30%; left:45%;  animation-duration:5s !important;   animation-delay:4s !important; }
.tinaja-vapor[data-v="8"] { width:300px; height:220px; bottom:20%; left:30%;  animation-duration:8s !important;   animation-delay:0.5s !important; filter: blur(30px); }

@keyframes vapor-drift {
    0%   { transform: translateY(0) scaleX(1);    opacity: 0; }
    12%  { opacity: 0.8; }
    35%  { transform: translateY(-80px) scaleX(1.4);  opacity: 0.6; }
    60%  { transform: translateY(-150px) scaleX(1.6); opacity: 0.3; }
    100% { transform: translateY(-250px) scaleX(2);   opacity: 0; }
}

/* Glow & Shimmer activation on reveal */
.tinaja-immersive.revealed .tinaja-glow { opacity: 1; }
.tinaja-immersive.revealed .tinaja-shimmer {
    opacity: 1;
    animation: water-shimmer 4s ease-in-out infinite;
}
@keyframes water-shimmer {
    0%, 100% { transform: translateX(-30%); opacity: 0; }
    50% { transform: translateX(30%); opacity: 0.5; }
}

/* Audio toggle button */
.tinaja-immersive.revealed .audio-toggle-prod {
    opacity: 1 !important;
    transition: opacity 1s ease 1.5s;
}
.audio-toggle-prod:hover { background: rgba(193,124,84,0.6) !important; transform: scale(1.1); }
.audio-toggle-prod.playing { background: rgba(45,90,39,0.6) !important; border-color: rgba(76,175,80,0.5) !important; }
.audio-toggle-prod.playing .fa-volume-xmark { display: none; }
.audio-toggle-prod.playing .audio-wave-prod { display: flex !important; }
.audio-wave-prod span {
    animation: wave-bar 0.8s ease-in-out infinite;
}
.audio-wave-prod span:nth-child(1) { animation-delay: 0s; }
.audio-wave-prod span:nth-child(2) { animation-delay: 0.15s; }
.audio-wave-prod span:nth-child(3) { animation-delay: 0.3s; }
.audio-wave-prod span:nth-child(4) { animation-delay: 0.1s; }
.audio-wave-prod span:nth-child(5) { animation-delay: 0.25s; }

@keyframes wave-bar {
    0%, 100% { transform: scaleY(0.5); }
    50% { transform: scaleY(1); }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .tinaja-immersive img { height: 380px !important; }
    .tinaja-vapor { filter: blur(22px); }
}