/* ==========================================================================
   CocoSeller — Story visual (Phase 5 animation slot)
   Loaded on every page family that reserves an animation slot.

   THIS FILE STYLES A RESERVATION, NOT AN ANIMATION.

   The rules here exist to guarantee four things the Phase 4 brief asks of every
   slot, all of which have to hold before any motion exists and after it arrives:

     1. The layout is reserved from CSS alone. The stage has an aspect ratio and
        a minimum height, so nothing shifts when the SVG is swapped in and
        nothing collapses if it never is.
     2. There is never a large blank area. The static motif fills the stage and
        the ground treatment gives it a surface to stand on.
     3. It works with no JavaScript. Everything below is static; the only
        dynamic hook is --story-progress, which Phase 5 will write and which
        defaults to 0 here.
     4. It collapses on small screens to a contained figure rather than a tall
        empty column, and the stage rail turns from a vertical spine into a
        horizontal one.

   Phase 5 replaces the contents of .story-animation-slot. It must not need to
   change anything in this file except the reduced-motion block at the end.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Progress custom property
   Registered so it interpolates as a number rather than a token stream, which
   is what lets Phase 5 drive it from scroll without a paint per frame.
   -------------------------------------------------------------------------- */

@property --story-progress {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

/* --------------------------------------------------------------------------
   1. Wrapper
   -------------------------------------------------------------------------- */

.story-visual {
    --story-progress: 0;
    --story-ground: linear-gradient(
        180deg,
        var(--coco-cream-50) 0%,
        var(--coco-cream-100) 62%,
        var(--coco-coir-100) 100%
    );

    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-width: 0;
}

/* --------------------------------------------------------------------------
   2. Stage
   The bordered surface the drawing stands on. Thin border, no shadow — the
   design system's restraint applies to the slot as much as to a card.
   -------------------------------------------------------------------------- */

.story-visual-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
    border: var(--border-hairline);
    border-radius: var(--radius-xl);
    background: var(--story-ground);
    padding: var(--space-lg);
}

/*
 * A hairline at the foot of the stage. Every motif is drawn standing on its own
 * baseline, and this is the surface that baseline reads against.
 */
.story-visual-stage::after {
    content: '';
    position: absolute;
    inset-inline: var(--space-lg);
    inset-block-end: var(--space-lg);
    block-size: 1px;
    background: var(--color-border-strong);
    opacity: 0.5;
}

.story-visual--portrait  .story-visual-stage { aspect-ratio: var(--ratio-tall); }
.story-visual--landscape .story-visual-stage { aspect-ratio: var(--ratio-editorial); }

/* --------------------------------------------------------------------------
   3. The slot itself
   Phase 5 writes into this element. Nothing else may.
   -------------------------------------------------------------------------- */

.story-animation-slot {
    display: grid;
    place-items: center;
    min-inline-size: 0;
    min-block-size: 0;
}

.story-animation-slot > svg,
.story-animation-slot > picture,
.story-animation-slot > img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
}

/* --------------------------------------------------------------------------
   4. Motif line language
   One stroke weight, one colour, four roles. Anything Phase 5 draws should
   inherit these so the replacement reads as the same family of drawing.
   -------------------------------------------------------------------------- */

.story-motif {
    color: var(--coco-green-800);
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    overflow: visible;
}

/* The part that must not move once the animation is real. Drawn heaviest. */
.story-motif__anchor { stroke-width: 2.25; }

/* Secondary rules, guides, dimensions, water. Drawn lightest. */
.story-motif__hair {
    stroke-width: 1.25;
    opacity: 0.55;
}

/* Foliage and other filled organic shapes. */
.story-motif__leaf {
    fill: var(--coco-green-100);
    stroke-width: 1.5;
}

/* Fruit, flowers and other accents that carry the crop's colour. */
.story-motif__fruit {
    fill: var(--coco-coir-200);
    stroke-width: 1.5;
}

.story-motif__bud {
    fill: var(--coco-cream-50);
    stroke-width: 1.5;
}

/* Substrate particles and chips. */
.story-motif__chip {
    fill: var(--coco-coir-100);
    stroke: var(--coco-coir-600);
    stroke-width: 1.25;
}

/* Roots, water paths, straps — the things that thread through a drawing. */
.story-motif__root {
    stroke: var(--coco-coir-600);
    stroke-width: 1.5;
    opacity: 0.8;
}

.story-motif__node {
    fill: var(--coco-cream-50);
    stroke-width: 2;
}

/* --------------------------------------------------------------------------
   5. Stage rail
   A position indicator, not a second navigation: decorative, aria-hidden, and
   duplicated as a visually hidden ordered list for assistive technology.

   Phase 5 drives --story-progress from 0 to 1 across the region; the fill and
   the node states already read it, so the rail comes alive without markup
   changing.
   -------------------------------------------------------------------------- */

.story-progress {
    position: absolute;
    inset-block: var(--space-lg);
    inset-inline-end: var(--space-md);
    display: none;
    grid-template-columns: auto;
    align-content: space-between;
    justify-items: end;
}

.story-progress__track {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 5px;
    inline-size: 1px;
    background: var(--color-border);
}

.story-progress__fill {
    display: block;
    inline-size: 100%;
    block-size: calc(var(--story-progress) * 100%);
    background: var(--color-brand);
    transition: block-size var(--duration-fast) var(--ease-linear);
}

.story-progress__nodes {
    display: grid;
    align-content: space-between;
    justify-items: end;
    gap: var(--space-sm);
    margin: 0;
    padding: 0;
    block-size: 100%;
    list-style: none;
}

.story-progress__node {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
}

.story-progress__dot {
    flex: none;
    inline-size: 11px;
    block-size: 11px;
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-circle);
    background: var(--color-bg);
}

.story-progress__node[data-current] .story-progress__dot {
    border-color: var(--color-brand);
    background: var(--color-brand);
}

.story-progress__label {
    font-family: var(--font-eyebrow);
    font-size: var(--text-2xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-subtle);
    text-align: end;
}

.story-progress__node[data-current] .story-progress__label { color: var(--color-text); }

/* --------------------------------------------------------------------------
   6. Caption
   -------------------------------------------------------------------------- */

.story-visual__caption {
    margin: 0;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
    max-inline-size: var(--measure-narrow);
}

/* --------------------------------------------------------------------------
   7. Sticky variant
   Used where the slot stands beside a reading column that scrolls past it.
   Sticky only applies once there is room for the column layout at all.
   -------------------------------------------------------------------------- */

@media (min-width: 64em) {
    .story-visual--sticky {
        position: sticky;
        inset-block-start: calc(var(--header-height) + var(--space-lg));
    }

    /* The rail only appears where there is room for its labels. */
    .story-progress { display: grid; }
}

/* --------------------------------------------------------------------------
   8. Small screens
   The stage gets shorter and squarer rather than taller, so a phone never
   scrolls past a full viewport of drawing. The rail becomes a horizontal strip
   under the stage, where the labels have room to sit side by side.
   -------------------------------------------------------------------------- */

@media (max-width: 63.9375em) {
    .story-visual-stage { padding: var(--space-md); }

    .story-visual-stage::after {
        inset-inline: var(--space-md);
        inset-block-end: var(--space-md);
    }

    .story-visual--portrait .story-visual-stage { aspect-ratio: var(--ratio-landscape); }
    .story-visual--landscape .story-visual-stage { aspect-ratio: var(--ratio-wide); }
}

@media (max-width: 30em) {
    .story-visual--portrait .story-visual-stage,
    .story-visual--landscape .story-visual-stage { aspect-ratio: var(--ratio-square); }
}

/* --------------------------------------------------------------------------
   9. Dark and coir grounds
   The slot is used inside inverted sections on the factory and export pages,
   so the drawing has to survive both.
   -------------------------------------------------------------------------- */

.u-theme-dark .story-visual {
    --story-ground: linear-gradient(
        180deg,
        var(--coco-green-900) 0%,
        var(--coco-green-950) 100%
    );
}

.u-theme-dark .story-motif { color: var(--coco-green-200); }
.u-theme-dark .story-motif__leaf  { fill: rgba(134, 191, 159, 0.18); }
.u-theme-dark .story-motif__fruit { fill: rgba(217, 188, 158, 0.24); }
.u-theme-dark .story-motif__bud   { fill: rgba(255, 255, 255, 0.08); }
.u-theme-dark .story-motif__chip  { fill: rgba(217, 188, 158, 0.16); stroke: var(--coco-coir-300); }
.u-theme-dark .story-motif__root  { stroke: var(--coco-coir-300); }
.u-theme-dark .story-motif__node  { fill: var(--coco-green-900); }

.u-theme-coir .story-visual {
    --story-ground: linear-gradient(
        180deg,
        var(--coco-coir-50) 0%,
        var(--coco-coir-100) 100%
    );
}

/* --------------------------------------------------------------------------
   10. Reduced motion
   Nothing here animates today. The rule stands so that when Phase 5 attaches
   motion it inherits a working opt-out rather than having to add one.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .story-progress__fill { transition: none; }

    .story-visual [data-animation-state='playing'] * {
        animation: none !important;
        transition: none !important;
    }
}