/* SILLAGE — luxury perfume styles. Noir, champagne, atmospheric. */

:root { color-scheme: dark; }
html { scroll-behavior: smooth; background: oklch(0.16 0.012 40); }
body {
  font-family: "Jost", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.font-display, .font-serif { letter-spacing: 0.01em; }

/* letterspaced uppercase label */
.eyebrow { text-transform: uppercase; letter-spacing: 0.34em; font-size: 11px; font-weight: 500; }

/* content always visible; data-reveal inert (robust everywhere) */

/* image placeholders / fallback tiles */
.ph {
  position: relative; background-color: oklch(0.22 0.014 42);
  background-image: repeating-linear-gradient(45deg, oklch(0.25 0.014 42) 0 1px, transparent 1px 12px);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  color: oklch(0.6 0.02 60); font-family:"Jost",sans-serif; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
}

.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: oklch(0.16 0.012 40); }
::-webkit-scrollbar-thumb { background: oklch(0.32 0.014 46); border:3px solid oklch(0.16 0.012 40); border-radius:999px; }

*:focus-visible { outline: 1.5px solid oklch(0.81 0.09 82); outline-offset: 3px; }

.marquee-mask { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }

/* hairline gold underline link */
.link-underline { background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .4s cubic-bezier(.2,.7,.3,1); }
.link-underline:hover { background-size: 100% 1px; }

/* star rating */
.stars { display:inline-block; position:relative; font-family:"Jost",sans-serif; color: oklch(0.34 0.012 46); white-space:nowrap; letter-spacing:1px; }
.stars::before { content:"\2605\2605\2605\2605\2605"; }
.stars > span { position:absolute; inset:0; width:var(--pct,100%); overflow:hidden; color: oklch(0.83 0.10 86); }
.stars > span::before { content:"\2605\2605\2605\2605\2605"; }

@keyframes badgepop { 0%{transform:scale(1)} 40%{transform:scale(1.4)} 100%{transform:scale(1)} }
.badge-pop { animation: badgepop .35s ease; }

input[type="range"]{ accent-color: oklch(0.81 0.09 82); }
#toast { transition: transform .35s cubic-bezier(.2,.7,.3,1), opacity .35s; }

/* shared inputs (dark) */
.v-input,.ck-input,.ct-input,.ord-input { width:100%; height:52px; padding:0 16px; background: oklch(0.205 0.014 42); border:1px solid oklch(0.32 0.014 46); color: oklch(0.95 0.012 75); font-size:15px; border-radius:4px; transition:border-color .15s; }
.v-input::placeholder,.ck-input::placeholder,.ct-input::placeholder,.ord-input::placeholder { color: oklch(0.56 0.016 56); }
.v-input:focus,.ck-input:focus,.ct-input:focus,.ord-input:focus { outline:none; border-color: oklch(0.81 0.09 82); }
.v-input.invalid,.ck-input.invalid,.ct-input.invalid,.ord-input.invalid { border-color: oklch(0.72 0.12 34); }
.v-err,.ck-err,.ct-err,.ord-err { color: oklch(0.72 0.12 34); font-size:13px; margin-top:6px; }
textarea.v-input,textarea.ct-input { height:auto; padding:14px 16px; min-height:150px; resize:vertical; }
option { color:#1a140f; background:#fff; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .animate-marquee { animation: none !important; }
}