/* Site-wide motion. Slow, quiet, and never in the way.
   Everything that hides content is scoped to html.rv-on, which is only set when animation is
   supported and wanted, and is removed again if motion.js fails to start. With scripts off, or
   with "reduce motion" on, the site simply shows everything at once. */

/* ---- page transitions: a soft fade in, and a quicker fade out when moving on ---- */
@keyframes tm-page-in { from { opacity: 0; } to { opacity: 1; } }
/* Shared timing: immediate controls, quiet editorial arrivals. */
:root { --tm-ease: cubic-bezier(.22,1,.36,1); --tm-control: 220ms; --tm-reveal: 780ms; --tm-slow: 1000ms; }
html { scroll-padding-top: 0; }
[id] { scroll-margin-top: 96px; }
body { animation: tm-page-in 260ms ease-out both; }
html.leaving body { opacity: 0; transition: opacity 100ms ease-out; animation: none; }

/* ---- reveal on scroll: things come quietly into view. A short rise, a long even fade, no wipes ---- */
html.rv-on [data-rv] {
  opacity: 0; transform: translateY(6px);
  transition: opacity 780ms var(--tm-ease), transform 900ms var(--tm-ease);
  transition-delay: var(--d, 0ms);
}
html.rv-on [data-rv].in { opacity: 1; transform: none; }

/* photographs settle very slightly as they appear, the way an eye adjusts */
.rv-c { position: relative; }
html.rv-on [data-rv] .rv-c > img, html.rv-on [data-rv] .rv-c > a > img { transform: scale(1.012); transition: transform 1200ms var(--tm-ease); transition-delay: var(--d, 0ms); }
html.rv-on [data-rv].in .rv-c > img, html.rv-on [data-rv].in .rv-c > a > img { transform: none; }

/* ---- hero: the photograph eases back from a slight zoom; the title arrives a beat later ---- */
@keyframes tm-settle { from { transform: scale(1.018); } to { transform: scale(1); } }
@keyframes tm-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
html.rv-on .tm-settle { animation: tm-settle 1800ms var(--tm-ease) both; }
html.rv-on .tm-rise { animation: tm-rise 900ms var(--tm-ease) both; animation-delay: var(--d, 120ms); }

/* ---- landing slider: a slide's caption arrives when the slide does ---- */
html.rv-on .slide-cap > * {
  opacity: 0; transform: translateY(8px);
  transition: opacity 780ms var(--tm-ease), transform 900ms var(--tm-ease);
}
html.rv-on .is-active .slide-cap > * { opacity: 1; transform: none; }
html.rv-on .is-active .slide-cap > *:nth-child(1) { transition-delay: 80ms; }
html.rv-on .is-active .slide-cap > *:nth-child(2) { transition-delay: 140ms; }
html.rv-on .is-active .slide-cap > *:nth-child(3) { transition-delay: 200ms; }

/* ---- links: a hairline that draws in from the left ---- */
.lnk { position: relative; }
.lnk::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.35em; height: 1px; background: var(--tomita, #fc8702);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 360ms var(--tm-ease);
}
.lnk:hover::after, .lnk:focus-visible::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  body { animation: none; }
  html.rv-on [data-rv], html.rv-on .slide-cap > * { opacity:1; transform:none; transition:none; }
  html.rv-on .tm-settle, html.rv-on .tm-rise { animation:none; }
  .lnk::after, .warm-tone { transition:none; }
  html.leaving body { transition: none; }
}

/* ---- the collection story: fixed beside the designs, and scrollable on its own ----
   If the text is taller than the window it scrolls inside its own column, so it can be read to
   the end without moving the page. The bottom fades out only while there is more to read. */
@media (min-width: 768px) {
  .story-scroll {
    max-height: calc(100vh - 9.5rem); overflow-y: auto; overscroll-behavior: contain;
    padding-right: 0.75rem; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.18) transparent;
  }
  .story-scroll::-webkit-scrollbar { width: 3px; }
  .story-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 3px; }
  .story-scroll::-webkit-scrollbar-track { background: transparent; }
  .story-scroll.has-more {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3.5rem), transparent);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 3.5rem), transparent);
  }
}

/* ---- warmth: paper grain on the page, and a soft sumi-brown tone on the workshop photographs ---- */
.paper { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.42  0 0 0 0 0.32  0 0 0 0 0.22  0 0 0 0.07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.warm-tone { filter: sepia(0.42) saturate(0.85) contrast(0.96) brightness(1.03); transition: filter 900ms ease, transform 1400ms cubic-bezier(0.22,1,0.36,1); }
figure:hover .warm-tone { filter: sepia(0.2) saturate(0.95); transform: scale(1.03); }

/* ---- one sans-serif for the whole site ----
   Inter is loaded with every page (see the fonts link in each <head>), so labels, captions and body text look the same on a Mac,
   on Windows and on a phone, instead of falling back to whatever each machine has. Headings stay in Playfair Display. */
:root, .font-sans { font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

/* ---- Tomita orange, used sparingly as the accent across the site ---- */
:root { --tomita: #fc8702; }
::selection { background: rgba(252,135,2,0.28); }
:focus-visible { outline: 1px solid var(--tomita); outline-offset: 4px; }
.dot-on { background: var(--tomita) !important; }

@media(max-width:767px){[id]{scroll-margin-top:80px;}html.rv-on [data-rv]{transition-duration:650ms;}}

html:has(#heroImages) body{animation:none;}

/* Keep anchor movement immediate and manual scrolling browser-native. */
html{scroll-behavior:auto!important;scroll-snap-type:none!important;}
body{scroll-snap-type:none!important;}