/* ════════════════════════════════════════════════════════════════════════
   Maison Vitrina — engine support styles (vitrina-motion.css)
   Custom cursor, lightbox, ScrambleText greeting cover, GPU hints, the
   DrawSVG line baseline, and reduced-motion fallbacks.
   (Page aesthetic — palette/type/layout — lives in styles.css.)
   ════════════════════════════════════════════════════════════════════════ */

/* GPU hints — transforms/opacity only, never layout */
.hero__img, .vit-card, .vit-card__img, .hero__panel { will-change: transform; backface-visibility: hidden; }

/* Hero text stays hidden once the engine is ready, until the reveal runs
   (after curtain + greeting). No-JS / reduced-motion rules below show it. */
html.vit-ready .hero__eyebrow,
html.vit-ready .hero__headline { visibility: hidden; }

/* ── DrawSVG underline baseline — JS animates drawSVG 0%→100% ───────────── */
.cat-item__line line { stroke-linecap: round; }

/* ════════════════════════════════════════════════════════════════════════
   Brand identity reveal cover (first visit) — plays after the curtain:
   company name fades → gold rule draws → "Established · YEAR" cycles languages.
   ════════════════════════════════════════════════════════════════════════ */
.vit-greet {
  position: fixed; inset: 0; z-index: 9500;
  display: grid; place-items: center;
  background: var(--ink, #1a1612); color: var(--bg, #faf8f5);
}
.vit-brand { text-align: center; padding: 0 8vw; }
.vit-brand__name {
  font-family: var(--font-display, Georgia), serif; font-weight: 300;
  font-size: clamp(2.6rem, 8vw, 6.5rem); letter-spacing: 0.04em; color: var(--bg, #faf8f5);
}
.vit-brand__rule { display: block; width: min(300px, 52vw); height: 2px; margin: 32px auto 26px; overflow: visible; }
.vit-brand__rule line { stroke: var(--accent, #8b6914); stroke-width: 1.5; }
.vit-brand__est {
  display: flex; align-items: baseline; justify-content: center; gap: 0.55em; min-height: 1.5em;
  font-family: var(--mono, monospace); font-size: clamp(0.78rem, 1.6vw, 1rem);
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent-2, #c9a96e);
}
.vit-brand__word { display: inline-block; min-width: 8em; text-align: right; }
.vit-brand__sep  { opacity: 0.55; }
.vit-brand__year { color: var(--bg, #faf8f5); }
html.vit-greeting-active, html.vit-greeting-active body { overflow: hidden; height: 100%; }

/* ════════════════════════════════════════════════════════════════════════
   Lightbox — full-screen product image (click a card)
   ════════════════════════════════════════════════════════════════════════ */
.vit-lightbox {
  position: fixed; inset: 0; z-index: 9700; display: flex; align-items: center; justify-content: center;
  padding: 5vmin; opacity: 0; pointer-events: none;
  background: color-mix(in srgb, var(--ink, #1a1612) 90%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.vit-lightbox.is-on { pointer-events: auto; }
.vit-lightbox__img {
  width: 90vw; height: 86vh; max-width: 90vw; max-height: 86vh;
  background-size: contain; background-position: center; background-repeat: no-repeat;
  border-radius: 2px; box-shadow: 0 60px 140px -40px rgba(0,0,0,0.7); will-change: transform, opacity;
}
.vit-lightbox__close {
  position: fixed; top: 26px; right: 30px; z-index: 9701; width: 46px; height: 46px; border-radius: 50%;
  cursor: pointer; border: 1px solid rgba(250,248,245,0.4); background: rgba(250,248,245,0.08);
  color: #faf8f5; font-size: 20px; line-height: 1;
}
.vit-lightbox__close:hover { background: var(--accent, #8b6914); border-color: var(--accent, #8b6914); }

/* ════════════════════════════════════════════════════════════════════════
   Custom cursor (subtle ring) — default OFF for Cartier-native elegance;
   enable via CONFIG.cursor.enabled. Structure kept here per the spec.
   ════════════════════════════════════════════════════════════════════════ */
html.vit-has-cursor, html.vit-has-cursor * { cursor: none !important; }
.vit-cursor {
  position: fixed; top: 0; left: 0; z-index: 99999; pointer-events: none;
  width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ink, #1a1612) 50%, transparent);
  will-change: transform; transition: width .25s, height .25s, border-color .25s;
}
.vit-cursor.is-hover { border-color: var(--accent, #8b6914); }

/* ════════════════════════════════════════════════════════════════════════
   prefers-reduced-motion — everything instant & visible
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .hero__panel { display: none !important; }                 /* curtain → instant show */
  html.vit-ready .hero__eyebrow, html.vit-ready .hero__headline { visibility: visible !important; }
  .about::before, .about::after { animation: none !important; }   /* mesh stops */
  .vit-greet, .vit-cursor { display: none !important; }
  html.vit-has-cursor, html.vit-has-cursor * { cursor: auto !important; }
}
/* Touch — no custom cursor */
@media (hover: none), (pointer: coarse) {
  .vit-cursor { display: none !important; }
  html.vit-has-cursor, html.vit-has-cursor * { cursor: auto !important; }
}

/* No-JS safety — if the engine never boots, reveal the hero (panels hidden) */
html:not(.vit-ready) .hero__panel { display: none; }
html:not(.vit-ready) .hero__eyebrow,
html:not(.vit-ready) .hero__headline { visibility: visible; }