/* Motion layer and resin veins. Loads after styles.css. Everything here collapses to static under reduced motion. */

/* Stacking: page content sits above the vein layer; heroes and bands keep their own opaque scenes. */
main, .site-footer { position: relative; z-index: 1; }

/* The resin pour: a low-resolution canvas of marbled swirls laid the full length of the page, with gold flakes
   drawn above it in SVG. Both sit behind everything; nothing in them is a line and nothing glows. */
.resin, .veins { position: absolute; top: 0; left: 0; width: 100%; z-index: 0; pointer-events: none; overflow: hidden; }
.resin--gl { position: fixed; inset: 0; height: 100%; }   /* shader pour: a fixed screen that redraws the page-anchored field on scroll */
.resin[data-intensity="subtle"] { opacity: .6; }
.resin[data-intensity="bold"] { opacity: 1.3; }
.veins[data-intensity="subtle"] .flakes { opacity: .6; }
.veins[data-intensity="bold"] .flakes { opacity: 1.3; }

/* Story hero (home): no render behind it, so the veins glow through the room; three photographs carry the story */
.hero--story { background: transparent; height: auto; min-height: max(100svh, 720px); grid-template-rows: auto minmax(0, 1fr); }
.hero--story .hero__inner { padding-top: calc(var(--header) + clamp(40px, 8vh, 96px)); }
.hero__story { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); align-content: center; width: 100%; max-width: 1180px; margin-inline: auto; box-sizing: border-box; padding: clamp(16px, 3vh, 36px) var(--gutter) clamp(48px, 8vh, 96px); min-height: 0; }
.story-plate { display: grid; justify-items: center; align-content: start; text-align: center; gap: clamp(16px, 2.2vh, 26px); }
.story-plate figure { position: relative; margin: 0; width: clamp(150px, 15vw, 230px); aspect-ratio: 4 / 5; padding: 6px; box-sizing: border-box; border: 1px solid rgba(201, 166, 92, .5); }
.story-plate figure::before { content: ""; position: absolute; inset: -34%; z-index: -1; pointer-events: none; background: radial-gradient(circle, rgba(201, 166, 92, .16), rgba(201, 166, 92, 0) 62%); }
.story-plate figure img { display: block; width: 100%; height: 100%; object-fit: cover; filter: sepia(.28) contrast(1.04) brightness(.92); }
.story-line { font: italic 400 clamp(18px, 1.55vw, 24px)/1.35 var(--serif); max-width: 24ch; color: var(--ivory); text-shadow: 0 2px 24px rgba(0, 0, 0, .85); text-wrap: balance; margin: 0; }
.story-line em { color: var(--gold); }
.story-line--last { font-family: var(--display); font-style: normal; text-transform: uppercase; letter-spacing: .24em; text-indent: .24em; font-size: clamp(14px, 1.25vw, 18px); line-height: 1.6; }
.story-line--last em { font-style: normal; }
.collection-cta { margin-top: clamp(40px, 5vw, 72px); text-align: center; }
@media (max-width: 700px) {
  .hero--story { min-height: max(100svh, 640px); }
  .hero__story { grid-template-columns: 1fr; gap: 30px; padding-bottom: 56px; }
  .story-plate { grid-template-columns: 38% minmax(0, 1fr); align-items: center; justify-items: start; text-align: left; gap: 18px; }
  .story-plate figure { width: 100%; }
  .story-plate:nth-child(2) figure { order: 2; }
  .story-plate:nth-child(2) { text-align: right; justify-items: end; }
  .story-line--last { text-indent: 0; }
}

/* Engraved headings: letters rise out of the dark one by one */
.engrave span, .engrave-now span { display: inline-block; white-space: pre; }
.engrave .w, .engrave-now .w { white-space: nowrap; }
.engrave span { opacity: 0; transform: translateY(.35em); filter: blur(6px); transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); transition-delay: calc(var(--i, 0) * 26ms); }
.engrave.engraved span { opacity: 1; transform: none; filter: none; }
.reveal .h-section::after, .split__copy h2::after { transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--ease) .3s; }
.reveal.in .h-section::after, .reveal.in .split__copy h2::after, .split__copy.in h2::after { transform: scaleX(1); }

/* Images wipe up out of the lacquer instead of fading. The clip sits on the image, not on the observed element:
   Chrome applies a target's own clip-path when measuring intersection, so a fully clipped element would never reveal. */
.split__media.reveal img, .gallery figure.reveal img { clip-path: inset(100% 0 0 0); transition: clip-path 1.4s var(--ease); }
.split__media.reveal.in img, .gallery figure.reveal.in img { clip-path: inset(0 0 0 0); }
.piece.reveal .piece__media { clip-path: inset(100% 0 0 0); transition: clip-path 1.4s var(--ease), transform .6s var(--ease); }
.piece.reveal.in .piece__media { clip-path: inset(0 0 0 0); }

/* Piece tiles tilt toward the pointer; the accent glow follows */
.piece__media { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; }
.piece__media::before { background: radial-gradient(ellipse 60% 50% at var(--mx, 50%) var(--my, 72%), color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%); }

/* Candle light following the pointer */
.candle { position: fixed; left: 0; top: 0; width: 680px; height: 680px; margin: -340px 0 0 -340px; border-radius: 50%; pointer-events: none; z-index: 45; opacity: 0; transition: opacity .8s ease; will-change: transform; mix-blend-mode: screen; background: radial-gradient(circle, rgba(201, 166, 92, .17) 0%, rgba(201, 166, 92, .06) 38%, rgba(201, 166, 92, 0) 70%); }
.candle.on { opacity: 1; }

/* Mobile Call bar: rises at the foot of the page instead of sticking */
@media (max-width: 900px) {
  .mobile-bar { transform: translateY(130%); opacity: 0; transition: transform .75s cubic-bezier(.2, 1.35, .4, 1), opacity .35s ease; }
  .mobile-bar.is-up { transform: none; opacity: 1; }
  body.has-bar { padding-bottom: 0; }
  .site-footer { padding-bottom: 128px; }
}

/* Motion (opt-in) */
@media (prefers-reduced-motion: no-preference) {
  body::before { content: ""; position: fixed; inset: 0; z-index: 95; background: var(--lacquer); pointer-events: none; animation: curtain 1.1s var(--ease) .15s forwards; }
  @keyframes curtain { to { opacity: 0; visibility: hidden; } }
  .engrave-now span { opacity: 0; transform: translateY(.3em); filter: blur(8px); animation: engrave 1.1s var(--ease) forwards; animation-delay: calc(.2s + var(--i, 0) * 55ms); }
  @keyframes engrave { to { opacity: 1; transform: none; filter: none; } }
  .glare--once::before { animation: glare-sweep 1.6s var(--ease) 1.4s forwards; }
  .hero__word.glare { padding: .08em .25em; margin: -.08em -.25em; }
  .story-plate:nth-child(1) { --d: 1.3s; }
  .story-plate:nth-child(2) { --d: 2.1s; }
  .story-plate:nth-child(3) { --d: 2.9s; }
  .story-plate figure { clip-path: inset(100% 0 0 0); animation: plate-in 1.6s var(--ease) var(--d) forwards; }
  .story-plate figure img { transform: scale(1.12); animation: plate-settle 7s var(--ease) var(--d) forwards; }
  @keyframes plate-in { to { clip-path: inset(0 0 0 0); } }
  @keyframes plate-settle { to { transform: none; } }
  .story-line { opacity: 0; transform: translateY(14px); filter: blur(6px); animation: story-in 1.5s var(--ease) calc(var(--d, 1.3s) + .35s) forwards; }
  @keyframes story-in { to { opacity: 1; transform: none; filter: none; } }
  .page-head .rule-lockup span { transform: scaleX(0); transform-origin: left; animation: rule-draw 1.4s var(--ease) .5s forwards; }
  .page-head .rule-lockup img { opacity: 0; animation: appear-in 1s var(--ease) .9s forwards; }
  @keyframes rule-draw { to { transform: scaleX(1); } }
  @keyframes appear-in { to { opacity: .95; } }
  .site-footer .rule-lockup span { transform: scaleX(0); transition: transform 1.4s var(--ease); }
  .site-footer .rule-lockup span:first-child { transform-origin: right; }
  .site-footer .rule-lockup span:last-child { transform-origin: left; }
  .site-footer.in .rule-lockup span, .site-footer .rule-lockup.in span { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .engrave span, .engrave-now span, .story-line { opacity: 1; transform: none; filter: none; }
  .split__media.reveal img, .gallery figure.reveal img, .piece.reveal .piece__media, .story-plate figure { clip-path: none; }
  .reveal .h-section::after, .split__copy h2::after { transform: none; }
  .mobile-bar { transform: none; opacity: 1; }
}