/* ========================================================================
   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-left: 1px solid rgba(0, 0, 0, 0.05);
    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%;
}

.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);
    border-left: 4px solid 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--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;
    }

}


/* 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 {
        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); }
}