/* ==========================================================================
   motion.css — ornament and movement.

   Two jobs:

   1. ORNAMENT. A layer of gold pattern, framing and texture that lifts the
      page from plain-minimal towards maximalist, without ever sitting under
      running text. Ornament marks moments: section grounds, frames, corners
      and dividers.

   2. MOTION. A different, deliberate hover behaviour for each kind of
      element, so moving the cursor across the page feels like moving across
      real objects rather than a wall of identical cards.

   Everything here is decoration. If this file fails to load the site still
   works, and every effect collapses under `prefers-reduced-motion`.
   ========================================================================== */

/* ==========================================================================
   1. ORNAMENT — the maximalist layer
   ========================================================================== */

/* A fine gold lattice, drawn in CSS so it costs no request and scales
   cleanly. Used on tinted section grounds only, never behind body copy. */
.section--cream,
.section--sand,
.section--gold { position: relative; isolation: isolate; }

.section--cream::before,
.section--gold::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg,  transparent 0 15px, rgba(201,138,10,.055) 15px 16px),
    repeating-linear-gradient(-45deg, transparent 0 15px, rgba(201,138,10,.055) 15px 16px);
  /* fade the pattern away from the middle, where the text sits */
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 26%, transparent 74%, #000 100%);
          mask-image: linear-gradient(90deg, #000 0%, transparent 26%, transparent 74%, #000 100%);
}

/* Hairline gold rules closing each tinted band */
.section--cream, .section--gold, .section--sand {
  border-block: 1px solid rgba(201,138,10,.18);
}

/* The dark band gets a woven gold field instead of a flat fill */
.section--ink { position: relative; isolation: isolate; overflow: hidden; }
.section--ink::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg,  transparent 0 17px, rgba(242,179,46,.075) 17px 18px),
    repeating-linear-gradient(-45deg, transparent 0 17px, rgba(242,179,46,.075) 17px 18px),
    radial-gradient(70% 90% at 78% 12%, rgba(242,179,46,.16), transparent 62%);
}

/* Corner brackets — a small gold registration mark on framed things */
.bracketed { position: relative; }
.bracketed::before,
.bracketed::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border: 1px solid var(--gold);
  opacity: .55;
  pointer-events: none;
  transition: width var(--t-mid), height var(--t-mid), opacity var(--t-mid);
}
.bracketed::before { top: 10px;    left: 10px;  border-right: 0; border-bottom: 0; }
.bracketed::after  { bottom: 10px; right: 10px; border-left: 0;  border-top: 0; }
.bracketed:hover::before,
.bracketed:hover::after { width: 30px; height: 30px; opacity: 1; }

/* The section title lozenge gets a double diamond — a small maximalist beat */
.orn i {
  position: relative;
}
.orn i::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--white);
  transform: rotate(0deg);
}

/* A gold rule with a lozenge at each end, for closing a long editorial run */
.rule-orn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  margin-block: var(--s4);
}
.rule-orn::before, .rule-orn::after {
  content: "";
  height: 1px;
  flex: 1;
  max-width: 220px;
  background: linear-gradient(90deg, transparent, var(--gold-lt), transparent);
}
.rule-orn i {
  width: 8px; height: 8px;
  background: var(--gold);
  transform: rotate(45deg);
}

/* ==========================================================================
   2. MOTION — one distinct gesture per kind of object
   ========================================================================== */

/* ---- Buttons: a light sweeps across the face ---- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 45%;
  z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg);
  transition: left 620ms cubic-bezier(.22,.61,.36,1);
}
.btn:hover::after { left: 120%; }
.btn--solid::after { background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent); }
.btn--ink::after, .btn--wa::after { background: linear-gradient(100deg, transparent, rgba(255,255,255,.3), transparent); }

/* ---- Product card: the photo eases in, a gold frame draws itself, and the
        save button rises out of the bottom edge ---- */
.card__media::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(242,179,46,0);
  border-radius: 2px;
  pointer-events: none;
  z-index: 2;
  transition: border-color 340ms ease, inset 340ms ease;
}
.card:hover .card__media::after { border-color: rgba(242,179,46,.75); inset: 7px; }

.card__fav { transform: translateY(-4px); opacity: .82; transition: transform var(--t-mid), opacity var(--t-mid), color var(--t-fast), background var(--t-fast); }
.card:hover .card__fav { transform: none; opacity: 1; }
.card__fav[aria-pressed="true"] { opacity: 1; transform: none; }

.card__name a { background-image: linear-gradient(var(--accent-dk), var(--accent-dk));
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size 320ms cubic-bezier(.22,.61,.36,1), color var(--t-fast); }
.card:hover .card__name a { background-size: 100% 1px; }

/* ---- Category tile: a gold veil wipes up from the base and the name
        opens out in letter-spacing ---- */
.counter__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(201,138,10,.34), rgba(242,179,46,.08) 55%, transparent);
  transform: translateY(101%);
  transition: transform 460ms cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
.counter:hover .counter__media::after { transform: none; }
.counter__name { transition: color var(--t-fast), letter-spacing 380ms cubic-bezier(.22,.61,.36,1); }
.counter:hover .counter__name { letter-spacing: .05em; }

/* ---- Service card: the icon lifts and turns, and a gold wash rises ---- */
.svc { position: relative; overflow: hidden; isolation: isolate; }
.svc::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 0;
  z-index: -1;
  background: linear-gradient(0deg, var(--gold-pale), transparent);
  transition: height 420ms cubic-bezier(.22,.61,.36,1);
}
.svc:hover::before { height: 100%; }
.svc__ico { transition: transform 480ms cubic-bezier(.34,1.4,.6,1), color var(--t-fast); }
.svc:hover .svc__ico { transform: translateY(-5px) rotate(-8deg); color: var(--accent-dk); }
.svc__go { transition: letter-spacing 320ms ease; }
.svc:hover .svc__go { letter-spacing: .21em; }

/* ---- Wall card: gold corner brackets draw themselves in ---- */
.wall { position: relative; }
.wall::before, .wall::after {
  content: "";
  position: absolute;
  width: 0; height: 0;
  border: 1px solid var(--gold);
  opacity: 0;
  pointer-events: none;
  transition: width 380ms ease, height 380ms ease, opacity 260ms ease;
}
.wall::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.wall::after { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
.wall:hover::before, .wall:hover::after { width: 34px; height: 34px; opacity: .85; }
.wall__orn { transition: transform 520ms cubic-bezier(.34,1.4,.6,1); }
.wall:hover .wall__orn { transform: scale(1.12) rotate(6deg); }

/* ---- Quote card: the spine thickens and the stars warm up ---- */
.quote { border-left: 3px solid transparent; transition: border-color 320ms ease, box-shadow 320ms ease, transform 320ms ease; }
.quote:hover { border-left-color: var(--accent-lt); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.quote__stars { transition: letter-spacing 320ms ease; }
.quote:hover .quote__stars { letter-spacing: .24em; }

/* ---- Footer links slide right off a gold tick ---- */
.footer__list a { display: inline-block; transition: transform var(--t-fast), color var(--t-fast); }
.footer__list a:hover { transform: translateX(5px); }

/* ---- Chips fill from the left ---- */
.chip { position: relative; overflow: hidden; isolation: isolate; }
.chip::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: var(--gold-pale);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms cubic-bezier(.22,.61,.36,1);
}
.chip:hover::before { transform: none; }
.chip.is-on::before { display: none; }

/* ---- Table rows in the price breakup warm on hover ---- */
.breakup tbody tr { transition: background 180ms ease; }
.breakup tbody tr:hover { background: var(--rose); }

/* ---- Hero: the gold light drifts, very slowly, once loaded ---- */
@keyframes heroDrift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(-2.5%, 2%, 0) scale(1.06); }
}
.hero::before { animation: heroDrift 18s ease-in-out infinite alternate; }

/* ---- Staggered reveal: children of a revealed group arrive in sequence ---- */
.js .reveal:nth-child(2)  { transition-delay: 70ms; }
.js .reveal:nth-child(3)  { transition-delay: 140ms; }
.js .reveal:nth-child(4)  { transition-delay: 210ms; }
.js .reveal:nth-child(5)  { transition-delay: 60ms; }
.js .reveal:nth-child(6)  { transition-delay: 120ms; }
.js .reveal:nth-child(7)  { transition-delay: 180ms; }
.js .reveal:nth-child(8)  { transition-delay: 240ms; }

/* ---- Page arrival: the first screen fades up once, never again ---- */
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.js .hero__copy > * { animation: pageIn 700ms cubic-bezier(.22,.61,.36,1) both; }
.js .hero__copy > *:nth-child(1) { animation-delay: 40ms; }
.js .hero__copy > *:nth-child(2) { animation-delay: 130ms; }
.js .hero__copy > *:nth-child(3) { animation-delay: 220ms; }
.js .hero__copy > *:nth-child(4) { animation-delay: 310ms; }
.js .hero__copy > *:nth-child(5) { animation-delay: 400ms; }
.js .hero__art { animation: pageIn 900ms cubic-bezier(.22,.61,.36,1) 180ms both; }

/* ---- The one signature moment: a slow gold sheen crossing the hero frame ---- */
@keyframes sheen { from { transform: translateX(-130%) skewX(-16deg); } to { transform: translateX(230%) skewX(-16deg); } }
.hero__frame::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 42%;
  z-index: 2;
  background: linear-gradient(100deg, transparent, rgba(255,253,247,.42), transparent);
  animation: sheen 5.5s cubic-bezier(.4,0,.2,1) 1.4s infinite;
  pointer-events: none;
}

/* ==========================================================================
   3. REDUCED MOTION — everything above becomes still.
   The site must remain completely usable, so only opacity survives.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero__frame::before { animation: none !important; }
  .btn::after { display: none; }
  .js .hero__copy > *, .js .hero__art { animation: none !important; opacity: 1; transform: none; }
  .js .reveal { transition-delay: 0ms !important; }
  .card:hover .card__media::after,
  .counter:hover .counter__media::after,
  .svc:hover::before,
  .wall:hover::before, .wall:hover::after { transition: none; }
  .counter:hover .counter__name,
  .svc:hover .svc__go,
  .quote:hover .quote__stars { letter-spacing: inherit; }
  .svc:hover .svc__ico,
  .wall:hover .wall__orn { transform: none; }
  .card:hover .card__media img,
  .counter:hover .counter__media img { transform: none; }
}

/* ==========================================================================
   4. THE ADDED CONTROLS
   Styles for the pieces enhance.js injects. Kept here because, like the rest
   of this file, they are additive — nothing breaks if they never load.
   ========================================================================== */

/* Quick look — rises out of the bottom edge of a card's photo on hover, and
   is always visible on touch, where there is no hover to reveal it. */
.ql-btn {
  position: absolute;
  left: 10px; right: 10px; bottom: 10px;
  z-index: 3;
  min-height: 38px;
  padding: 9px var(--s1);
  background: rgba(255,253,247,.94);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(201,138,10,.5);
  border-radius: var(--r);
  color: var(--accent-dk);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 300ms ease, transform 300ms cubic-bezier(.22,.61,.36,1),
              background 160ms ease, color 160ms ease;
}
.card:hover .ql-btn,
.card:focus-within .ql-btn { opacity: 1; transform: none; }
.ql-btn:hover { background: var(--accent-lt); border-color: var(--accent-lt); color: var(--ink); }

/* No hover on touch, so the control has to be there from the start. */
@media (hover: none) {
  .ql-btn { opacity: 1; transform: none; }
}

.ql-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
.ql-grid > * { min-width: 0; }
@media (max-width: 620px) { .ql-grid { grid-template-columns: 1fr !important; } }

/* Back to top */
.to-top {
  position: fixed;
  right: 18px;
  bottom: 78px;
  z-index: 69;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--accent-dk);
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 260ms ease, transform 260ms ease, background 160ms ease, color 160ms ease;
}
.to-top.is-on { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { background: var(--accent-lt); border-color: var(--accent-lt); color: var(--ink); }
.to-top svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: reduce) {
  .ql-btn { opacity: 1; transform: none; transition: none; }
  .to-top { transition: opacity 160ms ease; transform: none; }
}

/* ==========================================================================
   5. POINTER-DRIVEN MOTION AND THE PHOTOGRAPH LAYER
   ========================================================================== */

/* --- cards and tiles lean toward the cursor --- */
.card, .counter, .svc {
  transform-style: preserve-3d;
  transition: transform 300ms cubic-bezier(.22,.61,.36,1),
              box-shadow 300ms ease, border-color 300ms ease;
}
.card.is-tilt, .counter.is-tilt, .svc.is-tilt {
  transform: perspective(900px)
             rotateX(var(--rx, 0deg))
             rotateY(var(--ry, 0deg))
             translateY(-4px);
  transition: transform 90ms linear, box-shadow 300ms ease;
}
.card.is-tilt .card__media,
.counter.is-tilt .counter__media { box-shadow: var(--shadow-md); }

/* --- a soft gold light follows the cursor across the hero --- */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 40%),
              rgba(242,179,46,.20), transparent 68%);
  transition: opacity 420ms ease;
}
.hero.is-lit::after { opacity: 1; }

/* --- Ken Burns: the shop's photographs drift, very slowly --- */
@keyframes kenburns {
  from { transform: scale(1)    translate3d(0, 0, 0); }
  to   { transform: scale(1.07) translate3d(-1.2%, -1.6%, 0); }
}
.hero__frame img { animation: kenburns 26s ease-in-out infinite alternate; }

.counter__media img { transition: transform 900ms cubic-bezier(.22,.61,.36,1); }
.counter:hover .counter__media img { transform: scale(1.09); }

/* --- the bead band shimmers, once, as it enters --- */
.beadband { position: relative; overflow: hidden; }
.beadband::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255,253,247,.55), transparent);
  animation: sheen 7s cubic-bezier(.4,0,.2,1) 2s infinite;
}

/* --- the section-title lozenge turns as the section arrives --- */
@keyframes lozenge {
  from { transform: rotate(0deg)   scale(.4); opacity: 0; }
  to   { transform: rotate(45deg)  scale(1);  opacity: 1; }
}
.js .sec-title .orn i { animation: lozenge 700ms cubic-bezier(.34,1.4,.6,1) both; }

/* --- gold flourishes bracketing a section title --- */
.sec-title { position: relative; }
.sec-title h2::before,
.sec-title h2::after {
  content: "\2748";
  display: inline-block;
  color: var(--gold-lt);
  font-size: .42em;
  vertical-align: middle;
  opacity: .6;
  transform: translateY(-.28em);
}
.sec-title h2::before { margin-right: .7em; }
.sec-title h2::after  { margin-left: .7em; }
.sec-title--left h2::before { display: none; }

/* --- the jump rail's chips arrive in sequence --- */
@keyframes chipIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.js .jump-rail .chip { animation: chipIn 420ms cubic-bezier(.22,.61,.36,1) both; }
.js .jump-rail .chip:nth-child(1) { animation-delay: 40ms; }
.js .jump-rail .chip:nth-child(2) { animation-delay: 90ms; }
.js .jump-rail .chip:nth-child(3) { animation-delay: 140ms; }
.js .jump-rail .chip:nth-child(4) { animation-delay: 190ms; }
.js .jump-rail .chip:nth-child(5) { animation-delay: 240ms; }
.js .jump-rail .chip:nth-child(n+6) { animation-delay: 290ms; }

@media (prefers-reduced-motion: reduce) {
  .hero__frame img,
  .beadband::after,
  .js .sec-title .orn i,
  .js .jump-rail .chip { animation: none !important; opacity: 1; transform: rotate(45deg); }
  .js .jump-rail .chip { transform: none; }
  .card, .counter, .svc { transform-style: flat; }
  .card.is-tilt, .counter.is-tilt, .svc.is-tilt { transform: none; }
  .hero::after { display: none; }
  .counter:hover .counter__media img { transform: none; }
}