/* ========================================================================
   PLAYBOOK PAGE — Editorial Mini-Book Design
   ======================================================================== */

:root {
    --pb-font-editorial: 'Caveat', cursive;
    --pb-font-body: 'Quicksand', sans-serif;
    --pb-reading-width: 65ch;
    --pb-warm-bg: #faf8f5;
    --pb-warm-bg-alt: #f4f0eb;
    --pb-accent: var(--color-primary, #4f46e5);
    --pb-ink: var(--color-ink, #1e1e2f);
    --pb-muted: var(--color-muted, #6b7280);
}


/* CONTENT INNER BORDERS */

.playbook-cover .content-inner,
.playbook-chapter .content-inner {
    border-right: 1px solid rgba(0, 0, 0, 0.05);
}


/* COVER SECTION */

.playbook-cover {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
}

.playbook-cover .playbook-cover__logo {
    width: 75px;
}

.playbook-cover .playbook-cover__rule {
    width: 200px;
    height: 0px;
    background: var(--color-secondary);
    color: var(--color-secondary);
    border-top: 1px dashed;
    margin: 25px auto;
    border-radius: 100px;
    opacity: .1;
}

.playbook-cover .playbook-cover__title {
    font-family: 'Caveat', cursive;
    font-size: 96px;
    font-weight: 400;
    color: var(--color-primary);
    line-height: 1;
    margin: 0;
    text-transform: lowercase;
    margin-top: -25px;
}

.playbook-cover .playbook-cover__intro {
    font-family: var(--pb-font-body);
    font-size: 18px;
    line-height: 1.75;
    color: var(--pb-ink);
    margin: 0 auto;
}

.playbook-cover .playbook-cover__extractable {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.playbook-cover .playbook-cover__author {
    font-family: var(--pb-font-body);
    font-size: 14px;
    font-weight: 200;
    letter-spacing: 2px;
    color: grey;
    margin: 0;
}


/* CHAPTER SECTION */

.playbook-chapter {
    position: relative;
    padding: 0 0 200px 0;
    overflow: visible;
    z-index: 1;
}

.playbook-chapter--warm {
    background: var(--pb-warm-bg);
}

.playbook-chapter--white {
    background: #ffffff;
}

.playbook-chapter--white::before {
    content: "";
    position: absolute;
    top: -79px;
    left: 0;
    width: 100%;
    height: 80px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C300,80 900,0 1440,60 L1440,80 L0,80 Z' fill='%23ffffff'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 2;
}

.playbook-chapter--warm::before {
    content: "";
    position: absolute;
    top: -79px;
    left: 0;
    width: 100%;
    height: 80px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C300,80 900,0 1440,60 L1440,80 L0,80 Z' fill='%23faf8f5'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 2;
}

.playbook-chapter .content-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    align-items: start;
}

.playbook-chapter .playbook-chapter__text {
    flex: 1 1 100%;
    position: relative;
}

.playbook-chapter .playbook-chapter__image {
    flex: 1 1 100%;
}


/* VISUAL COLUMN WRAPPER */

.playbook-chapter .playbook-chapter__visual {
    flex: 1 1 100%;
}

.playbook-chapter .playbook-chapter__visual .playbook-chapter__legend {
    font-family: var(--pb-font-body);
    font-size: 13px;
    font-style: italic;
    line-height: 1.6;
    color: var(--pb-muted);
    margin: 10px 0 0 0;
    max-width: 500px;
}

.playbook-chapter .playbook-chapter__visual:has(.playbook-anim--prompt-engineering) {
    align-self: stretch;
}

.playbook-chapter .playbook-chapter__visual .playbook-chapter__image.playbook-anim--prompt-engineering {
    height: 100%;
}


.playbook-chapter .playbook-chapter__number {
    font-family: var(--pb-font-editorial);
    font-size: 80px;
    font-weight: 700;
    color: var(--pb-accent);
    opacity: 0.06;
    line-height: 1;
    margin: 0 0 -25px 0;
    user-select: none;
}

.playbook-chapter .playbook-chapter__title {
    font-family: 'Caveat', cursive;
    font-size: 38px;
    font-weight: 700;
    color: var(--pb-ink);
    line-height: 1.2;
    margin: 0 0 25px 0;
}

.playbook-chapter .playbook-chapter__body {
    font-family: var(--pb-font-body);
    font-size: 18px;
    line-height: 1.75;
    color: var(--pb-ink);
    max-width: var(--pb-reading-width);
}

.playbook-chapter .playbook-chapter__body p {
    margin: 0 0 25px 0;
}

.playbook-chapter .playbook-chapter__body p:last-child {
    margin-bottom: 0;
}


/* DROP CAP */

.playbook-chapter .playbook-chapter__body p:first-child::first-letter {
    font-family: var(--pb-font-editorial);
    font-size: 72px;
    float: left;
    line-height: 0.8;
    padding-right: 10px;
    padding-top: 6px;
    color: var(--pb-accent);
    font-weight: 700;
}


/* PULL QUOTE */

.playbook-chapter .playbook-chapter__pullquote {
    font-family: var(--pb-font-editorial);
    font-style: italic;
    font-size: 24px;
    line-height: 1.5;
    color: var(--pb-accent);
    padding: 10px 0 10px 25px;
    margin: 25px 0;
    max-width: var(--pb-reading-width);
}


/* IMAGE PLACEHOLDER */

.playbook-chapter .playbook-chapter__image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 10;
    border: 2px dashed var(--pb-muted);
    border-radius: 10px;
    background: var(--pb-warm-bg-alt);
    opacity: 0.7;
}

.playbook-chapter .playbook-chapter__image svg {
    width: 48px;
    height: 48px;
    color: var(--pb-muted);
    margin-bottom: 10px;
}

.playbook-chapter .playbook-chapter__image-label {
    font-family: var(--pb-font-body);
    font-size: 13px;
    color: var(--pb-muted);
    letter-spacing: 1px;
}


/* RESPONSIVE — TABLET+ (768px) */

@media (min-width: 768px) {

    .playbook-chapter .playbook-chapter__number {
        font-size: 100px;
    }

    .playbook-chapter .playbook-chapter__title {
        font-size: 48px;
    }

    .playbook-chapter .playbook-chapter__text {
        flex: 1 1 0;
    }

    .playbook-chapter .playbook-chapter__image {
        flex: 1 1 0;
        position: sticky;
        top: 50px;
    }

    .playbook-chapter .playbook-chapter__visual {
        flex: 1 1 0;
    }

    .playbook-chapter--text-right .content-inner {
        flex-direction: row-reverse;
    }

    .playbook-chapter .playbook-chapter__pullquote {
        font-size: 28px;
    }

}


/* RESPONSIVE — DESKTOP (1024px) */

@media (min-width: 1024px) {

    .playbook-chapter {
        padding: 0 0 200px 0;
    }

    .playbook-chapter .playbook-chapter__number {
        font-size: 120px;
    }

    .playbook-chapter .playbook-chapter__title {
        font-size: 58px;
    }

    .playbook-chapter .playbook-chapter__pullquote {
        font-size: 32px;
    }

}


/* CHAPTER 01 — OVERRIDES */

#chapter-01.playbook-chapter .content-inner {
    flex-wrap: nowrap;
    align-items: center;
}

#chapter-01 .playbook-chapter__visual {
    flex: unset;
}

@media (min-width: 768px) {

    #chapter-01 .playbook-chapter__image {
        position: static;
    }

    #chapter-01 .playbook-chapter__image.playbook-anim {
        position: static;
    }

    #chapter-01 .playbook-chapter__visual {
        flex: unset;
    }

}

@media (max-width: 639px) {

    #chapter-01 .content-inner {
        flex-direction: column;
    }

}


/* RESPONSIVE — MOBILE (639px) */

@media (max-width: 639px) {

    .playbook-cover .playbook-cover__title {
        font-size: 96px;
    }

    .playbook-chapter--white::before,
    .playbook-chapter--warm::before {
        height: 50px;
        top: -49px;
    }

}


/* ========================================================================
   PLAYBOOK ANIMATIONS
   Each chapter can have a unique CSS animation in the image column.
   To add a new animation: set AnimationId in the controller, then add a
   .playbook-anim--{id} CSS block below. The 8 .pb-el child divs + their
   ::before/::after pseudo-elements give you 27 visual elements to work with.
   ======================================================================== */


/* BASE — OVERRIDE PLACEHOLDER STYLES WHEN ANIMATION IS PRESENT */

.playbook-chapter .playbook-chapter__image.playbook-anim {
    display: block;
    border: none;
    background: none;
    opacity: 1;
    position: relative;
    overflow: visible;
    z-index: 10;
}

.playbook-anim .pb-el {
    position: absolute;
    pointer-events: none;
}


/* STICKY RESTORE AT TABLET+ */

@media (min-width: 768px) {

    .playbook-chapter .playbook-chapter__image.playbook-anim {
        position: sticky;
        top: 50px;
    }

}


/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {

    .playbook-anim,
    .playbook-anim::before,
    .playbook-anim::after,
    .playbook-anim .pb-el,
    .playbook-anim .pb-el::before,
    .playbook-anim .pb-el::after,
    .playbook-anim .pb-el img {
        animation-duration: 0s !important;
        animation-delay: 0s !important;
    }

}


/* ========================================================================
   01 — PROMPT ENGINEERING
   Floating constellation of brand marks across three depth layers.
   Far logos are tiny + blurred (depth-of-field), mid are medium,
   near are larger with gentle movement.  Prime-number durations
   ensure nothing ever synchronises — perpetually organic.
   ======================================================================== */


/* SCENE */

.playbook-chapter .playbook-chapter__image.playbook-anim--prompt-engineering {
    background: none;
    border-radius: 10px;
    aspect-ratio: unset;
    min-height: 300px;
    align-self: stretch;
}


/* ALL LOGOS — SHARED BASE */

.playbook-anim--prompt-engineering .pb-el {
    background-image: url("https://console.eesier.com.br/img/logo.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    aspect-ratio: 1;
}


/* FAR LAYER — tiny, faint, soft focus (depth-of-field) */

.playbook-anim--prompt-engineering .pb-el:nth-child(1)  { width: 6%;  top: 2%;  left: 90%; opacity: 0.04;  filter: blur(0.75px); animation: pb-pe-far 19s ease-in-out infinite; }

.playbook-anim--prompt-engineering .pb-el:nth-child(2)  { width: 5%;  top: 38%; left: 1%;  opacity: 0.035; filter: blur(1px);    animation: pb-pe-far 23s ease-in-out 4s infinite; }

.playbook-anim--prompt-engineering .pb-el:nth-child(3)  { width: 7%;  top: 80%; left: 48%; opacity: 0.04;  filter: blur(0.75px); animation: pb-pe-far 21s ease-in-out 9s infinite; }

.playbook-anim--prompt-engineering .pb-el:nth-child(4)  { width: 5%;  top: 58%; left: 93%; opacity: 0.035; filter: blur(1px);    animation: pb-pe-far 29s ease-in-out 13s infinite; }

.playbook-anim--prompt-engineering .pb-el:nth-child(5)  { width: 6%;  top: 12%; left: 45%; opacity: 0.04;  filter: blur(0.75px); animation: pb-pe-far 17s ease-in-out 7s infinite; }


/* MID LAYER — medium presence, moderate movement */

.playbook-anim--prompt-engineering .pb-el:nth-child(6)  { width: 11%; top: 5%;  left: 18%; opacity: 0.06;  animation: pb-pe-mid-a 13s ease-in-out infinite; }

.playbook-anim--prompt-engineering .pb-el:nth-child(7)  { width: 10%; top: 28%; left: 72%; opacity: 0.055; animation: pb-pe-mid-b 17s ease-in-out 3s infinite; }

.playbook-anim--prompt-engineering .pb-el:nth-child(8)  { width: 12%; top: 55%; left: 38%; opacity: 0.05;  animation: pb-pe-mid-a 14s ease-in-out 8s infinite; }

.playbook-anim--prompt-engineering .pb-el:nth-child(9)  { width: 9%;  top: 72%; left: 6%;  opacity: 0.06;  animation: pb-pe-mid-b 19s ease-in-out 5s infinite; }

.playbook-anim--prompt-engineering .pb-el:nth-child(10) { width: 11%; top: 44%; left: 85%; opacity: 0.05;  animation: pb-pe-mid-a 16s ease-in-out 11s infinite; }


/* NEAR LAYER — larger, prominent, slow & gentle */

.playbook-anim--prompt-engineering .pb-el:nth-child(11) { width: 20%; top: -3%; left: 2%;  opacity: 0.08;  animation: pb-pe-near 23s ease-in-out infinite; }

.playbook-anim--prompt-engineering .pb-el:nth-child(12) { width: 16%; top: 15%; left: 62%; opacity: 0.075; animation: pb-pe-near 26s ease-in-out 5s infinite; }

.playbook-anim--prompt-engineering .pb-el:nth-child(13) { width: 22%; top: 38%; left: 14%; opacity: 0.07;  animation: pb-pe-near 21s ease-in-out 3s infinite; }

.playbook-anim--prompt-engineering .pb-el:nth-child(14) { width: 15%; top: 62%; left: 58%; opacity: 0.08;  animation: pb-pe-near 29s ease-in-out 9s infinite; }

.playbook-anim--prompt-engineering .pb-el:nth-child(15) { width: 18%; top: 78%; left: 28%; opacity: 0.075; animation: pb-pe-near 24s ease-in-out 12s infinite; }

.playbook-anim--prompt-engineering .pb-el:nth-child(16) { width: 17%; top: 84%; left: 74%; opacity: 0.07;  animation: pb-pe-near 19s ease-in-out 7s infinite; }


/* KEYFRAMES — FAR: wide wandering drift, scale breathing */

@keyframes pb-pe-far {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    20% { transform: translate(60px, -45px) rotate(8deg) scale(1.06); }
    40% { transform: translate(-40px, -80px) rotate(-5deg) scale(0.94); }
    60% { transform: translate(-70px, 30px) rotate(10deg) scale(1.05); }
    80% { transform: translate(50px, 55px) rotate(-7deg) scale(0.95); }
}


/* KEYFRAMES — MID-A: orbiting drift with rotation */

@keyframes pb-pe-mid-a {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    25% { transform: translate(40px, -35px) rotate(6deg) scale(1.04); }
    50% { transform: translate(-30px, -55px) rotate(-5deg) scale(0.96); }
    75% { transform: translate(-45px, 20px) rotate(3deg) scale(1.03); }
}


/* KEYFRAMES — MID-B: counter-orbit, different rhythm */

@keyframes pb-pe-mid-b {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    30% { transform: translate(-45px, -40px) rotate(-6deg) scale(1.03); }
    60% { transform: translate(35px, -25px) rotate(5deg) scale(0.97); }
    85% { transform: translate(20px, 50px) rotate(-3deg) scale(1.02); }
}


/* KEYFRAMES — NEAR: gentle but visible drift */

@keyframes pb-pe-near {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    33% { transform: translate(20px, -18px) rotate(3deg) scale(1.025); }
    66% { transform: translate(-15px, -30px) rotate(-2deg) scale(0.975); }
}


/* ========================================================================
   STACKED CARDS — Reusable
   Phone-shaped 9:16 cards arranged in a diagonal spread.
   Layout auto-adjusts based on the data-cards attribute (1–8).
   Usage: set AnimationId = "stacked-cards" and CardCount on any chapter.
   ======================================================================== */


/* SCENE */

.playbook-chapter .playbook-chapter__image.playbook-anim--stacked-cards {
    background: none;
    border-radius: 0;
    aspect-ratio: unset;
    min-height: 500px;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ALL CARDS — SHARED BASE (hidden by default) */

.playbook-anim--stacked-cards .pb-el {
    width: 160px;
    aspect-ratio: 9 / 16;
    border-radius: 10px;
    background: var(--pb-warm-bg-alt);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.08);
    position: absolute;
    display: none;
    overflow: hidden;
}


/* CARD IMAGES */

.playbook-anim--stacked-cards .pb-el img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    transition: opacity 0.5s ease;
}

.playbook-anim--stacked-cards .pb-el img.pb-swapping {
    opacity: 0;
}


/* PAN ANIMATION — slowly reveals full image content for non-9:16 images */

.playbook-anim--stacked-cards .pb-el img.pb-pan-h {
    animation: pb-pan-h 15s ease-in-out infinite;
}

.playbook-anim--stacked-cards .pb-el img.pb-pan-v {
    animation: pb-pan-v 12s ease-in-out infinite;
}

@keyframes pb-pan-h {
    0%, 100% { object-position: left center; }
    50% { object-position: right center; }
}

@keyframes pb-pan-v {
    0%, 100% { object-position: center top; }
    50% { object-position: center bottom; }
}


/* INNER LINES — fake message content (hidden when image is present) */

.playbook-anim--stacked-cards .pb-el::before {
    content: "";
    position: absolute;
    top: 25px;
    left: 25px;
    right: 25px;
    height: 10px;
    border-radius: 10px;
    background: var(--pb-accent);
    opacity: 0.1;
}

.playbook-anim--stacked-cards .pb-el::after {
    content: "";
    position: absolute;
    top: 50px;
    left: 25px;
    width: 60%;
    height: 10px;
    border-radius: 10px;
    background: var(--pb-accent);
    opacity: 0.06;
}

.playbook-anim--stacked-cards .pb-el:has(img)::before,
.playbook-anim--stacked-cards .pb-el:has(img)::after {
    display: none;
}


/* 1 CARD — single centered */

.playbook-anim--stacked-cards[data-cards="1"] .pb-el:nth-child(1) {
    display: block;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 1;
    opacity: 1;
    animation: pb-pm-center 8s ease-in-out infinite;
}


/* 2 CARDS — diagonal pair */

.playbook-anim--stacked-cards[data-cards="2"] .pb-el:nth-child(1) {
    display: block;
    left: 15%;
    top: 10%;
    z-index: 1;
    opacity: 1;
    animation: pb-pm-left 8s ease-in-out infinite;
}

.playbook-anim--stacked-cards[data-cards="2"] .pb-el:nth-child(2) {
    display: block;
    right: 15%;
    bottom: 10%;
    z-index: 2;
    opacity: 1;
    animation: pb-pm-right 8s ease-in-out 0.5s infinite;
}


/* 3 CARDS — diagonal spread */

.playbook-anim--stacked-cards[data-cards="3"] .pb-el:nth-child(1) {
    display: block;
    left: 5%;
    top: -10%;
    z-index: 1;
    opacity: 1;
    animation: pb-pm-left 8s ease-in-out infinite;
}

.playbook-anim--stacked-cards[data-cards="3"] .pb-el:nth-child(2) {
    display: block;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 3;
    opacity: 1;
    animation: pb-pm-center 8s ease-in-out 0.5s infinite;
}

.playbook-anim--stacked-cards[data-cards="3"] .pb-el:nth-child(3) {
    display: block;
    right: 5%;
    bottom: -10%;
    z-index: 2;
    opacity: 1;
    animation: pb-pm-right 8s ease-in-out 1s infinite;
}


/* 4 CARDS — cascading diagonal */

.playbook-anim--stacked-cards[data-cards="4"] .pb-el:nth-child(1) {
    display: block;
    left: 2%;
    top: -5%;
    z-index: 1;
    opacity: 1;
    animation: pb-pm-left 8s ease-in-out infinite;
}

.playbook-anim--stacked-cards[data-cards="4"] .pb-el:nth-child(2) {
    display: block;
    left: 20%;
    top: 18%;
    z-index: 2;
    opacity: 1;
    animation: pb-pm-left 8s ease-in-out 0.3s infinite;
}

.playbook-anim--stacked-cards[data-cards="4"] .pb-el:nth-child(3) {
    display: block;
    right: 20%;
    bottom: 18%;
    z-index: 3;
    opacity: 1;
    animation: pb-pm-right 8s ease-in-out 0.6s infinite;
}

.playbook-anim--stacked-cards[data-cards="4"] .pb-el:nth-child(4) {
    display: block;
    right: 2%;
    bottom: -5%;
    z-index: 4;
    opacity: 1;
    animation: pb-pm-right 8s ease-in-out 0.9s infinite;
}


/* 5 CARDS — fan spread */

.playbook-anim--stacked-cards[data-cards="5"] .pb-el:nth-child(1) {
    display: block;
    left: 0;
    top: -5%;
    z-index: 1;
    opacity: 1;
    animation: pb-pm-left 8s ease-in-out infinite;
}

.playbook-anim--stacked-cards[data-cards="5"] .pb-el:nth-child(2) {
    display: block;
    left: 12%;
    top: 12%;
    z-index: 2;
    opacity: 1;
    animation: pb-pm-left 8s ease-in-out 0.3s infinite;
}

.playbook-anim--stacked-cards[data-cards="5"] .pb-el:nth-child(3) {
    display: block;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 3;
    opacity: 1;
    animation: pb-pm-center 8s ease-in-out 0.6s infinite;
}

.playbook-anim--stacked-cards[data-cards="5"] .pb-el:nth-child(4) {
    display: block;
    right: 12%;
    bottom: 12%;
    z-index: 4;
    opacity: 1;
    animation: pb-pm-right 8s ease-in-out 0.9s infinite;
}

.playbook-anim--stacked-cards[data-cards="5"] .pb-el:nth-child(5) {
    display: block;
    right: 0;
    bottom: -5%;
    z-index: 5;
    opacity: 1;
    animation: pb-pm-right 8s ease-in-out 1.2s infinite;
}


/* 6 CARDS — cascading diagonal */

.playbook-anim--stacked-cards[data-cards="6"] .pb-el:nth-child(1) {
    display: block;
    left: 0;
    top: -5%;
    z-index: 1;
    opacity: 1;
    animation: pb-pm-left 8s ease-in-out infinite;
}

.playbook-anim--stacked-cards[data-cards="6"] .pb-el:nth-child(2) {
    display: block;
    left: 14%;
    top: 10%;
    z-index: 2;
    opacity: 1;
    animation: pb-pm-left 8s ease-in-out 0.3s infinite;
}

.playbook-anim--stacked-cards[data-cards="6"] .pb-el:nth-child(3) {
    display: block;
    left: 30%;
    top: 22%;
    z-index: 3;
    opacity: 1;
    animation: pb-pm-left 8s ease-in-out 0.6s infinite;
}

.playbook-anim--stacked-cards[data-cards="6"] .pb-el:nth-child(4) {
    display: block;
    right: 30%;
    bottom: 22%;
    z-index: 4;
    opacity: 1;
    animation: pb-pm-right 8s ease-in-out 0.9s infinite;
}

.playbook-anim--stacked-cards[data-cards="6"] .pb-el:nth-child(5) {
    display: block;
    right: 14%;
    bottom: 10%;
    z-index: 5;
    opacity: 1;
    animation: pb-pm-right 8s ease-in-out 1.2s infinite;
}

.playbook-anim--stacked-cards[data-cards="6"] .pb-el:nth-child(6) {
    display: block;
    right: 0;
    bottom: -5%;
    z-index: 6;
    opacity: 1;
    animation: pb-pm-right 8s ease-in-out 1.5s infinite;
}


/* 7 CARDS — wide diagonal */

.playbook-anim--stacked-cards[data-cards="7"] .pb-el:nth-child(1) {
    display: block;
    left: 0;
    top: -5%;
    z-index: 1;
    opacity: 1;
    animation: pb-pm-left 8s ease-in-out infinite;
}

.playbook-anim--stacked-cards[data-cards="7"] .pb-el:nth-child(2) {
    display: block;
    left: 10%;
    top: 6%;
    z-index: 2;
    opacity: 1;
    animation: pb-pm-left 8s ease-in-out 0.25s infinite;
}

.playbook-anim--stacked-cards[data-cards="7"] .pb-el:nth-child(3) {
    display: block;
    left: 22%;
    top: 17%;
    z-index: 3;
    opacity: 1;
    animation: pb-pm-left 8s ease-in-out 0.5s infinite;
}

.playbook-anim--stacked-cards[data-cards="7"] .pb-el:nth-child(4) {
    display: block;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 4;
    opacity: 1;
    animation: pb-pm-center 8s ease-in-out 0.75s infinite;
}

.playbook-anim--stacked-cards[data-cards="7"] .pb-el:nth-child(5) {
    display: block;
    right: 22%;
    bottom: 17%;
    z-index: 5;
    opacity: 1;
    animation: pb-pm-right 8s ease-in-out 1s infinite;
}

.playbook-anim--stacked-cards[data-cards="7"] .pb-el:nth-child(6) {
    display: block;
    right: 10%;
    bottom: 6%;
    z-index: 6;
    opacity: 1;
    animation: pb-pm-right 8s ease-in-out 1.25s infinite;
}

.playbook-anim--stacked-cards[data-cards="7"] .pb-el:nth-child(7) {
    display: block;
    right: 0;
    bottom: -5%;
    z-index: 7;
    opacity: 1;
    animation: pb-pm-right 8s ease-in-out 1.5s infinite;
}


/* 8 CARDS — full cascade */

.playbook-anim--stacked-cards[data-cards="8"] .pb-el:nth-child(1) {
    display: block;
    left: 0;
    top: -3%;
    z-index: 1;
    opacity: 1;
    animation: pb-pm-left 8s ease-in-out infinite;
}

.playbook-anim--stacked-cards[data-cards="8"] .pb-el:nth-child(2) {
    display: block;
    left: 8%;
    top: 6%;
    z-index: 2;
    opacity: 1;
    animation: pb-pm-left 8s ease-in-out 0.2s infinite;
}

.playbook-anim--stacked-cards[data-cards="8"] .pb-el:nth-child(3) {
    display: block;
    left: 18%;
    top: 15%;
    z-index: 3;
    opacity: 1;
    animation: pb-pm-left 8s ease-in-out 0.4s infinite;
}

.playbook-anim--stacked-cards[data-cards="8"] .pb-el:nth-child(4) {
    display: block;
    left: 30%;
    top: 25%;
    z-index: 4;
    opacity: 1;
    animation: pb-pm-left 8s ease-in-out 0.6s infinite;
}

.playbook-anim--stacked-cards[data-cards="8"] .pb-el:nth-child(5) {
    display: block;
    right: 30%;
    bottom: 25%;
    z-index: 5;
    opacity: 1;
    animation: pb-pm-right 8s ease-in-out 0.8s infinite;
}

.playbook-anim--stacked-cards[data-cards="8"] .pb-el:nth-child(6) {
    display: block;
    right: 18%;
    bottom: 15%;
    z-index: 6;
    opacity: 1;
    animation: pb-pm-right 8s ease-in-out 1s infinite;
}

.playbook-anim--stacked-cards[data-cards="8"] .pb-el:nth-child(7) {
    display: block;
    right: 8%;
    bottom: 6%;
    z-index: 7;
    opacity: 1;
    animation: pb-pm-right 8s ease-in-out 1.2s infinite;
}

.playbook-anim--stacked-cards[data-cards="8"] .pb-el:nth-child(8) {
    display: block;
    right: 0;
    bottom: -3%;
    z-index: 8;
    opacity: 1;
    animation: pb-pm-right 8s ease-in-out 1.4s infinite;
}


/* KEYFRAMES — LEFT: gentle vertical float */

@keyframes pb-pm-left {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}


/* KEYFRAMES — CENTER: subtle float */

@keyframes pb-pm-center {
    0%, 100% { transform: translateX(-50%) translateY(-50%); }
    50% { transform: translateX(-50%) translateY(calc(-50% - 8px)); }
}


/* KEYFRAMES — RIGHT: gentle vertical float */

@keyframes pb-pm-right {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}


/* RESPONSIVE — TABLET+ */

@media (min-width: 768px) {

    .playbook-anim--stacked-cards .pb-el {
        width: 200px;
    }

}


/* RESPONSIVE — DESKTOP */

@media (min-width: 1024px) {

    .playbook-anim--stacked-cards .pb-el {
        width: 230px;
    }

}


/* ========================================================================
   SINGLE IMAGE — Reusable
   Displays a single image without card stacking. Usage: set
   AnimationId = "single-image" and CardCount = 1.
   ======================================================================== */


/* SCENE */

.playbook-chapter .playbook-chapter__image.playbook-anim--single-image {
    background: none;
    border-radius: 10px;
    aspect-ratio: unset;
}


/* FIRST ELEMENT — VISIBLE */

.playbook-anim--single-image .pb-el:nth-child(1) {
    position: relative;
    display: block;
    width: 100%;
    max-width: 400px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.08);
    opacity: 0.7;
}


/* REMAINING ELEMENTS — HIDDEN */

.playbook-anim--single-image .pb-el:nth-child(n+2) {
    display: none;
}


/* IMAGE */

.playbook-anim--single-image .pb-el img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}


/* HIDE PSEUDO LINES WHEN IMAGE PRESENT */

.playbook-anim--single-image .pb-el:has(img)::before,
.playbook-anim--single-image .pb-el:has(img)::after {
    display: none;
}


/* PAN SUPPORT */

.playbook-anim--single-image .pb-el img.pb-pan-h {
    animation: pb-pan-h 15s ease-in-out infinite;
}

.playbook-anim--single-image .pb-el img.pb-pan-v {
    animation: pb-pan-v 12s ease-in-out infinite;
}