/* ============================================================
   Woven Crown — shared motion & polish layer
   Loaded on every page after the inline styles, so these rules
   refine (never replace) the page's own design.
   ============================================================ */

:root {
  --wc-ease: cubic-bezier(.16, .84, .44, 1);
}

/* Smooth in-page anchor scrolling */
html { scroll-behavior: smooth; }

/* ---- Hero entrance (index) ----
   Staged arrival: headline → flourish line → copy → CTA → proof photo.
   Only when JS is running (html.js), mirroring the reveal system. */
@keyframes wc-rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes wc-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes wc-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

html.js .hero h1            { animation: wc-rise .85s var(--wc-ease) .05s both; }
html.js .hero .hero-flourish{ transform-origin: left center; animation: wc-draw .7s var(--wc-ease) .55s both; }
html.js .hero .sub          { animation: wc-rise .85s var(--wc-ease) .35s both; }
html.js .hero .hero-cta     { animation: wc-rise .85s var(--wc-ease) .5s both; }
html.js .hero .hero-proof   { animation: wc-rise .95s var(--wc-ease) .65s both; }
html.js .hallmark           { animation: wc-rise 1s var(--wc-ease) .8s both; }

/* The engraved-seal ring turns slowly, like a stamp being admired */
.hallmark-ring {
  transform-origin: center;
  animation: wc-spin 60s linear infinite;
}

/* Scroll cue: gentle repeating drop of the line */
@keyframes wc-cue {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
.scroll-cue .line { animation: wc-cue 2.2s var(--wc-ease) infinite; }

/* ---- Buttons: lift on hover, settle on press ---- */
.btn {
  transition: transform .2s var(--wc-ease),
              box-shadow .2s var(--wc-ease),
              background-color .2s var(--wc-ease),
              color .2s var(--wc-ease);
  will-change: transform;
}
.btn:hover  { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.btn:active { transform: translateY(0) scale(.98); transition-duration: .1s; box-shadow: 0 3px 10px rgba(0,0,0,.3); }

/* ---- Cards: lift + photo zoom ---- */
.cat-card, .prod-item, .why-item, .soon-item {
  transition: transform .3s var(--wc-ease), box-shadow .3s var(--wc-ease), border-color .3s var(--wc-ease);
}
.cat-card:hover, .prod-item:hover, .soon-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0,0,0,.4);
}
.cat-card { overflow: hidden; }
.cat-card img, .prod-item img {
  transition: transform .6s var(--wc-ease);
}
.cat-card:hover img, .prod-item:hover img { transform: scale(1.04); }

/* ---- Nav: solidify with blur once the page scrolls ---- */
#nav {
  transition: background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
#nav.scrolled {
  background-color: rgba(15, 15, 15, .82);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 1px 0 rgba(255,255,255,.07), 0 10px 30px rgba(0,0,0,.35);
}

/* Nav links: underline slides in from the left */
.nav-links a {
  position: relative;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s var(--wc-ease);
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after { transform: scaleX(1); }

/* ---- Reveal refinements ----
   Grouped items get per-item stagger via --wc-d (set by motion.js) */
html.js .reveal { transition-delay: var(--wc-d, 0s); }

/* ---- Mobile menu button fix ----
   The page CSS gives the hamburger 26px width INCLUDING 20px padding,
   leaving 6x1px bars — invisible. Restore real bars on every page. */
.nav-toggle { width: auto; margin-left: 10px; }
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 1px;
  transition: transform .25s var(--wc-ease), opacity .2s ease;
}

/* ---- Photo wipe: images uncover from the bottom as they scroll in ---- */
html.js .wc-wipe {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.06);
  transition: clip-path 1.05s var(--wc-ease), transform 1.4s var(--wc-ease);
}
html.js .wc-wipe.wc-wiped {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}
/* the card hover zoom still wins once the wipe has finished */
.cat-card:hover img.wc-wiped,
.prod-item:hover img.wc-wiped { transform: scale(1.04); }

/* ---- Hero: slow ambient drift, independent of scroll ---- */
@keyframes wc-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
html.js .hero-proof-frame { animation: wc-float 7s ease-in-out 1.6s infinite; }

/* Parallax layers get their transform from JS — keep them composited */
html.js .hero-proof, html.js .hallmark { will-change: transform; }

/* ---- Section headings: a thin rule draws itself under each one ---- */
html.js .section-head { position: relative; }
html.js .section-head::after {
  content: "";
  position: absolute;
  left: 0; bottom: -14px;
  height: 1px; width: 68px;
  background: var(--brass-300, #9a8b6a);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .8s var(--wc-ease) .25s;
}
html.js .section-head.in-view::after { transform: scaleX(1); }

/* ---- Hero proof: the board is now a cut-out, so drop the frame around it
   and let it float on the page's own dark background. ---- */
.hero-proof-frame {
  width: 240px !important;
  aspect-ratio: auto !important;
  border: none !important;
  background: transparent !important;
  overflow: visible !important;
  filter: drop-shadow(0 26px 34px rgba(0,0,0,.55));
}
.hero-proof-frame img {
  height: auto !important;
  object-fit: contain !important;
}
/* phones: keep the hero shorter than the screen so the CTA stays visible */
@media (max-width: 700px) {
  .hero-proof-frame { width: 132px !important; }
}

/* ---- hidden attribute must always win over display rules ---- */
[hidden] { display: none !important; }

/* ---- Focus visibility (keyboard users) ---- */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid rgba(240,240,240,.85);
  outline-offset: 3px;
}

/* ---- Respect reduced-motion: everything appears instantly ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  html.js .reveal { opacity: 1 !important; transform: none !important; }
  html.js .wc-wipe { clip-path: none !important; transform: none !important; }
  html.js .hero-proof-frame { animation: none !important; }
  html.js .section-head::after { transform: scaleX(1) !important; }
  html.js .hero h1, html.js .hero .sub, html.js .hero .hero-cta,
  html.js .hero .hero-proof, html.js .hero .hero-flourish, html.js .hallmark {
    opacity: 1 !important; transform: none !important;
  }
}