/* ==========================================================================
   SoleForge — custom styles
   Tailwind (CDN) handles most layout; this file holds brand tokens, textures,
   animations and a few components that are cleaner in plain CSS.
   ========================================================================== */

:root {
  --bone: #f2eee7;
  --paper: #faf8f4;
  --ink: #141210;
  --clay: #b0532c;
  --umber: #5e4330;
  --olive: #5b5e3b;
  --sand: #d8c9ae;
  --stone: #8c8478;
  --ease: cubic-bezier(.22, .9, .25, 1);
}

html { scroll-behavior: smooth; }
body {
  background: var(--bone);
  color: var(--ink);
  font-family: "Jost", ui-sans-serif, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Subtle paper grain over the whole page (pure CSS/SVG, no image request) */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 60;
  opacity: .06; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

::selection { background: var(--clay); color: var(--paper); }

/* ---------- Typography helpers ---------- */
/* Display: Cormorant Garamond, a high-contrast Garamond for an editorial,
   fashion-house feel. Body: Jost, a refined geometric sans. */
.font-display {
  font-family: "Cormorant Garamond", Georgia, serif;
  letter-spacing: -.015em;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum", "kern", "liga";
}
.font-serif { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 400; }
/* Italic accent words inside headlines get the clay/sand color set in markup. */
.font-display em, .font-display .italic { font-style: italic; font-weight: 400; }
.eyebrow {
  font-size: .68rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase;
}
/* Buttons and labels: lightly tracked for a polished look. */
button, .btn, a.rounded-full { letter-spacing: .03em; }
h1, h2, h3 { text-wrap: balance; }

/* ---------- Promo marquee strip ---------- */
.marquee { overflow: hidden; white-space: nowrap; }
.marquee__track { display: inline-flex; gap: 3rem; animation: marquee 32s linear infinite; padding-right: 3rem; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Hero slideshow ---------- */
.hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1.1s var(--ease), visibility 1.1s; }
.hero-slide.is-active { opacity: 1; visibility: visible; }
.hero-slide img { transform: scale(1.12); transition: transform 7s linear; }
.hero-slide.is-active img { transform: scale(1); }
.hero-slide .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.hero-slide.is-active .reveal { opacity: 1; transform: none; }
.hero-slide.is-active .reveal:nth-child(2) { transition-delay: .15s; }
.hero-slide.is-active .reveal:nth-child(3) { transition-delay: .3s; }
.hero-slide.is-active .reveal:nth-child(4) { transition-delay: .45s; }
.hero-progress { transform-origin: left; transform: scaleX(0); }
.hero-progress.run { animation: heroProgress var(--hero-ms, 6000ms) linear forwards; }
@keyframes heroProgress { to { transform: scaleX(1); } }

/* ---------- Product cards ---------- */
.card-media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper); }
.card-media img { transition: transform .9s var(--ease), opacity .5s; }
.product-card:hover .card-media img.primary { transform: scale(1.06); }
.card-media img.alt { opacity: 0; }
.product-card:hover .card-media img.alt { opacity: 1; }
.card-actions { transform: translateY(110%); transition: transform .45s var(--ease); }
.product-card:hover .card-actions,
.product-card:focus-within .card-actions { transform: none; }
@media (hover: none) { .card-actions { transform: none; } }

/* Size availability indicator dots */
.size-dot { width: 6px; height: 6px; border-radius: 999px; display: inline-block; }
.size-dot.in  { background: var(--olive); }
.size-dot.low { background: var(--clay); }
.size-dot.out { background: transparent; box-shadow: inset 0 0 0 1px var(--stone); }

/* Size buttons on product page / quick view */
.size-btn { position: relative; transition: background .2s, color .2s, border-color .2s; }
.size-btn[disabled] { color: var(--stone); cursor: not-allowed; background:
  linear-gradient(to top right, transparent calc(50% - .5px), var(--stone) 50%, transparent calc(50% + .5px)); }
.size-btn.is-low::after { content: ""; position: absolute; top: 5px; right: 5px; width: 5px; height: 5px; border-radius: 99px; background: var(--clay); }
.size-btn.is-selected { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Color swatches */
.swatch { width: 34px; height: 34px; border-radius: 999px; outline: 1px solid transparent; outline-offset: 3px; transition: outline-color .2s, transform .2s; }
.swatch:hover { transform: scale(1.06); }
.swatch.is-selected { outline-color: var(--ink); }

/* ---------- Modals & drawer ---------- */
.overlay { opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s; }
.overlay.is-open { opacity: 1; visibility: visible; }
.overlay .panel { transform: translateY(24px) scale(.98); transition: transform .45s var(--ease); }
.overlay.is-open .panel { transform: none; }
.drawer .panel { transform: translateX(100%); }
.drawer.is-open .panel { transform: none; }

/* ---------- Scroll reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Misc ---------- */
.stars { --pct: 100%; position: relative; display: inline-block; font-size: .85rem; letter-spacing: 2px; line-height: 1; }
.stars::before { content: "★★★★★"; color: var(--sand); }
.stars::after { content: "★★★★★"; color: var(--ink); position: absolute; left: 0; top: 0; width: var(--pct); overflow: hidden; white-space: nowrap; }

.link-u { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s var(--ease); }
.link-u:hover { background-size: 100% 1px; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

.toast { transform: translateY(200%); visibility: hidden; transition: transform .45s var(--ease), visibility .45s; }
.toast.is-show { visibility: visible; }
.toast.is-show { transform: none; }

input[type=range] { accent-color: var(--clay); }

/* ==========================================================================
   MOTION LAYER (driven by assets/js/motion.js)
   ========================================================================== */

/* ---------- Page curtain: fades in on load, sweeps up on navigation ---------- */
.curtain {
  position: fixed; inset: 0; z-index: 100; background: var(--ink); color: var(--bone);
  display: grid; place-items: center; pointer-events: none;
  animation: curtainOut .9s var(--ease) .15s both;
}
.curtain span { font-family: "Cormorant Garamond", serif; font-size: 2.5rem; font-style: italic; opacity: 0; animation: curtainWord .7s var(--ease) both; }
.curtain.is-leaving { animation: curtainIn .45s var(--ease) both; }
.curtain.is-leaving span { animation: none; opacity: 1; }
@keyframes curtainOut { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }
@keyframes curtainIn  { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes curtainWord { 0% { opacity: 0; transform: translateY(10px); } 60% { opacity: 1; transform: none; } 100% { opacity: 1; } }

/* ---------- Scroll progress hairline under the header ---------- */
.scroll-progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--clay); transform-origin: left; transform: scaleX(0); }

/* ---------- Headline word reveal: each word rises out of a mask ---------- */
.split-word { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .06em .12em 0; margin: 0 -.06em -.12em 0; }
.split-word > span { display: inline-block; transform: translateY(105%) rotate(4deg); transform-origin: left bottom; transition: transform 1.1s var(--ease); transition-delay: calc(var(--i) * 55ms + 80ms); }
.is-split-in .split-word > span,
.hero-slide.is-active .split-word > span { transform: none; }
.hero-slide.is-active .split-word > span { transition-delay: calc(var(--i) * 70ms + 250ms); }
.first-load .hero-slide.is-active .split-word > span { transition-delay: calc(var(--i) * 80ms + 750ms); }
.first-load .hero-slide.is-active .reveal { transition-delay: .9s !important; }

/* ---------- Image wipe reveal (category tiles + product cards) ---------- */
[data-reveal="clip"] { opacity: 1; transform: none; clip-path: inset(100% 0 0 0); transition: clip-path 1.3s var(--ease); }
[data-reveal="clip"].is-in { clip-path: inset(0 0 0 0); }
[data-reveal="clip"] img { transform: scale(1.25); transition: transform 1.8s var(--ease), opacity .7s; }
[data-reveal="clip"].is-in img { transform: scale(1); }
[data-reveal="clip"].is-in:hover img { transform: scale(1.06); }
.product-card .card-media { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease); transition-delay: inherit; }
.product-card.is-in .card-media { clip-path: inset(0 0 0 0); }

/* ---------- Parallax images: oversize so movement never shows an edge ---------- */
[data-parallax] { scale: 1.18; will-change: translate; }
#hero .hero-slide img { translate: 0 var(--hero-y, 0px); }
#hero .hero-slide > .relative { translate: 0 calc(var(--hero-y, 0px) * -.5); opacity: var(--hero-fade, 1); }

/* ---------- Velocity marquee ---------- */
.text-outline { color: transparent; -webkit-text-stroke: 1px var(--ink); }

/* ---------- Rotating hero badge ---------- */
.spin-badge__ring { animation: spin 22s linear infinite; }
.spin-badge:hover .spin-badge__ring { animation-duration: 6s; }
.spin-badge > span { transition: transform .5s var(--ease); }
.spin-badge:hover > span { transform: scale(1.12) rotate(-6deg); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Cursor follower (fine pointers only) ---------- */
.cursor-ring {
  position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none;
  width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 999px;
  border: 1px solid rgba(176, 83, 44, .75); display: grid; place-items: center;
  font: 500 10px/1 "Jost", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--paper);
  transition: width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease), background .35s, border-color .35s, opacity .3s;
}
.cursor-ring span { opacity: 0; transition: opacity .25s; }
.cursor-ring.is-view { width: 88px; height: 88px; margin: -44px 0 0 -44px; background: var(--ink); border-color: var(--ink); }
.cursor-ring.is-view span { opacity: 1; }
.cursor-ring.is-link { width: 56px; height: 56px; margin: -28px 0 0 -28px; border-color: var(--clay); }
.cursor-ring.is-hidden { opacity: 0; }

/* ---------- Magnetic buttons ---------- */
.magnetic { transition: translate .5s var(--ease), background-color .2s, color .2s, border-color .2s; }

/* ---------- Cart badge bump ---------- */
.bump { animation: bump .6s var(--ease); }
@keyframes bump { 0% { transform: scale(1); } 30% { transform: scale(1.6); } 100% { transform: scale(1); } }

/* ---------- Hero: gentle floating scroll cue on the counter ---------- */
.logo-mark { transition: transform .8s var(--ease); }
a:hover > .logo-mark { transform: rotate(-360deg); }

/* ---------- Shimmer sweep on primary dark buttons ---------- */
.bg-ink.rounded-full { position: relative; overflow: hidden; isolation: isolate; }
.bg-ink.rounded-full::after {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--clay);
  transform: translateY(101%); border-radius: inherit; transition: transform .5s var(--ease);
}
.bg-ink.rounded-full:hover::after { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .split-word > span, [data-reveal="clip"], .product-card .card-media { transform: none !important; clip-path: none !important; }
  .cursor-ring, .curtain { display: none !important; }
}