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

.font-display { font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif; letter-spacing: 0.01em; }
.font-script { font-family: 'Great Vibes', 'Apple Chancery', cursive; }
.font-body { font-family: 'Inter', -apple-system, sans-serif; }
.font-label { font-family: 'Inter', sans-serif; letter-spacing: 0.18em; text-transform: uppercase; }

/* 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%); } }

.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 32s linear infinite; }

.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; }

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

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