/* Movement is an enhancement. Without JavaScript every element remains visible. */
:root {
  --motion-out: cubic-bezier(.22, 1, .36, 1);
  --motion-spring: linear(0, .0524, .1715, .3156, .4599, .5904, .701, .7901, .8589, .9101, .9467, .9718, .9883, .9984, 1.0041, 1.0069, 1.0077, 1.0074, 1.0066, 1.0055, 1.0044, 1.0033, 1.0024, 1.0017, 1.0012, 1.0008, 1);
}
.hero-line { display: block; overflow: clip; padding: .12em .045em; margin: -.12em -.045em; }
.hero-line > span { display: block; }
.hero-scene { min-width: 0; perspective: 1400px; }
.hero-picture { transform-style: preserve-3d; transform-origin: 50% 48%; }
.wordmark .logo-number { color: var(--accent); font-size: 1.3em; font-style: italic; margin-right: .025em; }
.hero-picture > a:first-child { position: relative; isolation: isolate; }
.hero-photo-depth { display: block; transform-origin: center; }
.hero-picture > a:first-child::after {
  content: ''; position: absolute; inset: 0; background: var(--secondary-wash);
  transform: scaleY(0); transform-origin: center top; pointer-events: none; z-index: 2;
}
.bloom-seal {
  position: absolute; width: 112px; height: 112px; left: -42px; top: 34px; z-index: 3;
  border-radius: 50%; background: var(--paper); color: var(--gold); pointer-events: none;
  box-shadow: 0 5px 18px #302C2C0C;
}
.bloom-seal svg { display: block; width: 100%; height: 100%; }
.bloom-seal text { font: 9px Arial, sans-serif; letter-spacing: 2px; fill: currentColor; }
.editorial-strip { overflow: clip; border: 0; background: var(--paper); color: var(--ink); }
.editorial-strip .wrap {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(150px, .85fr) minmax(0, 3fr);
  gap: 42px; align-items: start; padding-block: 96px 84px; text-align: left;
}
.editorial-kicker {
  margin: 10px 0 0; font: 23px/1.35 var(--serif); letter-spacing: -.025em;
  color: var(--muted); max-width: 215px;
}
.editorial-message { margin: 0; position: relative; z-index: 1; font-family: var(--serif); letter-spacing: -.055em; }
.editorial-line { display: block; font-size: clamp(40px, 4.8vw, 72px); line-height: 1.2; white-space: nowrap; }
.editorial-line > span { display: inline-block; }
.editorial-line-accent { padding-left: 8%; color: var(--accent); font-size: clamp(88px, 10.4vw, 158px); line-height: 1.03; font-weight: 400; }
.editorial-flower { position: absolute; right: 1.5%; bottom: 24px; width: 225px; height: 225px; color: var(--secondary-wash); z-index: 0; pointer-events: none; }
.editorial-corolla, .editorial-petal, .editorial-heart { transform-box: view-box; transform-origin: 100px 100px; }
.editorial-strip + .section { padding-top: 36px; }
.about-strip { position: relative; overflow: clip; isolation: isolate; padding-block: 94px; border: 0; }
.about-strip::before { content: none; }
.about-row h2 { font-size: clamp(50px, 5.3vw, 78px); }
.card-visual > a, .format-photo, .work-grid article > a { display: block; position: relative; overflow: hidden; }
.motion-reveal { opacity: 1; }
.motion-reveal.is-revealed {
  animation: section-enter 850ms var(--motion-out) var(--reveal-delay, 0ms) both;
}
.motion-reveal:focus-within { animation: none; }
.reading-progress { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .motion-hero .hero-copy > .eyebrow { animation: soft-enter 650ms var(--motion-out) both; }
  .motion-hero .hero-line > span { animation: line-enter 1000ms var(--motion-out) both; }
  .motion-hero .hero-line:nth-child(2) > span { animation-delay: 110ms; }
  .motion-hero .hero-line:nth-child(3) > span { animation-delay: 220ms; }
  .motion-hero .hero-sub { animation: soft-enter 850ms var(--motion-out) 330ms both; }
  .motion-hero .hero-copy > .actions { animation: soft-enter 850ms var(--motion-out) 430ms both; }
  .motion-hero .hero-note { animation: soft-enter 850ms var(--motion-out) 520ms both; }
  .motion-hero .hero-picture > a:first-child::after { animation: photo-curtain 1250ms var(--motion-out) 80ms both; }
  .motion-hero .hero-caption { animation: soft-enter 850ms var(--motion-out) 430ms both; }
  .motion-hero .bloom-seal { animation: seal-enter 1100ms var(--motion-out) 600ms both; }
  .motion-ready .side-dialog[open] { animation: panel-enter 450ms var(--motion-out) both; }
  .motion-ready .side-dialog[open]::backdrop { animation: backdrop-enter 300ms ease both; }
  .motion-ready .mega[open] .mega-panel { animation: soft-enter 320ms var(--motion-out) both; }
  .button, .quiet-button, .favorite, .variant-options label, .category-chips a {
    transition: transform 450ms var(--motion-out), background 220ms ease, border-color 220ms ease, color 220ms ease;
  }
  .button > svg, .quiet-button > svg, .text-link > svg, .card-choose > svg, .format > svg {
    transition: transform 800ms var(--motion-spring);
  }
  .button:active, .icon-button:active { transform: scale(.96); }
  .variant-options label:has(input:checked) { animation: choice-settle 420ms var(--motion-out); }
  .card-visual img, .format-photo img, .work-grid article > a img {
    transition: transform 1000ms var(--motion-out);
  }
  @supports (animation-timeline: scroll()) {
    .reading-progress {
      display: block; position: fixed; top: 0; left: 0; width: 100%; height: 3px;
      z-index: 40; pointer-events: none; background: var(--secondary);
      transform-origin: left; animation: reading-progress linear both; animation-timeline: scroll();
    }
  }
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: page-out 180ms ease both; }
  ::view-transition-new(root) { animation: page-in 360ms var(--motion-out) both; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* Reserve 2.25% on every edge, including the resting and return states. */
  .hero-photo-depth { transform: scale(1.045); }
  .hero-picture .bloom-seal { translate: 0 0 32px; }
  .hero-picture > a:first-child::before {
    content: ''; position: absolute; inset: -40%; z-index: 1; pointer-events: none;
    background: linear-gradient(115deg, transparent 25%, #FFFDFAAA 47%, #FFFDFA22 61%, transparent 75%);
    mix-blend-mode: soft-light; opacity: 0;
    transform: translate(var(--hero-light-x, -28%), var(--hero-light-y, 0%));
    transition: opacity 650ms ease;
  }
  .hero-picture.is-hero-viewing > a:first-child::before { opacity: .38; }
  .hero-caption strong { transition: color 350ms ease; }
  .hero-caption > span:last-child > svg { transition: transform 700ms var(--motion-spring); }
  .hero-picture.is-hero-viewing .hero-caption strong { color: var(--accent); }
  .hero-picture.is-hero-viewing .hero-caption > span:last-child > svg { transform: translateX(6px); }
  .button:hover { transform: translateY(-3px); }
  .button:hover > svg, .quiet-button:hover > svg, .text-link:hover > svg, .card-choose:hover > svg, .format:hover > svg { transform: translateX(5px); }
  .favorite:hover { transform: scale(1.08); }
  .hero-caption:hover strong { color: var(--secondary-hover); }
  .budget-links > a { transition: color 250ms ease; }
  .budget-links > a strong { display: block; transition: transform 800ms var(--motion-spring); }
  .budget-links > a:hover { color: var(--accent); }
  .budget-links > a:hover strong { transform: translateX(8px); }
}
@keyframes section-enter { from { opacity: 0; transform: translateY(var(--reveal-distance, 34px)); } to { opacity: 1; transform: none; } }
@keyframes line-enter { from { transform: translateY(112%) rotate(2deg); } to { transform: none; } }
@keyframes soft-enter { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes photo-curtain { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes seal-enter { from { opacity: 0; transform: scale(.72) rotate(-28deg); } to { opacity: 1; transform: none; } }
@keyframes panel-enter { from { opacity: .4; transform: translateX(100%); } to { opacity: 1; transform: none; } }
@keyframes backdrop-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes choice-settle { 50% { transform: translateY(-2px); } }
@keyframes reading-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 800px) {
  .bloom-seal { width: 84px; height: 84px; left: -22px; top: 20px; }
  .editorial-strip .wrap { grid-template-columns: 1fr; padding-block: 68px 56px; gap: 26px; }
  .editorial-kicker { font-size: 21px; max-width: none; }
  .editorial-kicker br { display: none; }
  .editorial-line { font-size: clamp(36px, 6.2vw, 49px); }
  .editorial-line-accent { font-size: clamp(88px, 15vw, 120px); padding-left: 6%; }
  .editorial-flower { width: 185px; height: 185px; right: 2%; bottom: 20px; }
  .about-strip { padding-block: 65px; }
}
@media (max-width: 550px) {
  .bloom-seal { width: 78px; height: 78px; left: auto; right: 12px; top: -20px; }
  .editorial-strip .wrap { padding-block: 50px 42px; gap: 22px; text-align: left; }
  .editorial-kicker { font-size: 18px; line-height: 1.3; margin: 0; max-width: 230px; }
  .editorial-line { font-size: clamp(27px, 7.9vw, 42px); }
  .editorial-line-accent { font-size: clamp(62px, 19vw, 100px); padding-left: 0; line-height: 1.14; }
  .editorial-flower { width: 130px; height: 130px; right: -25px; bottom: 26px; }
  .editorial-strip + .section { padding-top: 30px; }
  .about-row h2 { font-size: 49px; }
  .about-strip::before { font-size: 320px; top: 10px; right: -90px; }
  .motion-reveal { --reveal-distance: 20px; }
  .motion-reveal.is-revealed { animation-duration: 550ms; }
  .motion-hero .hero-line > span { animation-duration: 800ms; }
  .motion-hero .hero-picture > a:first-child::after { animation-duration: 950ms; }
  .motion-hero .bloom-seal { animation-delay: 350ms; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-reveal { opacity: 1; transform: none; }
  .reading-progress { display: none; }
  .hero-picture > a:first-child::after { display: none; }
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@media print {
  .motion-reveal { opacity: 1 !important; transform: none !important; }
  .reading-progress, .bloom-seal { display: none; }
}

/* The native viewing cursor stays small. Card motion is enabled separately. */
.card-visual a:hover img, .format:hover img, .work-grid article > a:hover img { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .hero-picture > a:first-child, .card-visual > a, .format-photo, .work-grid article > a {
    cursor: url("/media/view-cursor.svg") 16 16, pointer;
  }
}
/* Antique gold is reserved for small ornaments and rules. */
.hero-note { border-top-color: var(--gold-line); }
.bloom-seal, .editorial-strip .strip-flower, .format-num, .steps > div > span { color: var(--gold); }
.reading-progress { background: var(--gold); }

/* Motion stays inside a fixed photographic frame, without an external layer. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .product-card[data-card-motion] {
    position: relative;
    --card-spring: linear(0, .0642, .2034, .3633, .5152, .6455, .7504, .8306, .8895, .9312, .9596, .9782, .9899, .9968, 1.0005, 1.0023, 1, 1);
  }
  .product-card[data-card-motion] .card-visual > a {
    display: block; isolation: isolate; z-index: 1; background: var(--wash);
  }
  .product-card[data-card-motion] .card-visual > a > img {
    transition: transform 550ms var(--card-spring);
  }
  .product-card[data-card-motion] .card-visual > a::after {
    content: ''; position: absolute; inset: -35%; z-index: 2; pointer-events: none;
    background: linear-gradient(115deg, transparent 24%, #FFFDFA99 47%, #FFFDFA22 58%, transparent 73%);
    opacity: 0; transform: translate(var(--glint-x, -24%), var(--glint-y, 0%));
    transition: opacity 400ms ease, transform 220ms ease-out;
    mix-blend-mode: soft-light;
  }
  .product-card[data-card-motion] .favorite, .product-card[data-card-motion] .photo-badge { z-index: 3; }
  .product-card[data-card-motion]::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -9px; height: 1px;
    background: var(--gold-line); transform: scaleX(0); transform-origin: left;
    transition: transform 550ms var(--motion-out); pointer-events: none;
  }
  .product-card[data-card-motion] .card-meta h3 { transition: color 250ms ease; }
  .product-card[data-card-motion] .card-choose > svg { transition: transform 550ms var(--card-spring); }
  .product-card.is-card-hovered .card-visual > a > img { transition: transform 140ms ease-out; }
  .product-card.is-card-hovered .card-visual > a::after { opacity: .3; }
  .product-card.is-card-hovered .card-meta h3,
  .product-card[data-card-motion]:focus-within .card-meta h3 { color: var(--accent); }
  .product-card.is-card-hovered .card-choose > svg { transform: translateX(6px); }
  .product-card.is-card-hovered::after, .product-card[data-card-motion]:focus-within::after { transform: scaleX(1); }
}

/* Quiet first-screen entrance; the card keeps its subtle pointer depth. */
@media (prefers-reduced-motion: no-preference) {
  .motion-hero .hero-line > span { animation-name: hero-copy-appear; animation-duration: 1000ms; animation-timing-function: ease; }
  .motion-hero .hero-copy > .eyebrow, .motion-hero .hero-sub,
  .motion-hero .hero-copy > .actions, .motion-hero .hero-note,
  .motion-hero .hero-caption { animation-name: hero-copy-appear; }
  .motion-hero .hero-scene { animation: hero-photo-appear 1100ms ease both; }
  .motion-hero .hero-picture > a:first-child::after { animation: none; }
  .motion-hero .bloom-seal { animation: hero-seal-appear 1100ms ease 300ms both; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hero-picture.is-hero-viewing > a:first-child::before { opacity: .2; }
  .hero-picture .bloom-seal { translate: 0 0 16px; }
}
@media (min-width: 801px) {
  .hero-picture .bloom-seal { width: 90px; height: 90px; left: -32px; top: 24px; }
}
@keyframes hero-copy-appear { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes hero-photo-appear { from { opacity: .5; } to { opacity: 1; } }
@keyframes hero-seal-appear { from { opacity: 0; transform: translateY(4px) rotate(-6deg); } to { opacity: 1; transform: none; } }