/*
 * Cathy Florist — HOME sections. Values are --s-* tokens (tokens.css); shared components
 * (tags, panels, rails, card, footer) are in site.css.
 */

/* ---- #top: the occasion picker ------------------------------------------------------- *
 * Desktop: the photo full bleed above; the rose-madder field below carries the H1 at display
 * scale; the picker hangs as one long tissue tag over the photo's bottom edge.
 * Phones: type first (H1 + the picker on the field), the photo below with the tag over its top. */
.cf-hero {
    display: grid; grid-template-rows: minmax(0, 1fr) auto;
    height: var(--s-hero-h); min-height: var(--s-hero-min); max-height: var(--s-hero-max);
    overflow: hidden; background: var(--s-field);
}
.cf-hero__photo { grid-row: 1; grid-column: 1; position: relative; overflow: hidden; background: var(--s-madder-deep); }
.cf-hero__frame { position: absolute; inset: 0; transition: opacity var(--s-dur-swap) var(--s-ease-out); }
.cf-hero__frame:not(.is-current) { opacity: 0; }
.cf-hero__frame picture { display: block; width: 100%; height: 100%; }
.cf-hero__frame .cf-photo {
    object-position: var(--s-hero-pos);
    transform: scale(var(--s-photo-scale-from));
    transition: transform var(--s-dur-reveal) var(--s-ease-out);
}
.cf-hero__frame.is-entering .cf-photo { transform: scale(var(--s-photo-scale-to)); transition: none; }
.cf-hero__buckets { position: absolute; left: var(--s-gutter-wide); top: var(--s-space-m); z-index: 1; }
.cf-hero__buckets[hidden] { display: none; }
/* The price inside the tag keeps the tag's own lettering (x-price, "From" for starting prices). */
.cf-hero__tag-price { font: inherit; color: inherit; font-variant-numeric: tabular-nums; }

.cf-hero__field {
    grid-row: 2; grid-column: 1; position: relative; z-index: 1;
    display: grid; grid-template-columns: repeat(var(--s-grid-cols), minmax(0, 1fr)); column-gap: var(--s-grid-gap);
    align-items: end; padding: var(--s-space-l) var(--s-gutter-wide) var(--s-space-l);
    color: var(--s-on-field);
}
.cf-hero__title { grid-column: 1 / span 7; max-width: var(--s-measure-home-title); }
.cf-hero__picker {
    grid-column: 8 / -1; align-self: start; margin-top: calc(var(--s-hero-picker-rise) * -1);
    display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-space-s); justify-items: start;
}
.cf-chips .cf-tag { padding-left: var(--s-tag2-pad-end); padding-right: var(--s-chip-pad-x); }
.cf-chips-wrap { width: 100%; min-width: 0; }
.cf-chips { display: flex; flex-wrap: wrap; gap: var(--s-space-2xs); }
.cf-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-space-xs) var(--s-space-l); }

@media (max-width: 63.99rem) {
    .cf-hero { display: flex; flex-direction: column; height: auto; min-height: 0; max-height: none; }
    .cf-hero__field { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-space-m); padding: var(--s-space-m) var(--s-gutter) 0; }
    .cf-hero__title { max-width: var(--s-measure-home-title-phone); }
    .cf-hero__picker { align-self: stretch; margin: 0 0 calc(var(--s-hero-overlap-phone) * -1); gap: var(--s-space-xs); }
    .cf-hero__photo { flex: none; height: var(--s-hero-photo-h-phone); }
    .cf-hero__frame .cf-photo { object-position: var(--s-hero-pos-phone); }
    .cf-hero__buckets { top: auto; bottom: var(--s-space-s); left: var(--s-gutter); }
}
@media (max-width: 47.99rem) {
    /* One chip row that looks scrollable: a half-visible chip at the edge, a fade, snap. */
    .cf-chips-wrap { margin-inline: calc(var(--s-panel-pad) * -1); width: calc(100% + var(--s-panel-pad) * 2); }
    .cf-chips {
        flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
        padding: var(--s-focus-w) var(--s-panel-pad) calc(var(--s-focus-w) + var(--s-focus-offset));
        scroll-padding-inline: var(--s-panel-pad);
        -webkit-mask: linear-gradient(to right, var(--s-opaque) calc(100% - var(--s-chip-fade)), transparent);
        mask: linear-gradient(to right, var(--s-opaque) calc(100% - var(--s-chip-fade)), transparent);
    }
    .cf-chips::-webkit-scrollbar { display: none; }
    .cf-chips li { flex: none; scroll-snap-align: start; }
}

/* ---- #unwrap: THE UNWRAP ------------------------------------------------------------ *
 * --s-unwrap (0 -> 1, registered in tokens.css) carries every point of the cone out to the
 * frame edge. Default = 1, the open end state (reduced motion, no support, no JS). A CSS
 * view timeline drives it where supported; site's home.js scrubs it with GSAP elsewhere.  */
/* At rest (reduced motion, no support, no JS) the section is one screen showing the open end
 * state. When it moves, the wrapper grows to --s-unwrap-track and the stage sticks under the
 * nav: three beats (Grown, Made, Delivered) run across that pinned stretch.                 */
@keyframes cf-unwrap { from { --s-unwrap: 0; } to { --s-unwrap: 1; } }
.cf-unwrap {
    --s-unwrap: 1;
    --s-release: clamp(0, (var(--s-unwrap) - var(--s-line-3-at)) * var(--s-line-ramp), 1);   /* beat 3's progress */
    position: relative; background: var(--s-tissue-deep); }
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .cf-unwrap { height: var(--s-unwrap-track); animation: cf-unwrap linear both; animation-timeline: view(); animation-range: var(--s-unwrap-range); }
        .cf-unwrap .cf-unwrap__stage { position: sticky; top: var(--s-nav-h); }
    }
}
.cf-unwrap.is-scrub { height: var(--s-unwrap-track); animation: none; }
.cf-unwrap.is-scrub .cf-unwrap__stage { position: sticky; top: var(--s-nav-h); }

.cf-unwrap__stage { position: relative; height: var(--s-unwrap-stage-h); overflow: hidden; }
.cf-unwrap__photo { position: absolute; inset: 0; }
.cf-unwrap__cone, .cf-unwrap__paper {
    position: absolute; inset: 0;
    clip-path: polygon(
        calc((var(--s-unwrap-box-l) + var(--s-cone-left-x) * var(--s-unwrap-box-w)) * (1 - var(--s-unwrap)) - var(--s-unwrap-band))
            calc((var(--s-unwrap-box-t) + var(--s-cone-lip-y) * var(--s-unwrap-box-h)) * (1 - var(--s-unwrap))),
        calc((var(--s-unwrap-box-l) + var(--s-cone-tip-x) * var(--s-unwrap-box-w)) * (1 - var(--s-unwrap)) + 50% * var(--s-unwrap))
            calc((var(--s-unwrap-box-t) + (var(--s-cone-lip-y) + var(--s-cone-flare)) * var(--s-unwrap-box-h)) * (1 - var(--s-unwrap))),
        calc((var(--s-unwrap-box-l) + var(--s-cone-right-x) * var(--s-unwrap-box-w)) * (1 - var(--s-unwrap)) + 100% * var(--s-unwrap) + var(--s-unwrap-band))
            calc((var(--s-unwrap-box-t) + var(--s-cone-lip-y) * var(--s-unwrap-box-h)) * (1 - var(--s-unwrap))),
        calc((var(--s-unwrap-box-l) + (var(--s-cone-right-x) - var(--s-cone-shoulder-in)) * var(--s-unwrap-box-w)) * (1 - var(--s-unwrap)) + 100% * var(--s-unwrap) + var(--s-unwrap-band))
            calc((var(--s-unwrap-box-t) + var(--s-cone-shoulder-y) * var(--s-unwrap-box-h)) * (1 - var(--s-unwrap)) + var(--s-cone-shoulder-y) * var(--s-unwrap)),
        calc((var(--s-unwrap-box-l) + var(--s-cone-tip-x) * var(--s-unwrap-box-w)) * (1 - var(--s-unwrap)) + 100% * var(--s-unwrap) + var(--s-unwrap-band))
            calc((var(--s-unwrap-box-t) + var(--s-cone-tip-y) * var(--s-unwrap-box-h)) * (1 - var(--s-unwrap)) + 100% * var(--s-unwrap)),
        calc((var(--s-unwrap-box-l) + var(--s-cone-tip-x) * var(--s-unwrap-box-w)) * (1 - var(--s-unwrap)) + 50% * var(--s-unwrap))
            calc((var(--s-unwrap-box-t) + var(--s-cone-tip-y) * var(--s-unwrap-box-h)) * (1 - var(--s-unwrap)) + 100% * var(--s-unwrap)),
        calc((var(--s-unwrap-box-l) + var(--s-cone-tip-x) * var(--s-unwrap-box-w)) * (1 - var(--s-unwrap)) - var(--s-unwrap-band))
            calc((var(--s-unwrap-box-t) + var(--s-cone-tip-y) * var(--s-unwrap-box-h)) * (1 - var(--s-unwrap)) + 100% * var(--s-unwrap)),
        calc((var(--s-unwrap-box-l) + (var(--s-cone-left-x) + var(--s-cone-shoulder-in)) * var(--s-unwrap-box-w)) * (1 - var(--s-unwrap)) - var(--s-unwrap-band))
            calc((var(--s-unwrap-box-t) + var(--s-cone-shoulder-y) * var(--s-unwrap-box-h)) * (1 - var(--s-unwrap)) + var(--s-cone-shoulder-y) * var(--s-unwrap))
    );
}
.cf-unwrap__cone picture { position: absolute; inset: 0; }
.cf-unwrap__img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    object-position: var(--s-doorstep-pos);
    transform: scale(calc(var(--s-unwrap-scale-from) + (var(--s-unwrap-scale-to) - var(--s-unwrap-scale-from)) * var(--s-unwrap)));
}
/* The wrap: kraft paper one band wider than the cone on both sides; it travels out with the
   cone's edges and leaves the frame as the bouquet opens. */
.cf-unwrap__paper { background: linear-gradient(var(--s-paper-angle), var(--s-kraft), var(--s-kraft-shade)); }
/* Frame 0's crease: the cone as a twine line. It fades out by beat 2 and is never part of the
   open end state (reduced motion, no support, no JS: --s-unwrap = 1 there, so opacity is 0). */
.cf-unwrap__outline {
    position: absolute; overflow: visible; pointer-events: none;
    left: var(--s-unwrap-box-l); top: var(--s-unwrap-box-t);
    width: calc(var(--s-unwrap-box-w) * 100%); height: calc(var(--s-unwrap-box-h) * 100%);
    fill: none; stroke: var(--s-tissue); stroke-width: var(--s-cone-outline-w);
    vector-effect: non-scaling-stroke; stroke-linejoin: round;
    opacity: calc(1 - clamp(0, var(--s-unwrap) / var(--s-line-2-at), 1));
}
/* Beat 3: the arrival at display size over the photo's lower-left, on its own scrim. */
.cf-unwrap__arrive {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none;
    padding: var(--s-arrive-pad-top) var(--s-arrive-pad-end) var(--s-space-xl) var(--s-gutter-wide);
    background: linear-gradient(to top, var(--s-scrim) var(--s-arrive-solid), transparent);
    color: var(--s-tissue); font-weight: var(--s-w-display); font-size: var(--s-size-display);
    line-height: var(--s-leading-display-xl); letter-spacing: var(--s-track-display);
    font-variation-settings: "opsz" var(--s-opsz-display), "wdth" var(--s-wdth-display);
    text-wrap: balance; max-width: none;
    opacity: var(--s-release);
}
/* rev 6 — the release, FLIP: the words start where the card's third line sat (--s-flip-*, measured
   by home.js) at its size, and travel out to the display line. Without JS the offsets are 0: a plain fade. */
.cf-unwrap__arrive-words {
    display: inline-block; transform-origin: 0 0;
    translate: calc((1 - var(--s-release)) * var(--s-flip-x)) calc((1 - var(--s-release)) * var(--s-flip-y) + (1 - var(--s-release)) * var(--s-arrive-rise));
    scale: calc(1 - (1 - var(--s-release)) * (1 - var(--s-flip-s)));
}
/* The third line in the card: present while the cone is closed, it leaves as the release starts and
   is collapsed in the open end state, so the card lists two lines and the display line says the third once. */
.cf-unwrap__line--leaving {
    overflow: hidden; opacity: calc(1 - var(--s-release) * 2);
    max-height: calc((1 - var(--s-release)) * var(--s-leaving-h));
}
.cf-unwrap.is-measuring .cf-unwrap__line--leaving { max-height: none; }
.cf-unwrap.is-measuring .cf-unwrap__arrive-words { translate: none; scale: none; }

.cf-unwrap__outline polygon { vector-effect: non-scaling-stroke; }

.cf-unwrap__tag {
    position: absolute; left: var(--s-gutter-wide); top: var(--s-space-xl); z-index: 2;
    width: var(--s-unwrap-tag-w); display: grid; gap: var(--s-space-m); justify-items: start;
}
.cf-unwrap__title { max-width: none; }
.cf-unwrap__lines { display: grid; gap: var(--s-space-3xs); width: 100%; }
.cf-unwrap__line > * {
    display: flex; align-items: center; gap: var(--s-space-xs); min-height: var(--s-tap); padding-block: var(--s-space-3xs);
    text-decoration: none; font-weight: var(--s-w-heading); font-size: var(--s-size-h2); line-height: var(--s-leading-heading);
    font-variation-settings: "opsz" var(--s-opsz-display), "wdth" var(--s-wdth-display);
    box-shadow: inset 0 calc(var(--s-rule-w) * -1) 0 var(--s-rule);
}
.cf-unwrap__line a:hover { text-decoration: underline; text-underline-offset: var(--s-space-3xs); }
/* Each line lights in turn as the cone opens: muted ink (still AA) to full ink + its dot. */
.cf-unwrap__line--1 a { color: color-mix(in srgb, var(--s-ink) calc(clamp(0, (var(--s-unwrap) - var(--s-line-1-at)) * var(--s-line-ramp), 1) * 100%), var(--s-ink-muted)); }
.cf-unwrap__line--2 a { color: color-mix(in srgb, var(--s-ink) calc(clamp(0, (var(--s-unwrap) - var(--s-line-2-at)) * var(--s-line-ramp), 1) * 100%), var(--s-ink-muted)); }
.cf-unwrap__line--3 > * { color: color-mix(in srgb, var(--s-ink) calc(clamp(0, (var(--s-unwrap) - var(--s-line-3-at)) * var(--s-line-ramp), 1) * 100%), var(--s-ink-muted)); }
.cf-unwrap__line--1 .cf-dot { transform: scale(clamp(0, (var(--s-unwrap) - var(--s-line-1-at)) * var(--s-line-ramp), 1)); }
.cf-unwrap__line--2 .cf-dot { transform: scale(clamp(0, (var(--s-unwrap) - var(--s-line-2-at)) * var(--s-line-ramp), 1)); }
.cf-unwrap__line--3 .cf-dot { transform: scale(clamp(0, (var(--s-unwrap) - var(--s-line-3-at)) * var(--s-line-ramp), 1)); }
.cf-unwrap__cta { margin-top: var(--s-space-2xs); }

@media (max-width: 47.99rem) {
    /* Phones: the photo above, the three lines BELOW it on tissue (never over it). */
    .cf-unwrap__stage { display: flex; flex-direction: column; }
    .cf-unwrap__photo { position: relative; inset: auto; flex: 1 1 auto; min-height: 0; }
    .cf-unwrap__img { object-position: var(--s-doorstep-pos-phone); }
    .cf-unwrap__tag {
        position: relative; left: auto; top: auto; transform: none; width: auto;
        margin: calc(var(--s-space-l) * -1) var(--s-gutter) calc(var(--s-bar-h) + var(--s-space-xs) + env(safe-area-inset-bottom)); gap: var(--s-space-xs);
    }
    .cf-unwrap__line > * { font-size: var(--s-size-h3); min-height: var(--s-tap); padding-block: 0; }
    .cf-unwrap__arrive { padding: var(--s-arrive-pad-top) var(--s-gutter) calc(var(--s-space-l) + var(--s-space-m)); }
}

/* ---- #buckets: IN THE BUCKETS --------------------------------------------------------- */
.cf-buckets { padding-top: var(--s-space-2xl); background: var(--s-tissue-deep); overflow: hidden; }
.cf-buckets__head {
    display: grid; grid-template-columns: repeat(var(--s-grid-cols), minmax(0, 1fr)); align-items: end;
    gap: var(--s-space-s) var(--s-grid-gap); max-width: var(--s-max); margin-inline: auto; padding-inline: var(--s-gutter-wide);
}
.cf-buckets__head .cf-h2 { grid-column: 1 / span 5; }
.cf-buckets__head .cf-lede { grid-column: 6 / span 5; }
.cf-buckets__head .cf-rail-ctrl { grid-column: 11 / -1; justify-self: end; }
.cf-buckets__strip { height: var(--s-strip-h); margin-top: var(--s-space-l); }
.cf-buckets__strip .cf-photo { object-position: var(--s-buckets-pos); }
.cf-buckets .cf-rail { margin-top: calc(var(--s-rail-overlap) * -1); }

/* (.cf-stem / .cf-piece cards are shared: site.css) */
@media (max-width: 63.99rem) {
    .cf-buckets__head .cf-h2, .cf-buckets__head .cf-lede { grid-column: 1 / -1; }
    .cf-buckets__head .cf-rail-ctrl { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 47.99rem) {
    .cf-buckets__head { padding-inline: var(--s-gutter); }
    .cf-buckets__head .cf-rail-ctrl { display: none; }
}

/* ---- #worlds: one house, every reason (ART DIRECTOR rev 5) -------------------------------
   An editorial index, not a stack of tags: one large photo per world, its name at display size
   set straight on the tissue ground, one line and an underline link. The first world (the
   nursery: the grower's own strelitzia) is the full-width lead; the rest pair two to a row.
   Phone: one horizontal snap row, the next world's photo showing at the edge. ------------- */
.cf-worlds { padding: var(--s-space-section) var(--s-gutter-wide); background: var(--s-tissue); }
.cf-worlds__title { max-width: var(--s-max); margin: 0 auto var(--s-space-xl); }
.cf-worlds__grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-space-2xl) var(--s-grid-gap); max-width: var(--s-max); margin-inline: auto;
    list-style: none; padding: 0;
}
.cf-world--lead { grid-column: 1 / -1; }
.cf-world__link {
    display: grid; gap: var(--s-space-2xs); justify-items: start;
    color: var(--s-ink); text-decoration: none;
}
.cf-world__photo {
    position: relative; display: block; width: 100%; overflow: hidden;
    aspect-ratio: var(--s-ratio-world); margin-bottom: var(--s-space-s);
}
.cf-world--lead .cf-world__photo { aspect-ratio: var(--s-ratio-world-lead); }
.cf-world__photo picture { position: absolute; inset: 0; }
.cf-world__photo .cf-photo { transition: transform var(--s-dur-reveal) var(--s-ease-out); }
.cf-world__name {
    font-weight: var(--s-w-display); font-size: var(--s-size-world-name); line-height: var(--s-leading-display-xl);
    letter-spacing: var(--s-track-display); font-variation-settings: "opsz" var(--s-opsz-display), "wdth" var(--s-wdth-display);
}
.cf-world--lead .cf-world__name { font-size: var(--s-size-doorway); }
.cf-world__line { max-width: var(--s-measure-lede); font-size: var(--s-size-lede); color: var(--s-ink-muted); }
.cf-world__go {
    display: inline-flex; align-items: center; min-height: var(--s-tap);
    font-weight: var(--s-w-semi); color: var(--s-link);
    text-decoration: underline; text-decoration-thickness: var(--s-link-line-w); text-underline-offset: var(--s-link-offset);
}
@media (hover: hover) {
    .cf-world__link:hover .cf-photo { transform: scale(var(--s-photo-scale-to)); }
    .cf-world__link:hover .cf-world__go { text-decoration-thickness: var(--s-notch); }
}
.cf-world__link:focus-visible { outline-offset: var(--s-focus-w); }

@media (max-width: 47.99rem) {
    .cf-worlds { padding-inline: var(--s-gutter); }
    .cf-worlds__grid {
        display: flex; gap: var(--s-space-m); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
        margin-inline: calc(var(--s-gutter) * -1); padding-inline: var(--s-gutter); scroll-padding-inline: var(--s-gutter);
    }
    .cf-worlds__grid::-webkit-scrollbar { display: none; }
    .cf-world { flex: none; width: var(--s-world-card-phone); scroll-snap-align: start; }
    .cf-world__photo, .cf-world--lead .cf-world__photo { aspect-ratio: var(--s-ratio-world-phone); }
    .cf-world--lead .cf-world__name { font-size: var(--s-size-world-name); }
}

/* ---- #how: one line, one link. The steps themselves are order/'s hero. ------------------- */
.cf-how { padding-inline: var(--s-gutter-wide); background: var(--s-field); color: var(--s-on-field); }
.cf-how__band {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-space-xs) var(--s-space-l);
    max-width: var(--s-max); margin-inline: auto; padding-block: var(--s-space-l);
    color: inherit; text-decoration: none;
}
.cf-how__title { color: var(--s-on-field); }
.cf-how__steps { flex: 1 1 auto; color: var(--s-on-field-muted); }
.cf-how__band:hover .cf-how__steps { text-decoration: underline; text-underline-offset: var(--s-space-3xs); }
.cf-how__band:focus-visible { outline: var(--s-focus-w) solid var(--s-focus-on-field); outline-offset: calc(var(--s-focus-offset) * -1); }
@media (max-width: 47.99rem) {
    .cf-how { padding-inline: var(--s-gutter); }
}