/* Base reset from the original Stitch design */
@layer base{html,body{margin:0;padding:0;}body{overscroll-behavior:none;}main>:first-child{margin-top:0!important;}main>:last-child{margin-bottom:0!important;}}::-webkit-scrollbar{display:none;}

/* Motion tokens: one easing and one set of timings for every reveal and micro-interaction */
:root {
  --cw-ease-out: cubic-bezier(.22, 1, .36, 1);
  --cw-reveal-rise: 18px;
  --cw-focus: #15803d;
}

/* ---- Resting states (what visitors see with motion paused or reduced) ---- */
.street-day .shutter { transform: translateY(var(--lift, -108px)); }
.street-day .glow { opacity: .22; }
html:not(.motion-on) .marquee .marquee-track { width: auto; flex-wrap: wrap; justify-content: center; }
html:not(.motion-on) .marquee-track > [aria-hidden="true"] { display: none; }

/* ---- Keyboard focus: one clear brand ring (white on the dark green bands); never animated ---- */
:focus-visible { outline: 2px solid var(--cw-focus); outline-offset: 3px; }
.bg-primary-container :focus-visible, .bg-primary :focus-visible { --cw-focus: #ffffff; }

/* ---- Hover and press feedback (colour changes always; movement only while motion is on) ---- */
/* Button-like links and buttons */
:is(a, button).inline-flex:is(.rounded-lg, .rounded-full) {
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .25s ease, scale .15s var(--cw-ease-out);
}
/* Content cards (class cw-card): a soft lift, deeper shadow and a faint green edge */
.cw-card { --cw-card-hover: box-shadow .3s ease, translate .35s var(--cw-ease-out); transition: var(--cw-card-hover); }
@media (hover: hover) and (pointer: fine) {
  :is(a, button).inline-flex:is(.rounded-lg, .rounded-full).shadow-sm:hover { box-shadow: 0 6px 16px -8px rgba(19, 27, 46, .28); }
  .cw-card:hover { box-shadow: 0 0 0 1px rgba(21, 128, 61, .14), 0 14px 28px -14px rgba(19, 27, 46, .22); }
  .motion-on .cw-card:hover { translate: 0 -3px; }
}
.motion-on :is(a, button).inline-flex:is(.rounded-lg, .rounded-full):active { scale: .97; }

/* ---- Motion: only while html has .motion-on (toggle in the header) ---- */
.motion-on { scroll-behavior: smooth; }

/* Scroll reveals: the script at the bottom adds .is-in as elements enter the viewport.
   Opacity and the rise wait for the stagger (--d); a card's hover transitions are appended without that delay. */
[data-reveal] { --cw-reveal: opacity .7s ease var(--d, 0ms), transform .9s var(--cw-ease-out) var(--d, 0ms); }
.motion-on [data-reveal] { transition: var(--cw-reveal); }
.motion-on [data-reveal].cw-card { transition: var(--cw-reveal), var(--cw-card-hover); }
.motion-on [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(var(--cw-reveal-rise)); }
/* Page heroes (the dawn band): a slower, softer entrance */
.motion-on .bg-dawn [data-reveal] { --cw-reveal: opacity .9s ease var(--d, 0ms), transform 1.1s var(--cw-ease-out) var(--d, 0ms); }

/* Phone menu: unfolds downwards from the header and fades; the script removes .hidden first */
.motion-on #mobile-menu.is-opening { animation: menu-open .26s var(--cw-ease-out) both; }
.motion-on #mobile-menu.is-closing { animation: menu-close .18s ease-in both; }

/* Hero street: shutters roll up shop by shop, lights come on, the sun rises */
.motion-on .street-day .shutter { animation: shutter-up 1.3s cubic-bezier(.65,0,.25,1) both; animation-delay: var(--d); }
.motion-on .street-day .glow { animation: lights-on .9s ease-out both; animation-delay: calc(var(--d) + .6s); }
.motion-on .street-day .sun { animation: sun-rise 2.8s cubic-bezier(.2,.7,.2,1) both; }

/* Evening street: windows light up as the closing section scrolls in */
.lamp { transition: opacity 1.2s ease var(--d, 0ms); }
.motion-on [data-reveal]:not(.is-in) .lamp { opacity: .12; }
/* ...then a few of them dim and brighten twice, slowly, like rooms in use, and settle (no endless repainting) */
.motion-on [data-reveal].is-in .lamp-life { animation: lamp-life var(--t, 11s) ease-in-out var(--ld, 3s) 2; }

/* Onboarding: connector lines draw between steps */
.step-line { transform-origin: left center; transition: transform 1s cubic-bezier(.65,0,.25,1) .35s; }
.motion-on [data-reveal]:not(.is-in) .step-line { transform: scaleX(0); }

/* Ledger: export files slide out of the book */
.export-file { transition: transform 1s cubic-bezier(.2,.7,.2,1) var(--d, .3s); }
.motion-on [data-reveal]:not(.is-in) .export-file { transform: translate(-60px, 30px); }

/* Principles ticker: one GPU layer; pauses for a mouse pointer (not for taps) and while off-screen */
.motion-on .marquee-track { animation: marquee 45s linear infinite; will-change: transform; }
@media (hover: hover) and (pointer: fine) { .motion-on .marquee:hover .marquee-track { animation-play-state: paused; } }

/* Looping decoration stops while scrolled out of view (the script sets .is-offscreen) */
.motion-on .is-offscreen .marquee-track, .motion-on .is-offscreen .lamp-life { animation-play-state: paused; }

@keyframes shutter-up { from { transform: translateY(0); } to { transform: translateY(var(--lift, -108px)); } }
@keyframes lights-on { from { opacity: 0; } to { opacity: .22; } }
@keyframes sun-rise { from { transform: translateY(90px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes marquee { to { transform: translateX(-25%); } }
@keyframes lamp-life { 0%, 100% { opacity: 1; } 45%, 60% { opacity: .55; } }
@keyframes menu-open { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes menu-close { from { opacity: 1; clip-path: inset(0 0 0 0); } to { opacity: 0; clip-path: inset(0 0 100% 0); } }