/* =======================================================================
   VALYNTINA - Global Stylesheet
   Typography, custom utilities, animations
   ======================================================================= */

@font-face {
  font-family: 'Monsieur La Doulaise';
  src: url('fonts/MonsieurLaDoulaise-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CMU Serif';
  src: url('fonts/cmunui.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CMU Serif';
  src: url('fonts/cmunci.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Source Serif Pro';
  src: url('fonts/SourceSerifPro-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.font-display { font-family: 'CMU Serif', Georgia, 'Times New Roman', serif; letter-spacing: 0.01em; }
.font-script { font-family: 'Monsieur La Doulaise', cursive; }
.font-body { font-family: 'CMU Serif', Georgia, 'Times New Roman', serif; }
.font-label { font-family: 'CMU Serif', Georgia, 'Times New Roman', serif; letter-spacing: 0.18em; text-transform: uppercase; }
.font-source { font-family: 'Source Serif Pro', Georgia, 'Times New Roman', serif; }

/* Custom text-size utilities (Tailwind arbitrary values replacements) */
.ts-8 { font-size: 8px; line-height: 1.4; }
.ts-9 { font-size: 9px; line-height: 1.4; }
.ts-95 { font-size: 9.5px; line-height: 1.4; }
.ts-10 { font-size: 10px; line-height: 1.4; }
.ts-105 { font-size: 10.5px; line-height: 1.4; }
.ts-11 { font-size: 11px; line-height: 1.5; }
.ts-115 { font-size: 11.5px; line-height: 1.5; }
.ts-12 { font-size: 12px; line-height: 1.5; }
.ts-125 { font-size: 12.5px; line-height: 1.5; }
.ts-13 { font-size: 13px; line-height: 1.55; }
.ts-135 { font-size: 13.5px; line-height: 1.6; }
.ts-14 { font-size: 14px; line-height: 1.55; }
.ts-145 { font-size: 14.5px; line-height: 1.65; }
.ts-15 { font-size: 15px; line-height: 1.55; }
.ts-34 { font-size: 34px; }
.ts-42 { font-size: 42px; }

/* Line-height utilities */
.lh-105 { line-height: 1.05; }
.lh-12 { line-height: 1.2; }
.lh-18 { line-height: 1.8; }
.lh-19 { line-height: 1.9; }

/* Opacity utility */
.op-007 { opacity: 0.07; }

/* Width utility */
.w-m460 { width: 100%; max-width: 460px; }
@media (min-width: 768px) { .w-m460 { width: 460px; } }

body { background: #FFFFFF; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes shimmer { 0% { opacity: 0.4; } 50% { opacity: 1; } 100% { opacity: 0.4; } }
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes heroZoom { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: scale(1); } }
@keyframes drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes badgeBump { 0% { transform: scale(1); } 40% { transform: scale(1.55); } 100% { transform: scale(1); } }

.animate-fade-up { animation: fadeUp 0.8s ease-out forwards; }
.animate-fade-in { animation: fadeIn 0.6s ease-out forwards; }
.animate-shimmer { animation: shimmer 2.5s ease-in-out infinite; }
.animate-slide-in { animation: slideIn 0.4s ease-out forwards; }
.animate-hero-zoom { animation: heroZoom 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.animate-drift { animation: drift 4.5s ease-in-out infinite; }
.animate-marquee { animation: marquee 64s linear infinite; }
.animate-badge-bump { animation: badgeBump 420ms cubic-bezier(0.34, 1.56, 0.64, 1); transform-origin: center; }

.delay-100 { animation-delay: 0.1s; opacity: 0; }
.delay-200 { animation-delay: 0.2s; opacity: 0; }
.delay-300 { animation-delay: 0.3s; opacity: 0; }
.delay-400 { animation-delay: 0.4s; opacity: 0; }
.delay-500 { animation-delay: 0.5s; opacity: 0; }
.delay-600 { animation-delay: 0.6s; opacity: 0; }
.delay-700 { animation-delay: 0.7s; opacity: 0; }
.delay-800 { animation-delay: 0.8s; opacity: 0; }

input:focus, textarea:focus, select:focus { outline: none; }
button { cursor: pointer; }
* { -webkit-font-smoothing: antialiased; }

/* Anchor-as-button styles: reset default link decoration where we use anchors for SPA nav */
a.nav-link, a.product-card-link, a.policy-link, a.brand-home-link, a.btn-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* Visually-hidden utility for SEO H1s and screen-reader-only content */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* FAQ accordion summary - removes default disclosure triangle, adds our own */
details.faq-item > summary { list-style: none; cursor: pointer; }
details.faq-item > summary::-webkit-details-marker { display: none; }
details.faq-item > summary::marker { display: none; }

/* =======================================================================
   LOADING STATE (before React mounts)
   ======================================================================= */

@keyframes loaderPulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.loader-v { font-family: 'Monsieur La Doulaise', cursive; font-size: 96px; color: #C9A96E; line-height: 1; animation: loaderPulse 1.6s ease-in-out infinite; }