/* Garden motion system (GARDEN_MOTION.md, final picks). CSS, the Web Animations API and View
   Transitions only. Black and white only. Reduced motion: no intro, float, shake or slides. */
:root{
  --ink:#0a0a0a;--paper:#fff;
  --dur-fast:180ms;--dur-base:420ms;--dur-slow:900ms;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in:cubic-bezier(.7,0,.84,0);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --stagger:30ms;
}

/* ---------- cross-document view transitions ---------- */
@view-transition{navigation:auto}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* default page change: a quick root cross-fade */
::view-transition-old(root){animation:260ms linear both vt-fade-out}
::view-transition-new(root){animation:260ms linear both vt-fade-in}
@keyframes vt-fade-out{to{opacity:0}}
@keyframes vt-fade-in{from{opacity:0}}

/* grid card -> rei hero (and back): the photo travels */
::view-transition-group(rei-hero){animation-duration:680ms;animation-timing-function:var(--ease-in-out)}
::view-transition-old(rei-hero),::view-transition-new(rei-hero){mix-blend-mode:normal;height:100%;object-fit:contain;animation-duration:680ms}
html[data-vt=hero-back]::view-transition-group(rei-hero){animation-duration:560ms}
html[data-vt=hero-back]::view-transition-old(rei-hero),html[data-vt=hero-back]::view-transition-new(rei-hero){animation-duration:560ms}
html[data-vt=hero-back]::view-transition-old(root){animation-duration:300ms}

/* tabs: only the content area slides, in the direction of travel; header and tab bar hold still */
html[data-vt=tab] main{view-transition-name:main-content}
html[data-vt=tab] .site-head{view-transition-name:site-head}
html[data-vt=tab] .registry-nav{view-transition-name:tabbar}
::view-transition-old(main-content){animation:240ms var(--ease-in) both vt-out}
::view-transition-new(main-content){animation:420ms var(--ease-out) both vt-in}
html[data-nav-dir=back]::view-transition-old(main-content){animation-name:vt-out-back}
html[data-nav-dir=back]::view-transition-new(main-content){animation-name:vt-in-back}
::view-transition-group(main-content){animation:none}
::view-transition-group(site-head),::view-transition-group(tabbar){animation:none}
::view-transition-old(site-head),::view-transition-old(tabbar){display:none}
::view-transition-new(site-head),::view-transition-new(tabbar){animation:none}
@keyframes vt-out{to{transform:translateX(-12%);opacity:0}}
@keyframes vt-in{from{transform:translateX(12%);opacity:0}}
@keyframes vt-out-back{to{transform:translateX(12%);opacity:0}}
@keyframes vt-in-back{from{transform:translateX(-12%);opacity:0}}

/* tab indicator: one bar that slides to the new tab (JavaScript only; borders remain without it) */
.registry-nav{position:relative}
.tab-ink{position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--ink);pointer-events:none;transform-origin:left;opacity:0}
html.has-tab-ink .tab-ink.is-set{opacity:1}
html.has-tab-ink .tab-ink.is-moving{transition:transform 450ms var(--ease-out),width 450ms var(--ease-out)}
html.has-tab-ink .registry-nav a[aria-current=page]{border-color:transparent}
@media(max-width:699px){.registry-nav{position:fixed}.tab-ink{top:0;bottom:auto;height:2px}}

/* ---------- Garden intro: "Flash Array" ---------- */
/* While the strobe photos decode (max 1200ms) the page waits under plain white, never longer. */
html.gi-pending body::after{content:"";position:fixed;inset:0;z-index:1000;background:var(--paper)}
html.gi-pending,html.gi-pending body,html.gi-lock,html.gi-lock body{overflow:hidden}
.gi{position:fixed;inset:0;z-index:1000;background:var(--paper);display:grid;place-items:center;text-align:center;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
/* the one full-viewport black frame: the final camera flash */
.gi.is-flash{background:var(--ink)}
.gi-stage{display:flex;flex-direction:column;align-items:center;justify-content:center}
.gi-frame{width:62vmin;height:62vmin;display:block}
/* black frames between style groups stay inside the centred image frame */
.gi-frame.is-black{background:var(--ink)}
.gi-frame img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.gi-label,.gi-welcome{font-family:Oswald,"Helvetica Neue",Arial,sans-serif;text-transform:uppercase;letter-spacing:.32em;font-size:clamp(11px,3.2vmin,16px);line-height:1.4;min-height:1.4em;margin-top:2vmin;padding-left:.32em}
.gi-title{font-family:Oswald,"Helvetica Neue",Arial,sans-serif;font-weight:500;font-size:clamp(34px,11vmin,110px);line-height:.95;margin-top:10px}
.gi-date{font-family:Oswald,"Helvetica Neue",Arial,sans-serif;font-weight:500;font-size:clamp(56px,22vmin,210px);line-height:.9;letter-spacing:-.02em}
.gi-skip{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:calc(16px + env(safe-area-inset-right,0px));font:10px Oswald,"Helvetica Neue",Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#8a8984;background:none;border:0;padding:8px;min-width:44px;min-height:44px;cursor:pointer}
.gi.is-flash .gi-skip{visibility:hidden}
.gi-pop{position:fixed;inset:0;z-index:999;background:var(--paper);pointer-events:none}

/* ---------- pull: burst, count roll ---------- */
.burst-dot{position:absolute;left:50%;top:50%;border-radius:50%;pointer-events:none}
.cnt{display:inline-block;position:relative;height:1.25em;overflow:hidden;vertical-align:bottom;font-variant-numeric:tabular-nums}
.cnt>span{display:block}
.cnt>span.cnt-in{position:absolute;inset:0}
.pull span[aria-hidden]{display:inline-block}
.pull-star{display:inline-block;position:relative}
.card-status{margin:6px 0 0;font-size:12px;line-height:1.4;color:var(--ink)}
.card-status:empty{display:none}

/* ---------- rei page ---------- */
.rei-hero-wrap{position:relative}
@keyframes rei-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.rei-hero-wrap.is-floating{animation:rei-float 4.6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.rei-hero-wrap.is-floating{animation:none}}

/* detail rows: each row's top rule is drawn by its own hairline so it can draw on arrival */
.mode-colorway dl.rec{border-top:0;position:relative}
.mode-colorway dl.rec>div{position:relative;border-bottom:0;padding-top:11px}
.mode-colorway dl.rec>div::before,.mode-colorway dl.rec::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--line);transform-origin:left}
.mode-colorway dl.rec>div::before{top:0}
.mode-colorway dl.rec::after{bottom:-1px}
html.rei-arrive .mode-colorway dl.rec>div::before,html.rei-arrive .mode-colorway dl.rec::after{animation:rule-draw 620ms var(--ease-in-out) 380ms both}
html.rei-arrive .mode-colorway dl.rec>div:nth-child(2)::before{animation-delay:450ms}
html.rei-arrive .mode-colorway dl.rec>div:nth-child(3)::before{animation-delay:520ms}
html.rei-arrive .mode-colorway dl.rec>div:nth-child(4)::before{animation-delay:590ms}
html.rei-arrive .mode-colorway dl.rec>div:nth-child(5)::before{animation-delay:660ms}
html.rei-arrive .mode-colorway dl.rec>div:nth-child(6)::before{animation-delay:730ms}
html.rei-arrive .mode-colorway dl.rec::after{animation-delay:800ms}
@keyframes rule-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* also in the room: a horizontal, snapping strip; the current rei is outlined */
.mode-colorway .also-list{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding:1px 1px 6px;scrollbar-width:thin}
.mode-colorway .also-list>li{flex:0 0 30%;scroll-snap-align:start;min-width:0}
.mode-colorway .also-list a[aria-current=page]{border-color:var(--ink);outline:1px solid var(--ink);outline-offset:-2px;color:var(--ink)}
@media(min-width:700px){.mode-colorway .also-list>li{flex-basis:18%}}
@media(min-width:1024px){.mode-colorway .also-list>li{flex-basis:13%}}

@media(prefers-reduced-motion:reduce){html.rei-arrive .mode-colorway dl.rec>div::before,html.rei-arrive .mode-colorway dl.rec::after{animation:none}}