/* Sprout across the public site: the welcome and the entrances.
   Driven by scripts/sprout-guide.js, which animates transform and opacity
   with the Web Animations API. This file only places things and holds the
   resting states, so a Sprout whose animation is cancelled is simply at rest.
   Every element here is decorative (aria-hidden) and ignores the pointer. */

.otf-sg {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--otf-sg-size, 48px);
    height: var(--otf-sg-size, 48px);
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

/* Squash and stretch happen from the feet. */
.otf-sg-body {
    display: block;
    width: 100%;
    height: 100%;
    transform-origin: 50% 100%;
}

/* A block, so no line box adds a baseline gap under the feet. */
.otf-sg .sprout-mascot { display: flex; }

/* The welcome is the one Sprout drawn over the page rather than in it: it
   sits above the nav (1190) and lands in the dock (9998). */
.otf-sg-welcome {
    position: fixed;
    z-index: 9999;
}

.otf-sg-bubble {
    position: absolute;
    left: calc(100% + 10px);
    top: 0;
    padding: 9px 15px 10px;
    border: 1.5px solid rgba(140, 21, 21, 0.18);
    border-radius: 18px;
    background: #fffdf0;
    box-shadow: 0 14px 32px rgba(20, 12, 6, 0.34);
    color: #2f251c;
    font-family: inherit;
    font-size: 15px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0;
    white-space: nowrap;
    opacity: 0;
    transform-origin: 0 50%;
}

.otf-sg-bubble::before {
    content: "";
    position: absolute;
    left: -6px;
    top: calc(50% - 5px);
    width: 9px;
    height: 9px;
    border-left: inherit;
    border-bottom: inherit;
    background: inherit;
    transform: rotate(45deg);
}

.otf-sg-bubble.is-left {
    left: auto;
    right: calc(100% + 10px);
    transform-origin: 100% 50%;
}

.otf-sg-bubble.is-left::before {
    left: auto;
    right: -6px;
    border: 0;
    border-right: inherit;
    border-top: inherit;
}

/* In-page Sprouts ride inside the section they belong to, so they scroll
   with it (and stay put when that section is pinned). */
.otf-sg-island { z-index: 4; }
.otf-sg-hop { z-index: 3; }

/* A window whose bottom edge is a section edge: whatever is below it is
   behind that section. */
.otf-sg-clip {
    position: absolute;
    z-index: 3;
    overflow: hidden;
    pointer-events: none;
}

.otf-sg-clip .otf-sg { position: absolute; }

/* Standing on top of the footer, which is its own stacking layer. */
.otf-sg-ledge { z-index: 2; }

/* Beside a subpage eyebrow: placed where the next word would be (the static
   position), so it follows the text through any resize, and lifted so the
   feet sit on the line. Absolutely positioned, so the eyebrow never moves. */
.otf-sg.otf-sg-inline {
    left: auto;
    top: auto;
    display: inline-block;
    margin-left: 0.8em;
    margin-top: calc(1.2em - var(--otf-sg-size, 36px));
    vertical-align: baseline;
}

/* One blink, on the eyes only. The delay lines it up with the script's
   timeline; paused with it while the tab is hidden. */
.otf-sg-blink .sprout-face::before,
.otf-sg-blink .sprout-face::after {
    transform-origin: center;
    animation: otfSgBlink 200ms ease-in-out var(--otf-sg-blink-at, 0ms) 1 both;
}

@keyframes otfSgBlink {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(0.12); }
}

.otf-sg-paused .otf-sg,
.otf-sg-paused .otf-sg *,
.otf-sg-paused .otf-sg .sprout-face::before,
.otf-sg-paused .otf-sg .sprout-face::after {
    animation-play-state: paused !important;
}

/* ─── Landing in the dock ───────────────────────────────────────────────────
   While the welcome flies, the dock waits unseen (and out of the tab order),
   so there is only ever one Sprout. It opens around Sprout as it arrives and
   then keeps its own entrance from replaying. */
.otf-sprout-dock.is-awaiting-sprout {
    visibility: hidden;
    animation: none;
    pointer-events: none;
}

.otf-sprout-dock.is-receiving-sprout {
    animation: none;
    pointer-events: none;
}

.otf-sprout-dock.is-receiving-sprout .sprout-mascot,
.sprout-mascot.otf-sg-hold {
    opacity: 0 !important;
}

.otf-sprout-dock.is-landed:not(.is-leaving) { animation: none; }

/* Reduced motion, read live: Sprout holds still everywhere. The script makes
   no zoom or travel; these cover the pop-in, the dock's idle breath, its
   hover wave and its entrance, which become at most a short fade. */
@media (prefers-reduced-motion: reduce) {
    .sprout-mascot.sprout-arrives,
    .sprout-mascot.sprout-alive,
    .sprout-mascot.sprout-alive .sprout-face::before,
    .sprout-mascot.sprout-alive .sprout-face::after,
    .sprout-mascot.sprout-waves .sprout-arm,
    .otf-sg,
    .otf-sg *,
    .otf-sg .sprout-face::before,
    .otf-sg .sprout-face::after {
        animation: none !important;
    }

    .otf-sprout-dock:not(.is-awaiting-sprout):not(.is-receiving-sprout):not(.is-landed):not(.is-leaving) {
        animation: otfSgFadeIn 160ms ease-out both;
    }

    @keyframes otfSgFadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
}