/* ================================================
   chill spot LP — Animations
   Bold reveals, playful stagger, floating shapes
   ================================================ */

#page-content {
    opacity: 0;
    transition: opacity 0.6s ease;
}

#page-content.visible {
    opacity: 1;
}

/* ── Text Reveal (Apple-style swipe-up) ── */

.text-reveal {
    overflow: hidden;
}

.text-reveal .line {
    display: block;
    transform: translateY(105%);
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.text-reveal.in-view .line {
    transform: translateY(0);
}

.text-reveal.in-view .line:nth-child(1) { transition-delay: 0s; }
.text-reveal.in-view .line:nth-child(2) { transition-delay: 0.08s; }
.text-reveal.in-view .line:nth-child(3) { transition-delay: 0.16s; }
.text-reveal.in-view .line:nth-child(4) { transition-delay: 0.24s; }

/* Hero logo shrink */
.hero-logo {
    transition: height 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

/* ── Scroll Reveals ── */

[data-scroll] {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity 0.8s ease,
        transform 0.8s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
    will-change: opacity, transform;
}

[data-scroll].in-view {
    opacity: 1;
    transform: none;
}

[data-scroll-delay="100"] { transition-delay: 0.1s; }
[data-scroll-delay="150"] { transition-delay: 0.15s; }
[data-scroll-delay="200"] { transition-delay: 0.2s; }
[data-scroll-delay="300"] { transition-delay: 0.3s; }
[data-scroll-delay="400"] { transition-delay: 0.4s; }

/* Slide from left */
[data-scroll="slide-left"] {
    opacity: 0;
    transform: translateX(-60px);
}
[data-scroll="slide-left"].in-view {
    opacity: 1;
    transform: none;
}

/* Slide from right */
[data-scroll="slide-right"] {
    opacity: 0;
    transform: translateX(60px);
}
[data-scroll="slide-right"].in-view {
    opacity: 1;
    transform: none;
}

/* Scale up entrance */
[data-scroll="scale-up"] {
    opacity: 0;
    transform: scale(0.85);
}
[data-scroll="scale-up"].in-view {
    opacity: 1;
    transform: none;
}

/* ── Values word stagger ── */

.values .values-title span {
    opacity: 0;
    transform: translateY(30px) rotate(4deg);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: inline-block;
}

.values.in-view .values-title span {
    opacity: 1;
    transform: none;
}

.values.in-view .values-title span:nth-child(1) { transition-delay: 0s; }
.values.in-view .values-title span:nth-child(2) { transition-delay: 0.1s; }
.values.in-view .values-title span:nth-child(3) { transition-delay: 0.2s; }
.values.in-view .values-title span:nth-child(4) { transition-delay: 0.3s; }

/* ── Proof bar stagger ── */

.proof-item {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.proof-bar.in-view .proof-item:nth-child(1) { opacity: 1; transform: none; transition-delay: 0s; }
.proof-bar.in-view .proof-item:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.08s; }
.proof-bar.in-view .proof-dot:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.08s; }
.proof-bar.in-view .proof-item:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.16s; }
.proof-bar.in-view .proof-dot:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.16s; }
.proof-bar.in-view .proof-item:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.24s; }

.proof-dot {
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* ── Floating shape animations ── */

@keyframes float-gentle {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-12px) rotate(2deg); }
}

@keyframes float-slow {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(-3deg); }
}

@keyframes spin-slow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.hero .shape-1 { animation: float-gentle 7s ease-in-out infinite; }
.hero .shape-2 { animation: float-slow 9s ease-in-out infinite; }
.hero .shape-4 { animation: float-gentle 11s ease-in-out infinite reverse; }

.values .shape-v1 { animation: float-slow 10s ease-in-out infinite; }
.values .shape-v3 { animation: float-gentle 8s ease-in-out infinite; }

/* ── Phone hover state ── */

.hero-phones .phone-primary {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-phones:hover .phone-primary {
    transform: rotate(-1deg) scale(1.03);
}

.hero-phones .phone-secondary {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.05s;
}
.hero-phones:hover .phone-secondary {
    transform: rotate(5deg) scale(1.02);
}

.hero-phones .phone-tertiary {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}
.hero-phones:hover .phone-tertiary {
    transform: rotate(-8deg) scale(1.02);
}

/* ── Reduced motion ── */

@media (prefers-reduced-motion: reduce) {
    #page-content,
    [data-scroll],
    .text-reveal .line,
    .values .values-title span,
    .proof-item,
    .proof-dot,
    .clay {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}