/* -- Scroll progress bar --------------------------------------------------- */

.ess-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: transparent;
    z-index: 50;
    pointer-events: none;
}

.ess-progress__fill {
    height: 100%;
    width: 0;
    background: var(--wp--preset--color--brass);
    transform-origin: left center;
    transition: width 120ms linear;
}

/* CSS scroll-driven timeline where supported — zero-JS fallback for the bar. */
@supports (animation-timeline: scroll()) {
    .ess-progress__fill {
        width: 100%;
        transform: scaleX(0);
        animation: ess-scroll-progress linear;
        animation-timeline: scroll(root);
        transition: none;
    }
    @keyframes ess-scroll-progress {
        to { transform: scaleX(1); }
    }
}

/* -- Hero photo parallax (subtle, clamped) --------------------------------- */

.ess-portrait--hero img {
    will-change: transform;
    transform: translate3d(0, var(--hero-parallax, 0px), 0);
    transition: transform 120ms linear;
}

/* -- Heading rise on section entry ---------------------------------------- */

.js [data-reveal] h1,
.js [data-reveal] h2,
.js [data-reveal] .ess-section__title {
    transform: translateY(14px);
    transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1) 60ms;
}

.js [data-reveal].is-visible h1,
.js [data-reveal].is-visible h2,
.js [data-reveal].is-visible .ess-section__title {
    transform: none;
}

/* -- Brand header ---------------------------------------------------------- */

.ess-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--wp--preset--color--ink);
}

.ess-brand__mark {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: block;
}

.ess-brand__wordmark {
    display: inline-flex;
    flex-direction: column;
    line-height: 1;
    font-family: var(--wp--preset--font-family--fraunces);
    letter-spacing: -0.015em;
}

.ess-brand__name {
    font-size: 1.375rem;
    font-weight: 500;
    color: var(--wp--preset--color--ink);
}

.ess-brand__tagline {
    font-size: 0.8125rem;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0.04em;
    color: var(--wp--preset--color--brass);
    margin-top: 0.25rem;
}

@media (max-width: 480px) {
    .ess-brand__wordmark { display: none; }
}

/* -- Section ornament (decorative divider) -------------------------------- */

.ess-ornament {
    display: block;
    width: 96px;
    height: auto;
    margin: var(--wp--preset--spacing--48) auto;
    opacity: 0.65;
}

/*
 * Evergreen Strings — motion layer
 * -----------------------------------------------------------------------------
 * Scroll reveal, hover lifts, portrait framing, editorial polish.
 * Strictly gated by prefers-reduced-motion. See .claude/skills/site-designer/animations.md.
 */

/* -- Scroll reveal --------------------------------------------------------- */

/* Scroll-reveal only hides content under JS-capable clients — and never
 * hides it fully (no opacity:0). Previously, when the IntersectionObserver
 * didn't fire (no-JS, flaky mobile), entire sections rendered as blank
 * cream gaps. Now the content is always visible; reveal is a soft slide-up. */
.js [data-reveal] {
    transform: translateY(20px);
    transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.js [data-reveal].is-visible {
    transform: none;
}

.js [data-reveal-stagger] > * {
    transform: translateY(16px);
    transition: transform 560ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms);
}

.js [data-reveal-stagger].is-visible > * {
    transform: none;
}

[data-reveal-stagger].is-visible > *:nth-child(1) { --reveal-delay: 0ms; }
[data-reveal-stagger].is-visible > *:nth-child(2) { --reveal-delay: 90ms; }
[data-reveal-stagger].is-visible > *:nth-child(3) { --reveal-delay: 180ms; }
[data-reveal-stagger].is-visible > *:nth-child(4) { --reveal-delay: 270ms; }
[data-reveal-stagger].is-visible > *:nth-child(5) { --reveal-delay: 360ms; }
[data-reveal-stagger].is-visible > *:nth-child(6) { --reveal-delay: 450ms; }

/* -- Portraits -------------------------------------------------------------- */

.ess-portrait {
    margin: 0;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    background: var(--wp--preset--color--cream);
    box-shadow: 0 1px 2px rgb(24 42 32 / 0.04),
                0 18px 48px -24px rgb(24 42 32 / 0.22);
}

.ess-portrait picture,
.ess-portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.ess-portrait--hero {
    aspect-ratio: 1 / 1;
    max-width: 560px;
    margin-inline: auto;
}

.ess-portrait--hero::after {
    /* Subtle brass glow behind the lower-left corner — lifts the photo off the cream. */
    content: "";
    position: absolute;
    inset: auto -12% -12% auto;
    width: 55%;
    height: 55%;
    background: radial-gradient(closest-side, rgb(176 131 74 / 0.22), transparent 70%);
    pointer-events: none;
    z-index: -1;
}

.ess-portrait--about {
    aspect-ratio: 4 / 5;
    max-width: 520px;
}

.ess-portrait--inline {
    aspect-ratio: 1 / 1;
    max-width: 320px;
    border-radius: 6px;
}

.ess-portrait--wide {
    aspect-ratio: 16 / 9;
    max-width: 100%;
}

.ess-portrait--wide img {
    object-position: 60% center;
}

.ess-portrait__caption {
    font-family: var(--wp--preset--font-family--fraunces);
    font-style: italic;
    font-size: 0.875rem;
    color: rgb(42 42 42 / 0.72);
    margin-top: 0.75rem;
    text-align: left;
}

/* -- Hero layout polish ---------------------------------------------------- */

.ess-hero {
    position: relative;
    overflow: hidden;
}

.ess-hero::before {
    /* Warm evergreen-tinted wash in the top-right corner for depth. */
    content: "";
    position: absolute;
    top: -30%;
    right: -20%;
    width: 70%;
    height: 140%;
    background: radial-gradient(
        ellipse at top right,
        rgb(110 140 101 / 0.10) 0%,
        rgb(110 140 101 / 0.04) 35%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
}

.ess-hero > * {
    position: relative;
    z-index: 1;
}

.ess-eyebrow {
    margin: 0;
    font-family: var(--wp--preset--font-family--inter);
}

.ess-hero__meta {
    color: rgb(42 42 42 / 0.78);
}

/* -- Editorial cards (hover lift) ------------------------------------------
 * Primary selector: .ess-card (for explicit patterns).
 * Secondary selectors pick up existing theme cards (warm-white grouped columns
 * with a border-radius) so lessons, pricing, testimonials, and CTA cards
 * inherit the lift without rewriting every pattern.
 */
[data-reveal] .wp-block-columns > .wp-block-column > .wp-block-group.has-warm-white-background-color,
[data-reveal] .wp-block-columns > .wp-block-column > .wp-block-group.has-cream-background-color {
    transition:
        transform 220ms ease-out,
        box-shadow 220ms ease-out,
        border-color 220ms ease-out;
}

[data-reveal] .wp-block-columns > .wp-block-column > .wp-block-group.has-warm-white-background-color:hover,
[data-reveal] .wp-block-columns > .wp-block-column > .wp-block-group.has-cream-background-color:hover {
    transform: translateY(-4px);
    box-shadow: 0 2px 4px rgb(24 42 32 / 0.04),
                0 18px 40px -16px rgb(24 42 32 / 0.18);
}

.ess-card,
.wp-block-group.ess-card {
    background: var(--wp--preset--color--warm-white);
    border: 1px solid rgb(24 42 32 / 0.06);
    border-radius: 8px;
    padding: var(--wp--preset--spacing--32);
    transition:
        transform 220ms ease-out,
        box-shadow 220ms ease-out,
        border-color 220ms ease-out;
}

.ess-card:hover {
    transform: translateY(-4px);
    border-color: rgb(176 131 74 / 0.32);
    box-shadow: 0 2px 4px rgb(24 42 32 / 0.04),
                0 18px 40px -16px rgb(24 42 32 / 0.18);
}

.ess-card__eyebrow {
    font-family: var(--wp--preset--font-family--inter);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wp--preset--color--brass);
    margin: 0 0 0.75rem;
    font-weight: 600;
}

.ess-card__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    background: rgb(176 131 74 / 0.12);
    color: var(--wp--preset--color--brass);
    font-family: var(--wp--preset--font-family--inter);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* -- Credentials strip ----------------------------------------------------- */

.ess-credentials {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    align-items: center;
    justify-content: center;
    padding: var(--wp--preset--spacing--32) var(--wp--preset--spacing--24);
    border-top: 1px solid rgb(176 131 74 / 0.28);
    border-bottom: 1px solid rgb(176 131 74 / 0.28);
    font-family: var(--wp--preset--font-family--inter);
    font-size: 0.9375rem;
    color: rgb(42 42 42 / 0.88);
}

.ess-credentials > span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.ess-credentials > span + span::before {
    content: "·";
    color: var(--wp--preset--color--brass);
    margin-right: 1rem;
    font-weight: 700;
}

/* -- Pull quote ------------------------------------------------------------ */

.ess-pullquote {
    max-width: 760px;
    margin: var(--wp--preset--spacing--96) auto;
    font-family: var(--wp--preset--font-family--fraunces);
    font-style: italic;
    font-size: clamp(1.5rem, 1.125rem + 1.2vw, 2rem);
    line-height: 1.35;
    color: var(--wp--preset--color--evergreen);
    text-align: left;
    border-left: 2px solid var(--wp--preset--color--brass);
    padding-left: var(--wp--preset--spacing--32);
}

.ess-pullquote cite {
    display: block;
    margin-top: 1rem;
    font-style: normal;
    font-family: var(--wp--preset--font-family--inter);
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(42 42 42 / 0.72);
}

/* -- Pricing (3-tier) ------------------------------------------------------ */

.ess-pricing {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--24);
}

@media (min-width: 720px) {
    .ess-pricing {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--wp--preset--spacing--32);
        align-items: stretch;
    }

    .ess-pricing .ess-card--featured {
        transform: translateY(-8px);
        border-color: rgb(176 131 74 / 0.5);
        box-shadow: 0 3px 6px rgb(24 42 32 / 0.04),
                    0 22px 48px -20px rgb(24 42 32 / 0.22);
    }

    .ess-pricing .ess-card--featured:hover {
        transform: translateY(-12px);
    }
}

.ess-pricing .ess-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ess-pricing .ess-card__price {
    font-family: var(--wp--preset--font-family--fraunces);
    font-size: 2.25rem;
    font-weight: 500;
    color: var(--wp--preset--color--evergreen);
    line-height: 1;
}

.ess-pricing .ess-card__price small {
    display: block;
    font-family: var(--wp--preset--font-family--inter);
    font-size: 0.875rem;
    color: rgb(42 42 42 / 0.72);
    font-weight: 400;
    margin-top: 0.375rem;
}

.ess-pricing ul {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.9375rem;
    line-height: 1.55;
}

.ess-pricing li::before {
    content: "›";
    color: var(--wp--preset--color--brass);
    font-weight: 700;
    margin-right: 0.5rem;
}

/* -- Lesson cards row ------------------------------------------------------ */

.ess-lesson-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--24);
}

@media (min-width: 640px) {
    .ess-lesson-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 980px) {
    .ess-lesson-row {
        grid-template-columns: repeat(4, 1fr);
    }
}

.ess-lesson-row .ess-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* -- Recital teaser backdrop ----------------------------------------------- */

.ess-recital {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    isolation: isolate;
    min-height: 360px;
    padding: var(--wp--preset--spacing--96) var(--wp--preset--spacing--48);
    color: var(--wp--preset--color--warm-white);
    background: var(--wp--preset--color--evergreen);
}

.ess-recital__image {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.ess-recital__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% center;
    opacity: 0.55;
    filter: saturate(1.05);
}

.ess-recital__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgb(31 74 61 / 0.82) 0%,
        rgb(31 74 61 / 0.55) 55%,
        rgb(31 74 61 / 0.72) 100%
    );
}

.ess-recital h2,
.ess-recital h3 {
    color: var(--wp--preset--color--warm-white);
}

.ess-recital p {
    color: rgb(248 243 232 / 0.9);
    max-width: 60ch;
}

/* -- Testimonial pull-quote shell ------------------------------------------ */

.ess-testimonial {
    max-width: 680px;
}

.ess-testimonial blockquote {
    font-family: var(--wp--preset--font-family--fraunces);
    font-style: italic;
    font-size: clamp(1.25rem, 1rem + 0.6vw, 1.5rem);
    line-height: 1.4;
    color: var(--wp--preset--color--evergreen);
    margin: 0;
    padding: 0;
    border: 0;
}

.ess-testimonial footer {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--wp--preset--font-family--inter);
    font-size: 0.875rem;
    color: rgb(42 42 42 / 0.78);
}

.ess-testimonial footer .ess-avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--wp--preset--color--brass);
    color: var(--wp--preset--color--warm-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--wp--preset--font-family--fraunces);
    font-size: 1rem;
    font-weight: 500;
}

/* -- Hero responsive tweaks ------------------------------------------------ */

@media (max-width: 781px) {
    /* Copy comes first on mobile, portrait follows — DOM order is already
     * copy-then-media, so flex-direction: column preserves it. Older version
     * used column-reverse; that put the image above the H1 and failed the
     * five-second test on every phone share. */
    .ess-hero .wp-block-columns {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
    }
    .ess-hero .wp-block-column {
        flex-basis: 100% !important;
        max-width: 100%;
    }
    .ess-portrait--hero {
        max-width: 420px;
    }
}

/* -- prefers-reduced-motion kill switch ------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal],
    [data-reveal-stagger] > * {
        opacity: 1 !important;
        transform: none !important;
    }
    .ess-card:hover,
    .ess-pricing .ess-card--featured:hover,
    [data-reveal] .wp-block-columns > .wp-block-column > .wp-block-group:hover {
        transform: none !important;
    }
    .ess-portrait--hero img { transform: none !important; }
    .ess-progress__fill { animation: none !important; transform: scaleX(0) !important; transition: none !important; }
    [data-reveal] h1,
    [data-reveal] h2,
    [data-reveal] .ess-section__title { opacity: 1 !important; transform: none !important; }
}