/* ============================================
   INSTAGRAM WRAPPED — SLIDE ANIMATIONS
   ALL SCENE ELEMENTS SCALED 2-3x BIGGER
   ============================================ */

/* ===== A) BACKGROUND GRADIENTS ===== */
.s-bg-ig-intro         { background: linear-gradient(135deg, #833AB4 0%, #FD1D1D 100%); }
.s-bg-ig-numbers       { background: linear-gradient(135deg, #F77737 0%, #833AB4 100%); }
.s-bg-ig-content       { background: linear-gradient(135deg, #FD1D1D 0%, #FCAF45 100%); }
.s-bg-ig-storyaddict   { background: linear-gradient(135deg, #833AB4 0%, #E1306C 100%); }
.s-bg-ig-reels         { background: linear-gradient(135deg, #833AB4 0%, #F77737 100%); }
.s-bg-ig-ratio         { background: linear-gradient(135deg, #FCAF45 0%, #FD1D1D 100%); }
.s-bg-ig-explore       { background: linear-gradient(135deg, #405DE6 0%, #833AB4 100%); }
.s-bg-ig-engage        { background: linear-gradient(135deg, #F77737 0%, #FD1D1D 100%); }
.s-bg-ig-guilty        { background: linear-gradient(135deg, #FD1D1D 0%, #833AB4 100%); }
.s-bg-ig-followerreality { background: linear-gradient(135deg, #E1306C 0%, #833AB4 100%); }
.s-bg-ig-screentime    { background: linear-gradient(135deg, #833AB4 0%, #FCAF45 100%); }
.s-bg-ig-timeequiv     { background: linear-gradient(135deg, #F77737 0%, #E1306C 100%); }
.s-bg-ig-addiction     { background: linear-gradient(135deg, #833AB4 0%, #FD1D1D 50%, #F77737 100%); }
.s-bg-ig-persona       { background: linear-gradient(135deg, #833AB4 0%, #FD1D1D 50%, #F77737 100%); }

/* ===== B) SCENE CONTAINER ===== */
.scene {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

/* ===== CSS SHAPES (ALL 2.5x SCALED) ===== */

/* Camera / Phone outline */
.sh-phone {
    position: absolute;
    width: 125px;
    height: 200px;
    border: 6px solid rgba(255,255,255,0.12);
    border-radius: 28px;
}
.sh-phone::after {
    content: '';
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    border: 4px solid rgba(255,255,255,0.12);
    border-radius: 50%;
}

/* Heart shape */
.sh-heart {
    position: absolute;
    width: 75px;
    height: 70px;
}
.sh-heart::before,
.sh-heart::after {
    content: '';
    position: absolute;
    top: 0;
    width: 37px;
    height: 60px;
    background: rgba(255,255,255,0.1);
    border-radius: 37px 37px 0 0;
}
.sh-heart::before {
    left: 0;
    transform: rotate(-45deg);
    transform-origin: bottom left;
}
.sh-heart::after {
    left: 37px;
    transform: rotate(45deg);
    transform-origin: bottom right;
}

/* Story circle (ring with gradient border) */
.sh-story {
    position: absolute;
    width: 135px;
    height: 135px;
    border-radius: 50%;
    background: conic-gradient(#FCAF45, #F77737, #FD1D1D, #833AB4, #FCAF45);
    padding: 6px;
}
.sh-story::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
}

/* Photo frame */
.sh-frame {
    position: absolute;
    width: 112px;
    height: 112px;
    border: 6px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    transform: rotate(6deg);
}
.sh-frame::after {
    content: '';
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
}

/* Comment bubble */
.sh-comment {
    position: absolute;
    width: 125px;
    height: 88px;
    background: rgba(255,255,255,0.1);
    border-radius: 44px;
}
.sh-comment::after {
    content: '';
    position: absolute;
    bottom: -18px;
    left: 22px;
    width: 0;
    height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-top: 24px solid rgba(255,255,255,0.1);
}

/* Grid squares (3x3) */
.sh-grid {
    position: absolute;
    display: grid;
    grid-template-columns: repeat(3, 30px);
    grid-template-rows: repeat(3, 30px);
    gap: 6px;
}
.sh-grid::before,
.sh-grid::after {
    content: '';
    width: 30px;
    height: 30px;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
}
.sh-grid-cell {
    width: 30px;
    height: 30px;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
}

/* DM paper airplane */
.sh-dm {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 55px solid rgba(255,255,255,0.12);
    border-top: 35px solid transparent;
    border-bottom: 35px solid transparent;
}
.sh-dm::after {
    content: '';
    position: absolute;
    top: -10px;
    left: -55px;
    width: 0;
    height: 0;
    border-left: 55px solid transparent;
    border-bottom: 25px solid rgba(255,255,255,0.08);
}

/* Reel play icon */
.sh-reel {
    position: absolute;
    width: 120px;
    height: 120px;
    border: 6px solid rgba(255,255,255,0.12);
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sh-reel::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 35px solid rgba(255,255,255,0.15);
    border-top: 22px solid transparent;
    border-bottom: 22px solid transparent;
    margin-left: 8px;
}

/* Notification badge */
.sh-notif {
    position: absolute;
    width: 70px;
    height: 70px;
    background: rgba(255,255,255,0.12);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: rgba(255,255,255,0.3);
}


/* ===== NEW SHAPES -- Story Addiction (Slide 3) (2.5x SCALED) ===== */
.sa-ring {
    position: absolute;
    border-radius: 50%;
    background: conic-gradient(#FCAF45, #F77737, #FD1D1D, #833AB4, #FCAF45);
    padding: 6px;
}
.sa-ring::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(0,0,0,0.4);
}
.sa-ring1 { width: 175px; height: 175px; top: 8%; left: 5%; animation: storyPulse 3s ease-in-out infinite; }
.sa-ring2 { width: 125px; height: 125px; top: 16%; right: 6%; animation: storyPulse 3.5s ease-in-out 0.5s infinite; }
.sa-ring3 { width: 150px; height: 150px; bottom: 18%; left: 10%; animation: storyPulse 4s ease-in-out 1s infinite; }
.sa-phone {
    position: absolute;
    bottom: 14%;
    right: 5%;
    width: 125px;
    height: 200px;
    border: 6px solid rgba(255,255,255,0.12);
    border-radius: 28px;
    animation: floatY 6s ease-in-out infinite;
}
.sa-phone::after {
    content: '';
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    border: 4px solid rgba(255,255,255,0.12);
    border-radius: 50%;
}

@keyframes storyPulse {
    0%, 100% { transform: scale(1); opacity: 0.15; }
    50% { transform: scale(1.25); opacity: 0.3; }
}


/* ===== NEW SHAPES -- Explore Page (Slide 6) (2.5x SCALED) ===== */
.ep-grid {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    grid-template-columns: repeat(3, 135px);
    grid-template-rows: repeat(3, 135px);
    gap: 14px;
    opacity: 0.12;
}
.ep-tile {
    width: 135px;
    height: 135px;
    background: rgba(255,255,255,0.2);
    border-radius: 14px;
    animation: epFade 4s ease-in-out infinite;
}
.ep-t1 { animation-delay: 0s; }
.ep-t2 { animation-delay: 0.3s; }
.ep-t3 { animation-delay: 0.6s; }
.ep-t4 { animation-delay: 0.9s; }
.ep-t5 { animation-delay: 1.2s; }
.ep-t6 { animation-delay: 1.5s; }
.ep-t7 { animation-delay: 1.8s; }
.ep-t8 { animation-delay: 2.1s; }
.ep-t9 { animation-delay: 2.4s; }
.ep-highlight {
    background: rgba(255,255,255,0.5) !important;
    animation: epHighlight 3s ease-in-out infinite !important;
}

@keyframes epFade {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}
@keyframes epHighlight {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}


/* ===== NEW SHAPES -- Follower Reality (Slide 9) (2.5x SCALED) ===== */
.fr-heart-counter {
    position: absolute;
    top: 12%;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 95px;
}
.fr-heart-counter::before,
.fr-heart-counter::after {
    content: '';
    position: absolute;
    top: 0;
    width: 50px;
    height: 80px;
    background: rgba(255,255,255,0.12);
    border-radius: 50px 50px 0 0;
}
.fr-heart-counter::before {
    left: 0;
    transform: rotate(-45deg);
    transform-origin: bottom left;
}
.fr-heart-counter::after {
    left: 50px;
    transform: rotate(45deg);
    transform-origin: bottom right;
}

.fr-ghost {
    position: absolute;
    width: 75px;
    height: 100px;
    background: rgba(255,255,255,0.08);
    border-radius: 37px 37px 0 0;
}
.fr-ghost::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 25px;
    background: rgba(255,255,255,0.08);
    clip-path: polygon(0 0, 33% 100%, 66% 0, 100% 100%);
}
.fr-ghost1 { top: 26%; left: 3%; animation: ghostFade 5s ease-in-out infinite; }
.fr-ghost2 { top: 40%; right: 5%; animation: ghostFade 6s ease-in-out 1s infinite; }
.fr-ghost3 { bottom: 20%; left: 8%; animation: ghostFade 7s ease-in-out 2s infinite; }
.fr-ghost4 { bottom: 14%; right: 10%; animation: ghostFade 5.5s ease-in-out 0.5s infinite; }

@keyframes ghostFade {
    0%, 100% { opacity: 0.08; transform: translateY(0); }
    30% { opacity: 0.2; transform: translateY(-10px); }
    70% { opacity: 0.05; transform: translateY(5px); }
}


/* ===== NEW SHAPES -- Time Equivalents (Slide 11) (2.5x SCALED) ===== */
.te-shape {
    position: absolute;
    border: 6px solid rgba(255,255,255,0.12);
    border-radius: 8px;
}

/* Book shape */
.te-book {
    top: 8%;
    left: 5%;
    width: 75px;
    height: 105px;
    animation: teStack 6s ease-in-out infinite;
}
.te-book::after {
    content: '';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 60%;
    height: 4px;
    background: rgba(255,255,255,0.12);
}

/* Film shape */
.te-film {
    top: 16%;
    right: 6%;
    width: 110px;
    height: 80px;
    border-radius: 14px;
    animation: teStack 7s ease-in-out 1s infinite;
}
.te-film::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-left: 25px solid rgba(255,255,255,0.15);
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
}

/* Plane shape */
.te-plane {
    bottom: 18%;
    right: 5%;
    width: 0;
    height: 0;
    border-left: 75px solid rgba(255,255,255,0.12);
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-radius: 0;
    border-width: 25px 0 25px 75px;
    animation: teStack 5s ease-in-out 0.5s infinite;
}

/* Second book */
.te-book2 {
    bottom: 24%;
    left: 6%;
    width: 65px;
    height: 95px;
    animation: teStack 6.5s ease-in-out 1.5s infinite;
}

@keyframes teStack {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.12; }
    25% { transform: translateY(-15px) rotate(3deg); opacity: 0.22; }
    50% { transform: translateY(-25px) rotate(-2deg); opacity: 0.18; }
    75% { transform: translateY(-10px) rotate(1deg); opacity: 0.15; }
}


/* ===== NEW -- Addiction Meter Display (Slide 12) ===== */
.ig-meter-display {
    width: 100%;
    max-width: 320px;
    margin-bottom: 1.5rem;
}
.ig-meter-track {
    width: 100%;
    height: 24px;
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}
.ig-meter-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #833AB4, #E1306C, #F77737);
    border-radius: 12px;
    transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.ig-meter-score {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    margin-top: 0.5rem;
    text-shadow: 0 4px 20px rgba(0,0,0,0.2);
}


/* ===== NEW -- Persona Addiction Meter Bar ===== */
.meter-bar-wrap {
    width: 100%;
    max-width: 320px;
    margin: 0.8rem 0;
}
.meter-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    margin-bottom: 0.4rem;
}
.meter-track {
    width: 100%;
    height: 14px;
    background: rgba(0,0,0,0.25);
    border-radius: 7px;
    overflow: hidden;
}
.meter-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #833AB4, #E1306C, #F77737);
    border-radius: 7px;
    transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.meter-level {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    margin-top: 0.3rem;
}


/* ===== NEW -- Time Equivalents Grid ===== */
.equiv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
    width: 100%;
    max-width: 320px;
    margin-top: 1rem;
}
.equiv-item {
    background: rgba(0,0,0,0.2);
    border-radius: 12px;
    padding: 0.8rem 0.6rem;
    text-align: center;
    backdrop-filter: blur(10px);
}
.equiv-num {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.2;
}
.equiv-label {
    display: block;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.7);
    margin-top: 0.2rem;
}


/* ===== C) ALL @KEYFRAMES ===== */

/* -- Entrance -- */
@keyframes slideInUp {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideEnter {
    from { opacity: 0; transform: scale(0.93); }
    to   { opacity: 1; transform: scale(1); }
}

/* -- Scene element motions -- */

/* Slow float up and down */
@keyframes floatY {
    0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
    50%      { transform: translateY(-20px) rotate(var(--rot, 0deg)); }
}

/* Slow float diagonally */
@keyframes floatDiag {
    0%, 100% { transform: translate(0, 0) rotate(var(--rot, 0deg)); }
    50%      { transform: translate(12px, -18px) rotate(var(--rot, 0deg)); }
}

/* Drift left to right */
@keyframes driftX {
    0%, 100% { transform: translateX(0) rotate(var(--rot, 0deg)); }
    50%      { transform: translateX(25px) rotate(var(--rot, 0deg)); }
}

/* Gentle spin */
@keyframes spinSlow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Pulse scale */
@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.12; }
    50%      { transform: scale(1.15); opacity: 0.2; }
}

/* Rise from bottom */
@keyframes riseUp {
    0%   { transform: translateY(100vh) rotate(var(--rot, 0deg)); opacity: 0; }
    10%  { opacity: 0.12; }
    90%  { opacity: 0.12; }
    100% { transform: translateY(-100vh) rotate(var(--rot, 0deg)); opacity: 0; }
}

/* Orbit circular */
@keyframes orbit {
    from { transform: rotate(0deg) translateX(80px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(80px) rotate(-360deg); }
}

/* Zigzag descend */
@keyframes zigzag {
    0%   { transform: translate(0, -20px); opacity: 0; }
    10%  { opacity: 0.12; }
    25%  { transform: translate(20px, 25vh); }
    50%  { transform: translate(-15px, 50vh); }
    75%  { transform: translate(20px, 75vh); }
    90%  { opacity: 0.12; }
    100% { transform: translate(-10px, 100vh); opacity: 0; }
}

/* Sway rotation */
@keyframes sway {
    0%, 100% { transform: rotate(-8deg) translateY(0); }
    50%      { transform: rotate(8deg) translateY(-12px); }
}

/* Heartbeat */
@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    15%      { transform: scale(1.2); }
    30%      { transform: scale(1); }
    45%      { transform: scale(1.15); }
    60%      { transform: scale(1); }
}

/* Slide in from left */
@keyframes slideFromLeft {
    0%, 100% { transform: translateX(-30px) rotate(var(--rot, 0deg)); opacity: 0.05; }
    50%      { transform: translateX(15px) rotate(var(--rot, 0deg)); opacity: 0.15; }
}

/* Fade float */
@keyframes fadeFloat {
    0%, 100% { opacity: 0.05; transform: translateY(0) scale(1); }
    50%      { opacity: 0.18; transform: translateY(-15px) scale(1.08); }
}

/* Bounce gentle */
@keyframes bounceGentle {
    0%, 100% { transform: translateY(0); }
    40%      { transform: translateY(-16px); }
    60%      { transform: translateY(-8px); }
}

/* Expand ring */
@keyframes expandRing {
    0%   { transform: scale(0.6); opacity: 0.2; }
    100% { transform: scale(2.5); opacity: 0; }
}


/* ===== SLIDE 0 -- INTRO: hearts float up, story circles orbit ===== */
#slide-0 .sc-heart1 { top: 70%; left: 8%;  animation: riseUp 8s cubic-bezier(0.4, 0, 0.2, 1) infinite; --rot: 15deg; }
#slide-0 .sc-heart2 { top: 80%; left: 75%; animation: riseUp 10s cubic-bezier(0.4, 0, 0.2, 1) 2s infinite; --rot: -10deg; }
#slide-0 .sc-story1 { top: 20%; left: 12%; animation: orbit 14s linear infinite; }
#slide-0 .sc-story2 { top: 60%; right: 10%; animation: orbit 18s linear 3s infinite; }
#slide-0 .sc-phone1 { top: 30%; right: 8%; animation: floatY 6s cubic-bezier(0.37, 0, 0.63, 1) infinite; }

/* ===== SLIDE 1 -- NUMBERS: notification badges bounce, grids drift ===== */
#slide-1 .sc-notif1 { top: 15%; left: 10%; animation: bounceGentle 3s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
#slide-1 .sc-notif2 { top: 25%; right: 12%; animation: bounceGentle 3.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s infinite; }
#slide-1 .sc-grid1  { bottom: 20%; left: 6%; animation: driftX 7s cubic-bezier(0.37, 0, 0.63, 1) infinite; }
#slide-1 .sc-phone1 { bottom: 15%; right: 10%; animation: floatY 5s cubic-bezier(0.37, 0, 0.63, 1) infinite; }

/* ===== SLIDE 2 -- CONTENT: frames sway, DMs fly ===== */
#slide-2 .sc-frame1 { top: 12%; left: 8%; animation: sway 5s cubic-bezier(0.37, 0, 0.63, 1) infinite; }
#slide-2 .sc-frame2 { bottom: 18%; right: 6%; animation: sway 6s cubic-bezier(0.37, 0, 0.63, 1) 1s infinite; }
#slide-2 .sc-grid1  { top: 25%; right: 10%; animation: fadeFloat 7s cubic-bezier(0.37, 0, 0.63, 1) infinite; }
#slide-2 .sc-dm1    { bottom: 25%; left: 15%; animation: slideFromLeft 6s cubic-bezier(0.37, 0, 0.63, 1) infinite; --rot: -20deg; }
#slide-2 .sc-heart1 { top: 60%; right: 15%; animation: heartbeat 2.5s cubic-bezier(0.37, 0, 0.63, 1) infinite; }

/* ===== SLIDE 3 -- STORY ADDICTION: rings pulse, phone floats ===== */
/* (animations defined inline on .sa-ring1/2/3 and .sa-phone above) */

/* ===== SLIDE 4 -- REELS: reel icons spin, comments float ===== */
#slide-4 .sc-reel1    { top: 15%; left: 7%;  animation: spinSlow 12s linear infinite; }
#slide-4 .sc-reel2    { bottom: 20%; right: 8%; animation: spinSlow 16s linear 2s infinite; }
#slide-4 .sc-comment1 { top: 35%; right: 10%; animation: floatDiag 6s cubic-bezier(0.37, 0, 0.63, 1) infinite; }
#slide-4 .sc-heart1   { bottom: 30%; left: 12%; animation: heartbeat 3s cubic-bezier(0.37, 0, 0.63, 1) infinite; }

/* ===== SLIDE 5 -- RATIO: story circles expand, DMs drift ===== */
#slide-5 .sc-story1 { top: 20%; left: 10%; animation: expandRing 4s cubic-bezier(0.37, 0, 0.63, 1) infinite; }
#slide-5 .sc-story2 { bottom: 25%; right: 12%; animation: expandRing 5s cubic-bezier(0.37, 0, 0.63, 1) 1.5s infinite; }
#slide-5 .sc-dm1    { top: 40%; right: 6%; animation: driftX 7s cubic-bezier(0.37, 0, 0.63, 1) infinite; --rot: 10deg; }
#slide-5 .sc-notif1 { bottom: 15%; left: 8%; animation: pulse 3s cubic-bezier(0.37, 0, 0.63, 1) infinite; }

/* ===== SLIDE 6 -- EXPLORE PAGE: grid tiles handled by .ep-* styles above ===== */

/* ===== SLIDE 7 -- ENGAGEMENT: hearts rise, comments zigzag ===== */
#slide-7 .sc-heart1   { top: 80%; left: 15%; animation: riseUp 9s cubic-bezier(0.4, 0, 0.2, 1) infinite; --rot: 12deg; }
#slide-7 .sc-heart2   { top: 85%; right: 20%; animation: riseUp 11s cubic-bezier(0.4, 0, 0.2, 1) 1.5s infinite; --rot: -8deg; }
#slide-7 .sc-comment1 { top: 0; left: 30%; animation: zigzag 10s cubic-bezier(0.37, 0, 0.63, 1) infinite; }
#slide-7 .sc-notif1   { top: 18%; right: 10%; animation: bounceGentle 3s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
#slide-7 .sc-dm1      { bottom: 20%; left: 5%; animation: floatDiag 6s cubic-bezier(0.37, 0, 0.63, 1) infinite; --rot: -15deg; }

/* ===== SLIDE 8 -- GUILTY: phones float, frames sway ===== */
#slide-8 .sc-phone1  { top: 12%; right: 8%; animation: floatY 6s cubic-bezier(0.37, 0, 0.63, 1) infinite; }
#slide-8 .sc-phone2  { bottom: 18%; left: 6%; animation: floatY 7s cubic-bezier(0.37, 0, 0.63, 1) 1s infinite; }
#slide-8 .sc-heart1  { top: 50%; left: 10%; animation: heartbeat 3s cubic-bezier(0.37, 0, 0.63, 1) infinite; }
#slide-8 .sc-frame1  { top: 25%; left: 15%; animation: sway 5.5s cubic-bezier(0.37, 0, 0.63, 1) infinite; }
#slide-8 .sc-comment1 { bottom: 28%; right: 12%; animation: fadeFloat 6s cubic-bezier(0.37, 0, 0.63, 1) infinite; }

/* ===== SLIDE 9 -- FOLLOWER REALITY: ghosts handled by .fr-* styles above ===== */

/* ===== SLIDE 10 -- SCREEN TIME: grids zigzag, notifs pulse ===== */
#slide-10 .sc-grid1  { top: 0; left: 20%; animation: zigzag 12s cubic-bezier(0.37, 0, 0.63, 1) infinite; }
#slide-10 .sc-grid2  { top: 0; right: 25%; animation: zigzag 14s cubic-bezier(0.37, 0, 0.63, 1) 3s infinite; }
#slide-10 .sc-notif1 { top: 18%; left: 8%; animation: pulse 2.5s cubic-bezier(0.37, 0, 0.63, 1) infinite; }
#slide-10 .sc-notif2 { bottom: 20%; right: 10%; animation: pulse 3s cubic-bezier(0.37, 0, 0.63, 1) 1s infinite; }
#slide-10 .sc-phone1 { top: 40%; right: 5%; animation: floatY 7s cubic-bezier(0.37, 0, 0.63, 1) infinite; }

/* ===== SLIDE 11 -- TIME EQUIVALENTS: shapes handled by .te-* styles above ===== */

/* ===== SLIDE 12 -- ADDICTION: phone floats, heart beats, story orbits ===== */
#slide-12 .sc-phone1 { top: 12%; right: 8%; animation: floatY 6s cubic-bezier(0.37, 0, 0.63, 1) infinite; }
#slide-12 .sc-heart1 { bottom: 22%; left: 10%; animation: heartbeat 3s cubic-bezier(0.37, 0, 0.63, 1) infinite; }
#slide-12 .sc-notif1 { top: 20%; left: 8%; animation: bounceGentle 3s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
#slide-12 .sc-story1 { bottom: 18%; right: 10%; animation: orbit 16s linear infinite; }

/* ===== SLIDE 13 -- PERSONA: all shapes celebrate, orbit, float ===== */
#slide-13 .sc-heart1  { top: 10%; left: 10%; animation: riseUp 8s cubic-bezier(0.4, 0, 0.2, 1) infinite; --rot: 20deg; }
#slide-13 .sc-story1  { top: 15%; right: 10%; animation: orbit 16s linear infinite; }
#slide-13 .sc-frame1  { bottom: 20%; left: 8%; animation: sway 5s cubic-bezier(0.37, 0, 0.63, 1) infinite; }
#slide-13 .sc-reel1   { bottom: 30%; right: 8%; animation: spinSlow 14s linear infinite; }
#slide-13 .sc-dm1     { top: 50%; left: 5%; animation: slideFromLeft 7s cubic-bezier(0.37, 0, 0.63, 1) infinite; --rot: -12deg; }


/* ===== D) STANDARD ENTRANCE & LAYOUT ===== */

.s-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 400px;
}

.s-watermark {
    position: absolute;
    bottom: 1.2rem;
    right: 1.5rem;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.25);
    z-index: 2;
}

.s-eyebrow {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 5px;
    color: rgba(255,255,255,0.7);
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

.s-big-num {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(3.5rem, 14vw, 7rem);
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.s-caption {
    font-size: 1rem;
    color: rgba(255,255,255,0.8);
    margin-top: 0.5rem;
}

.s-roast {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.85);
    margin-top: 1.5rem;
    max-width: 320px;
    line-height: 1.5;
    font-style: italic;
    background: rgba(0,0,0,0.2);
    padding: 0.8rem 1.2rem;
    border-radius: 12px;
    backdrop-filter: blur(10px);
}

.s-next {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,0.15);
    border: 2px solid rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.9);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.6rem 1.8rem;
    border-radius: 50px;
    transition: all 0.3s;
    z-index: 10;
    font-family: 'Space Grotesk', sans-serif;
}
.s-next:hover {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.5);
}

.s-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2.5rem, 10vw, 4rem);
    font-weight: 700;
    margin-bottom: 1rem;
}

/* ===== SLIDE PROGRESS DOTS ===== */
.slide-progress {
    position: fixed;
    bottom: 1.2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
    z-index: 100;
    opacity: 0;
    transition: opacity 0.3s;
}
.slide-progress.visible {
    opacity: 1;
}

.slide-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    transition: all 0.3s;
}
.slide-dot.active {
    background: #fff;
    width: 22px;
    border-radius: 3px;
}

/* ===== SLIDE ENTRANCE ANIMATIONS ===== */
.slide.active {
    animation: slideEnter 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.slide.active .anim-in {
    animation: slideInUp 0.6s ease both;
}

.d1 { animation-delay: 0.1s !important; opacity: 0; }
.d2 { animation-delay: 0.35s !important; opacity: 0; }
.d3 { animation-delay: 0.6s !important; opacity: 0; }
.d4 { animation-delay: 0.85s !important; opacity: 0; }
.d5 { animation-delay: 1.1s !important; opacity: 0; }
.d6 { animation-delay: 1.35s !important; opacity: 0; }

.slide.active .d1,
.slide.active .d2,
.slide.active .d3,
.slide.active .d4,
.slide.active .d5,
.slide.active .d6 {
    animation-fill-mode: both;
}

/* ===== MOBILE ===== */
@media (max-width: 480px) {
    .s-big-num { font-size: clamp(3rem, 12vw, 5rem); }
    .s-next { bottom: 2.5rem; }
    .s-split { flex-direction: column; }
    .meter-bar-wrap { max-width: 260px; }

    /* Phone shapes */
    .sh-phone { width: 85px; height: 135px; border-radius: 20px; }
    .sh-phone::after { top: 10px; width: 22px; height: 22px; }
    .sa-phone { width: 85px; height: 135px; border-radius: 20px; }
    .sa-phone::after { top: 10px; width: 22px; height: 22px; }

    /* Story rings */
    .sh-story { width: 90px; height: 90px; padding: 4px; }
    .sa-ring1 { width: 118px; height: 118px; }
    .sa-ring2 { width: 84px; height: 84px; }
    .sa-ring3 { width: 100px; height: 100px; }

    /* Photo frames */
    .sh-frame { width: 75px; height: 75px; }
    .sh-frame::after { bottom: -12px; width: 34px; height: 4px; }

    /* Comment bubbles */
    .sh-comment { width: 85px; height: 60px; border-radius: 30px; }
    .sh-comment::after { bottom: -12px; left: 15px; border-top: 16px solid rgba(255,255,255,0.1); }

    /* DM airplane */
    .sh-dm { border-left: 38px solid rgba(255,255,255,0.12); border-top: 24px solid transparent; border-bottom: 24px solid transparent; }
    .sh-dm::after { top: -7px; left: -38px; border-left: 38px solid transparent; border-bottom: 17px solid rgba(255,255,255,0.08); }

    /* Reel icon */
    .sh-reel { width: 80px; height: 80px; border-radius: 20px; }
    .sh-reel::after { border-left: 24px solid rgba(255,255,255,0.15); border-top: 15px solid transparent; border-bottom: 15px solid transparent; }

    /* Notification badges */
    .sh-notif { width: 45px; height: 45px; font-size: 1rem; }

    /* Hearts */
    .sh-heart { width: 50px; height: 47px; }
    .sh-heart::before, .sh-heart::after { width: 25px; height: 40px; border-radius: 25px 25px 0 0; }
    .sh-heart::after { left: 25px; }

    /* Grid squares */
    .sh-grid { grid-template-columns: repeat(3, 20px); grid-template-rows: repeat(3, 20px); gap: 4px; }
    .sh-grid::before, .sh-grid::after { width: 20px; height: 20px; }
    .sh-grid-cell { width: 20px; height: 20px; }

    /* Explore grid tiles */
    .ep-grid { grid-template-columns: repeat(3, 90px); grid-template-rows: repeat(3, 90px); gap: 10px; }
    .ep-tile { width: 90px; height: 90px; border-radius: 10px; }

    /* Follower ghosts */
    .fr-ghost { width: 50px; height: 68px; }
    .fr-heart-counter { width: 68px; height: 64px; }
    .fr-heart-counter::before, .fr-heart-counter::after { width: 34px; height: 54px; border-radius: 34px 34px 0 0; }
    .fr-heart-counter::after { left: 34px; }

    /* Time equivalents shapes */
    .te-book { width: 50px; height: 70px; }
    .te-film { width: 74px; height: 54px; }
    .te-book2 { width: 44px; height: 64px; }

    /* Persona glow */
    .persona-glow { width: 80vw; height: 80vw; }
}

/* ===== SMALL MOBILE ===== */
@media (max-width: 360px) {
    /* Phone shapes */
    .sh-phone { width: 64px; height: 102px; border-radius: 15px; }
    .sh-phone::after { top: 8px; width: 16px; height: 16px; }
    .sa-phone { width: 64px; height: 102px; border-radius: 15px; }
    .sa-phone::after { top: 8px; width: 16px; height: 16px; }

    /* Story rings */
    .sh-story { width: 68px; height: 68px; padding: 3px; }
    .sa-ring1 { width: 88px; height: 88px; }
    .sa-ring2 { width: 63px; height: 63px; }
    .sa-ring3 { width: 75px; height: 75px; }

    /* Photo frames */
    .sh-frame { width: 56px; height: 56px; }

    /* Comment bubbles */
    .sh-comment { width: 64px; height: 45px; border-radius: 22px; }

    /* DM airplane */
    .sh-dm { border-left: 28px solid rgba(255,255,255,0.12); border-top: 18px solid transparent; border-bottom: 18px solid transparent; }

    /* Reel icon */
    .sh-reel { width: 60px; height: 60px; border-radius: 15px; }

    /* Notification badges */
    .sh-notif { width: 34px; height: 34px; font-size: 0.8rem; }

    /* Hearts */
    .sh-heart { width: 38px; height: 35px; }
    .sh-heart::before, .sh-heart::after { width: 19px; height: 30px; border-radius: 19px 19px 0 0; }
    .sh-heart::after { left: 19px; }

    /* Grid squares */
    .sh-grid { grid-template-columns: repeat(3, 15px); grid-template-rows: repeat(3, 15px); gap: 3px; }
    .sh-grid::before, .sh-grid::after { width: 15px; height: 15px; }
    .sh-grid-cell { width: 15px; height: 15px; }

    /* Explore grid tiles */
    .ep-grid { grid-template-columns: repeat(3, 68px); grid-template-rows: repeat(3, 68px); gap: 7px; }
    .ep-tile { width: 68px; height: 68px; border-radius: 8px; }

    /* Follower ghosts */
    .fr-ghost { width: 38px; height: 51px; }
    .fr-heart-counter { width: 51px; height: 48px; }

    /* Time equivalents shapes */
    .te-book { width: 38px; height: 52px; }
    .te-film { width: 56px; height: 40px; }
    .te-book2 { width: 33px; height: 48px; }

    /* Persona glow */
    .persona-glow { width: 70vw; height: 70vw; }
}