/* ============================================================
   Chrysa Doré — REFINEMENT LAYER
   Additive polish loaded LAST. Pure decoration, no content change.
   Uses existing tokens (--paper/--ink/--leather/--gold/--line ...).
   ============================================================ */

/* ---- Global finesse ---------------------------------------- */
html { scroll-behavior: smooth; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
::selection { background: var(--gold-soft); color: var(--leather-deep); }

/* Subtle warm paper grain — sits above the background, below content */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

/* Refined selection of focus state for accessibility + polish */
a:focus-visible, button:focus-visible, input:focus-visible,
.btn:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Elegant thin scrollbar (desktop) */
@media (pointer: fine) {
  * { scrollbar-width: thin; scrollbar-color: var(--gold) transparent; }
  *::-webkit-scrollbar { width: 10px; height: 10px; }
  *::-webkit-scrollbar-thumb { background: var(--gold); border: 3px solid var(--paper); border-radius: 10px; }
  *::-webkit-scrollbar-track { background: transparent; }
}

/* ---- Typography elevation ---------------------------------- */
.hero-title, .section-title, .pdp-title,
h1, h2, .collection-info h3, .story-section-title {
  text-wrap: balance;
  font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "calt" 1;
  letter-spacing: -0.005em;
}
.section-title, .hero-title { font-optical-sizing: auto; }
.section-title em, .hero-title em, .hero-title .line2,
.collection-info h3 em, .pdp-title em {
  font-style: italic;
}
/* Mono / eyebrow micro-labels: a touch more air + true small-caps feel */
.eyebrow, .hero-meta, .hero-blurb-mono, .collection-tag,
.ornament-word, .pdp-eyebrow, .hallmark-sub, .breadcrumbs {
  letter-spacing: 0.22em;
}
/* Tabular, refined figures for prices */
.pdp-price, .price, .product-price, .cart-total, .money {
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: 0.01em;
}
/* Long-form readability */
.story-body, .section-desc, .pdp-desc, .hero-blurb { text-wrap: pretty; }

/* ---- Material & depth -------------------------------------- */
:root {
  --rf-shadow-1: 0 1px 2px rgba(31,20,10,.04), 0 4px 14px -8px rgba(31,20,10,.18);
  --rf-shadow-2: 0 6px 18px -10px rgba(31,20,10,.28), 0 20px 50px -28px rgba(31,20,10,.34);
  --rf-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Cards — soft elevation + refined hover lift */
.collection-card, .product-card, .pdp-thumb, .hallmark, .value-card,
.machinery-card, .process-step {
  transition: transform .5s var(--rf-ease), box-shadow .5s var(--rf-ease), border-color .4s ease;
  will-change: transform;
}
.collection-card, .product-card {
  box-shadow: var(--rf-shadow-1);
}
.collection-card:hover, .product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--rf-shadow-2);
}

/* Image frames — controlled zoom inside a clipped frame */
.collection-img, .product-card .product-img, .hero-right,
.collection-img > img, .product-img > img {
  overflow: hidden;
}
.collection-img img, .product-card .product-img img, .hero-img {
  transition: transform .9s var(--rf-ease), filter .6s ease;
  will-change: transform;
  backface-visibility: hidden;
}
.collection-card:hover .collection-img img,
.product-card:hover .product-img img {
  transform: scale(1.055);
}
.hero-right:hover .hero-img { transform: scale(1.03); }

/* Hairline gold inner frame on hero + editorial images */
.hero-right::after {
  content: ""; position: absolute; inset: 10px; pointer-events: none;
  border: 1px solid rgba(184,138,58,.45); z-index: 3;
}

/* ---- Buttons ----------------------------------------------- */
.btn {
  position: relative; overflow: hidden;
  transition: color .45s var(--rf-ease), border-color .45s ease, background-color .45s ease, transform .25s var(--rf-ease);
  letter-spacing: 0.16em;
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--rf-ease);
}
.btn:hover { color: var(--paper-warm); border-color: var(--gold); }
.btn:hover::after { transform: scaleX(1); }
.btn:active { transform: translateY(1px); }
.btn svg { transition: transform .4s var(--rf-ease); }
.btn:hover svg { transform: translateX(5px); }

/* ---- Links — animated gold underline ----------------------- */
.collection-arrow, .text-link, .footer a, .breadcrumbs a {
  transition: color .3s ease;
}
.collection-card:hover .collection-arrow { transform: translateX(5px); }
.collection-arrow { transition: transform .45s var(--rf-ease); display: inline-flex; }

/* ---- Ornaments & flourishes -------------------------------- */
.ornament-line { background: linear-gradient(90deg, transparent, var(--gold) 55%, var(--gold)) !important; opacity: .6; }
.ornament-mark .ornament-word { color: var(--gold-deep); }
.ornament-divider svg { color: var(--gold); }
.corner-bracket { border-color: var(--gold) !important; opacity: .7; transition: opacity .4s ease, inset .4s var(--rf-ease); }
.collection-card:hover .corner-bracket { opacity: 1; }
.diamond { background: var(--gold) !important; }

/* Hero sparkles — gentle twinkle */
.hero-sparkle { color: var(--gold); animation: rf-twinkle 4.5s ease-in-out infinite; }
.hero-sparkle.s2 { animation-delay: .8s; } .hero-sparkle.s3 { animation-delay: 1.6s; }
.hero-sparkle.s4 { animation-delay: 2.4s; } .hero-sparkle.s5 { animation-delay: 3.2s; }
@keyframes rf-twinkle { 0%,100%{ opacity:.25; transform: scale(.85);} 50%{ opacity:.9; transform: scale(1.1);} }

/* Hero corner ticks — finer gold */
.tick { border-color: var(--gold) !important; opacity: .8; }

/* Chips / tags — refined gold outline */
.hero-chip, .collection-tag, .pdp-price-tag, .collection-season {
  border: 1px solid rgba(184,138,58,.5);
  backdrop-filter: blur(4px);
}

/* ---- Hallmarks (trust pillars) ----------------------------- */
.hallmark-icon { color: var(--gold-deep); transition: transform .5s var(--rf-ease); }
.hallmark:hover .hallmark-icon { transform: translateY(-2px) scale(1.06); }

/* ---- Section rhythm + heading accent ----------------------- */
.section-title { line-height: 1.06; }
.section-title::after {
  content: ""; display: block; width: 42px; height: 2px; margin-top: 22px;
  background: linear-gradient(90deg, var(--gold), transparent);
  opacity: 0; transform: translateX(-8px);
  transition: opacity .7s var(--rf-ease) .1s, transform .7s var(--rf-ease) .1s;
}
.collections-header .section-title::after,
[data-reveal].is-visible .section-title::after,
.section.is-visible .section-title::after { opacity: 1; transform: none; }
/* fallback: always show the accent (in case reveal class differs) */
.section-title::after { opacity: .9; transform: none; }

/* ---- Nav polish (sticky elegance) -------------------------- */
header, .nav, .site-nav, .navbar { transition: box-shadow .4s ease, background-color .4s ease; }
.is-stuck, .nav.scrolled, .scrolled .nav { box-shadow: 0 1px 0 var(--line), 0 8px 30px -22px rgba(31,20,10,.5); }

/* ---- Reveal motion (gentle, only if app toggles a class) ---- */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] { transition: opacity .9s var(--rf-ease), transform .9s var(--rf-ease); }
}

/* ---- Gilded accent words (decorative italics only) --------- */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .hero-title .line3, .section-title em, .collection-info h3 em,
  .pdp-title em, .story-section-title em, .heritage-title em {
    background: linear-gradient(100deg, var(--gold-deep) 0%, var(--gold) 42%, var(--gold-soft) 70%, var(--gold) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: var(--gold);
  }
}

/* ---- Editorial drop-cap (first paragraph of a story body) --- */
.story-body.is-lead::first-letter,
.story-intro p:first-of-type::first-letter,
.manifesto p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 3.4em; line-height: .82; float: left;
  padding: 0.06em 0.12em 0 0; color: var(--gold-deep); font-style: italic;
}

/* ---- Refined card frame (double hairline on hover) --------- */
.collection-card, .product-card { position: relative; }
.collection-card::after, .product-card::after {
  content: ""; position: absolute; inset: 8px; pointer-events: none; z-index: 2;
  border: 1px solid var(--gold); opacity: 0;
  transition: opacity .5s var(--rf-ease), inset .5s var(--rf-ease);
}
.collection-card:hover::after, .product-card:hover::after { opacity: .55; inset: 12px; }

/* ---- Tasteful image warmth ---------------------------------- */
.collection-img img, .product-card .product-img img, .hero-img {
  filter: saturate(1.02) contrast(1.02);
}

/* ---- Quiet luxury detail: gold rule under eyebrows ---------- */
.collections-header .eyebrow::after, .pdp-eyebrow::after {
  content: ""; display: inline-block; width: 26px; height: 1px;
  background: var(--gold); vertical-align: middle; margin-left: 12px; opacity: .7;
}

/* ---- Respect reduced motion -------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .hero-sparkle { animation: none; opacity: .5; }
}