/*
 * Public funnel page transitions (welcome/login, /start/ wizard, signup).
 *
 * Cross-document View Transitions make the funnel feel like one page: the
 * garden canvas is one shared element (lt-garden) that morphs from the
 * full-bleed welcome/login backdrop into the wizard/signup pane and back,
 * while the rest of the page does a short fade. Linked only from the funnel
 * templates, so the app's other pages (and the plot designer's same-document
 * transitions) keep their defaults.
 *
 * The new page's copy of this file styles the animation, so every funnel
 * page must link it. A view-transition-name must be unique per rendered page.
 *
 * The outgoing side (partials/includes/_funnel_transitions.html, included by
 * every funnel page) sets html.lt-vt-exit on pageswap when the destination is
 * not a funnel page, and html.lt-vt-leaving on every swap.
 */

@view-transition {
    navigation: auto;
}

#garden-canvas {
    view-transition-name: lt-garden;
}

/* The wizard's location step covers the garden with the map: let the map
   (part of the page) fade instead of flashing the hidden garden on top. */
.wz-pane:has(> .wz-map.is-on) > #garden-canvas {
    view-transition-name: none;
}

.lt-wordmark {
    view-transition-name: lt-wordmark;
}

.lt-toolbar {
    view-transition-name: lt-toolbar;
}

/* Optional: the paper sheet over the full-bleed garden on welcome/login.
   Named, it stays above the garden while the garden morphs. */
.lt-sheet {
    view-transition-name: lt-sheet;
}

/* Signup's form column is a sheet on phones only (garden_window.css), so it
   takes the name there: it stays above the garden like login's sheet, and
   morphs into it on the way to login. */
@media (max-width: 959.98px) {
    .lt-sheet-phone {
        view-transition-name: lt-sheet;
    }
}

/* Leaving the funnel (sign-in lands on the dashboard): no named pieces, so
   the app page gets the app's plain page cross-fade, not the funnel's garden
   and sheet fading over it. */
html.lt-vt-exit #garden-canvas,
html.lt-vt-exit .lt-wordmark,
html.lt-vt-exit .lt-toolbar,
html.lt-vt-exit .lt-sheet,
html.lt-vt-exit .lt-sheet-phone {
    view-transition-name: none;
}

/* ---------------------------------------------------------------- page */

@keyframes lt-vt-out {
    to { opacity: 0; }
}

@keyframes lt-vt-in {
    from { opacity: 0; transform: translateY(8px); }
}

/* The new page fades and rises in over the old one, which stays opaque
   underneath: a normal-blend fade never dims (the default plus-lighter
   cross-fade only adds up when both halves share one curve). */
::view-transition-old(root) {
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-new(root) {
    animation: 240ms cubic-bezier(.25, 1, .5, 1) both lt-vt-in;
    mix-blend-mode: normal;
}

/* ---------------------------------------------------------------- garden */

/* The box morphs size and position; its corners follow the pane's radius. */
::view-transition-group(lt-garden) {
    animation-duration: 450ms;
    animation-timing-function: cubic-bezier(.25, 1, .5, 1);
    overflow: hidden;
}

/* Both snapshots fill the moving box and crop instead of stretching, anchored
   to the ground line so the lawn stays put while the box changes shape. */
::view-transition-old(lt-garden),
::view-transition-new(lt-garden) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 100%;
}

/* The scenes cross-fade with the UA keyframes: one shared curve keeps the
   plus-lighter blend at full strength throughout. */
::view-transition-old(lt-garden),
::view-transition-new(lt-garden) {
    animation-duration: 320ms;
    animation-timing-function: cubic-bezier(.25, 1, .5, 1);
}

/* ---------------------------------------------------------------- chrome */

/* Wordmark and toolbar sit in the same spot on every funnel page: hold them
   still (a matching pair simply swaps; a moved one glides with the garden). */
::view-transition-group(lt-wordmark),
::view-transition-group(lt-toolbar) {
    z-index: 2;
    animation-duration: 450ms;
    animation-timing-function: cubic-bezier(.25, 1, .5, 1);
}

::view-transition-old(lt-wordmark),
::view-transition-old(lt-toolbar) {
    animation: none;
    opacity: 0;
}

::view-transition-new(lt-wordmark),
::view-transition-new(lt-toolbar) {
    animation: none;
}

/* Groups stack in the new page's paint order: lift the chrome and the sheet
   above the garden, which sits under them on welcome/login. */
::view-transition-group(lt-sheet) {
    z-index: 1;
    animation-duration: 300ms;
    animation-timing-function: cubic-bezier(.25, 1, .5, 1);
}

/* Out fast, so the old sheet's text is gone before the new page's settles
   in underneath it. */
::view-transition-old(lt-sheet) {
    animation: 120ms cubic-bezier(.4, 0, 1, 1) both lt-vt-out;
}

/* The sheet's glass (backdrop blur) is off while a transition runs (see
   garden_window.css), so neither snapshot carries a blurred pane. */
::view-transition-new(lt-sheet) {
    animation: 260ms cubic-bezier(.25, 1, .5, 1) both lt-vt-in;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}