/* =========================================================
   POMOSDA — SECTION 06 MOTION R3
   Motion-only enhancement. Base layout remains owned by
   resources/css/pomosda-hero.css.
   ========================================================= */

#section-06.pomosda-teachers-section--motion-r3 {
    isolation: isolate;
}

#section-06.pomosda-teachers-section--motion-r3::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0 0 auto;
    height: 220px;
    pointer-events: none;
    opacity: .34;
    background:
        radial-gradient(circle at 20% 0%, rgba(255, 204, 0, .12), transparent 42%),
        radial-gradient(circle at 82% 12%, rgba(13, 106, 91, .18), transparent 38%);
}

#section-06 .pomosda-teachers-section__content,
#section-06 .pomosda-teachers-section__visual {
    position: relative;
}

#section-06 .pomosda-teachers-section__heading h2 span,
#section-06 .pomosda-teachers-section__heading h2 strong {
    display: inline-block;
    will-change: transform, opacity, filter;
}

#section-06 .pomosda-teachers-section__cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

#section-06 .pomosda-teachers-section__cta::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -55%;
    bottom: -55%;
    left: -45%;
    width: 30%;
    pointer-events: none;
    opacity: 0;
    transform: skewX(-18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.62), transparent);
}

#section-06.is-section06-complete .pomosda-teachers-section__cta:hover::after {
    animation: section06CtaSheen 760ms ease both;
}

#section-06 .pomosda-teachers-section__visual {
    background: #212121;
}

#section-06 .pomosda-teachers-section__visual > picture {
    position: relative;
    z-index: 1;
}

#section-06 .pomosda-teachers-section__visual img {
    will-change: opacity, transform, filter;
    backface-visibility: hidden;
}

#section-06 .pomosda-teachers-section__slice-layer {
    position: absolute;
    z-index: 3;
    inset: 0;
    display: none;
    overflow: hidden;
    pointer-events: none;
}

#section-06 .pomosda-teachers-section__slice {
    position: absolute;
    top: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-size: 600% 100%;
    transform-origin: 50% 100%;
    backface-visibility: hidden;
    will-change: transform, opacity, clip-path, filter;
}

#section-06 .pomosda-teachers-section__slice::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: #ffcc00;
    transform: scaleX(0);
    transform-origin: left center;
    box-shadow: 0 0 18px rgba(255, 204, 0, .45);
}

#section-06 .pomosda-teachers-section__scanline {
    position: absolute;
    z-index: 4;
    top: 0;
    bottom: 0;
    left: -12%;
    width: 10%;
    pointer-events: none;
    opacity: 0;
    transform: skewX(-12deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), rgba(255,204,0,.16), transparent);
    mix-blend-mode: screen;
}

/* Pre-animation states are only enabled after JS has successfully initialized. */
#section-06.is-section06-motion-ready:not(.is-section06-playing):not(.is-section06-complete) [data-section06-reveal="heading"] h2 span {
    opacity: 0;
    transform: translate3d(-34px, 0, 0);
    filter: blur(5px);
}

#section-06.is-section06-motion-ready:not(.is-section06-playing):not(.is-section06-complete) [data-section06-reveal="heading"] h2 strong {
    opacity: 0;
    transform: translate3d(34px, 0, 0);
    filter: blur(5px);
}

#section-06.is-section06-motion-ready:not(.is-section06-playing):not(.is-section06-complete) [data-section06-reveal="intro"] {
    opacity: 0;
    transform: translate3d(28px, 0, 0);
}

#section-06.is-section06-motion-ready:not(.is-section06-playing):not(.is-section06-complete) .pomosda-teachers-section__cta {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(.96);
}

#section-06.is-section06-desktop-motion.is-section06-motion-ready:not(.is-section06-complete) .pomosda-teachers-section__visual img {
    opacity: 0;
}

#section-06.is-section06-desktop-motion .pomosda-teachers-section__slice-layer {
    display: block;
}

#section-06.is-section06-desktop-motion.is-section06-motion-ready:not(.is-section06-playing):not(.is-section06-complete) .pomosda-teachers-section__slice {
    opacity: 0;
    clip-path: inset(52% 0 48% 0 round 2px);
    filter: saturate(.72) brightness(.72);
}

#section-06.is-section06-desktop-motion.is-section06-motion-ready:not(.is-section06-playing):not(.is-section06-complete) .pomosda-teachers-section__slice:nth-child(odd) {
    transform: translate3d(0, 34px, 0) scale(.985);
}

#section-06.is-section06-desktop-motion.is-section06-motion-ready:not(.is-section06-playing):not(.is-section06-complete) .pomosda-teachers-section__slice:nth-child(even) {
    transform: translate3d(0, -34px, 0) scale(.985);
}

#section-06.is-section06-mobile-motion.is-section06-motion-ready:not(.is-section06-playing):not(.is-section06-complete) .pomosda-teachers-section__visual img {
    opacity: 0;
    transform: translate3d(0, 28px, 0) scale(.99);
    filter: blur(4px);
}

/* Playing */
#section-06.is-section06-playing [data-section06-reveal="heading"] h2 span {
    animation: section06HeadingLeft 720ms cubic-bezier(.16,1,.3,1) 60ms both;
}

#section-06.is-section06-playing [data-section06-reveal="heading"] h2 strong {
    animation: section06HeadingRight 760ms cubic-bezier(.16,1,.3,1) 190ms both;
}

#section-06.is-section06-playing [data-section06-reveal="intro"] {
    animation: section06IntroIn 760ms cubic-bezier(.16,1,.3,1) 280ms both;
}

#section-06.is-section06-playing .pomosda-teachers-section__cta {
    animation: section06CtaIn 620ms cubic-bezier(.16,1,.3,1) 620ms both;
}

#section-06.is-section06-desktop-motion.is-section06-playing .pomosda-teachers-section__slice {
    animation: section06TeacherSlice 760ms cubic-bezier(.16,1,.3,1) both;
    animation-delay: calc(720ms + (var(--section06-slice-index) * 120ms));
}

#section-06.is-section06-desktop-motion.is-section06-playing .pomosda-teachers-section__slice::after {
    animation: section06SliceSignal 460ms ease-out both;
    animation-delay: calc(980ms + (var(--section06-slice-index) * 120ms));
}

#section-06.is-section06-desktop-motion.is-section06-playing .pomosda-teachers-section__scanline {
    animation: section06Scanline 1050ms cubic-bezier(.16,1,.3,1) 1580ms both;
}

#section-06.is-section06-mobile-motion.is-section06-playing .pomosda-teachers-section__visual img {
    animation: section06MobileVisual 840ms cubic-bezier(.16,1,.3,1) 680ms both;
}

/* Final / settled state */
#section-06.is-section06-complete [data-section06-reveal="heading"] h2 span,
#section-06.is-section06-complete [data-section06-reveal="heading"] h2 strong,
#section-06.is-section06-complete [data-section06-reveal="intro"],
#section-06.is-section06-complete .pomosda-teachers-section__cta,
#section-06.is-section06-complete .pomosda-teachers-section__visual img {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

#section-06.is-section06-complete .pomosda-teachers-section__slice-layer,
#section-06.is-section06-complete .pomosda-teachers-section__scanline {
    opacity: 0;
    visibility: hidden;
    transition: opacity 280ms ease, visibility 280ms ease;
}

@media (hover: hover) and (pointer: fine) {
    #section-06.is-section06-complete .pomosda-teachers-section__visual img {
        transition: transform 650ms cubic-bezier(.16,1,.3,1), filter 450ms ease;
    }

    #section-06.is-section06-complete .pomosda-teachers-section__visual:hover img {
        transform: scale(1.006) !important;
        filter: brightness(1.025) !important;
    }
}

@keyframes section06HeadingLeft {
    from { opacity: 0; transform: translate3d(-34px,0,0); filter: blur(5px); }
    to { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes section06HeadingRight {
    from { opacity: 0; transform: translate3d(34px,0,0); filter: blur(5px); }
    to { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes section06IntroIn {
    from { opacity: 0; transform: translate3d(28px,0,0); }
    to { opacity: 1; transform: none; }
}

@keyframes section06CtaIn {
    0% { opacity: 0; transform: translate3d(0,14px,0) scale(.96); }
    70% { opacity: 1; transform: translate3d(0,-2px,0) scale(1.015); }
    100% { opacity: 1; transform: none; }
}

@keyframes section06TeacherSlice {
    0% {
        opacity: 0;
        clip-path: inset(52% 0 48% 0 round 2px);
        filter: saturate(.72) brightness(.72);
    }
    62% {
        opacity: 1;
        clip-path: inset(0 0 0 0 round 2px);
        filter: saturate(1.05) brightness(1.04);
        transform: translate3d(0,-3px,0) scale(1.003);
    }
    100% {
        opacity: 1;
        clip-path: inset(0 0 0 0 round 0);
        filter: none;
        transform: none;
    }
}

@keyframes section06SliceSignal {
    0% { transform: scaleX(0); opacity: 0; }
    45% { opacity: 1; }
    100% { transform: scaleX(1); opacity: 0; }
}

@keyframes section06Scanline {
    0% { left: -12%; opacity: 0; }
    15% { opacity: .78; }
    80% { opacity: .48; }
    100% { left: 108%; opacity: 0; }
}

@keyframes section06MobileVisual {
    from { opacity: 0; transform: translate3d(0,28px,0) scale(.99); filter: blur(4px); }
    to { opacity: 1; transform: none; filter: none; }
}

@keyframes section06CtaSheen {
    0% { left: -45%; opacity: 0; }
    18% { opacity: .7; }
    100% { left: 120%; opacity: 0; }
}

@media (max-width: 760px) {
    #section-06.pomosda-teachers-section--motion-r3::before {
        height: 150px;
        opacity: .24;
    }

    #section-06 .pomosda-teachers-section__scanline,
    #section-06 .pomosda-teachers-section__slice-layer {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #section-06.pomosda-teachers-section--motion-r3 *,
    #section-06.pomosda-teachers-section--motion-r3 *::before,
    #section-06.pomosda-teachers-section--motion-r3 *::after {
        animation: none !important;
        transition-duration: .001ms !important;
    }

    #section-06 .pomosda-teachers-section__slice-layer,
    #section-06 .pomosda-teachers-section__scanline {
        display: none !important;
    }

    #section-06 [data-section06-reveal="heading"] h2 span,
    #section-06 [data-section06-reveal="heading"] h2 strong,
    #section-06 [data-section06-reveal="intro"],
    #section-06 .pomosda-teachers-section__cta,
    #section-06 .pomosda-teachers-section__visual img {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
    }
}
