/* ============================================
   VS Jewels - Holding Page Styles
   ============================================ */

/* Font Faces - Butler */
@font-face {
    font-family: 'Butler';
    src: url('../fonts/Butler-Free-Lgt.woff2') format('woff2'),
         url('../fonts/Butler-Free-Lgt.woff') format('woff'),
         url('../fonts/Butler-Free-Lgt.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Butler';
    src: url('../fonts/Butler-Free-Rmn.woff2') format('woff2'),
         url('../fonts/Butler-Free-Rmn.woff') format('woff'),
         url('../fonts/Butler-Free-Rmn.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Butler';
    src: url('../fonts/Butler-Free-Med.woff2') format('woff2'),
         url('../fonts/Butler-Free-Med.woff') format('woff'),
         url('../fonts/Butler-Free-Med.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Butler';
    src: url('../fonts/Butler-Free-SBd.woff2') format('woff2'),
         url('../fonts/Butler-Free-SBd.woff') format('woff'),
         url('../fonts/Butler-Free-SBd.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Butler';
    src: url('../fonts/Butler-Free-Bd.woff2') format('woff2'),
         url('../fonts/Butler-Free-Bd.woff') format('woff'),
         url('../fonts/Butler-Free-Bd.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ============================================
   CSS Custom Properties
   ============================================ */
:root {
    --color-bg: #0d1c12;
    --color-bg-light: #1a2e1f;
    --color-gold: #ce973e;
    --color-gold-light: #d4a85a;
    --font-butler: 'Butler', Georgia, 'Times New Roman', serif;
}

/* ============================================
   Base Styles
   ============================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

body {
    font-family: var(--font-butler);
    background-color: var(--color-bg);
    color: var(--color-gold);
    min-height: 100vh;
    overflow-x: hidden;
}

/* ============================================
   Background Pattern
   ============================================ */
.background-pattern {
    position: fixed;
    inset: 0;
    z-index: 0;
    opacity: 0;
    animation: fadeInPattern 1.5s ease-out 0.5s forwards;
    
    /* SVG pattern as data URI - VS icon in darker green */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 313.31 350.83'%3E%3Cpath fill='%231a2e1f' d='M273.92,189.51l-63.76-53.31h-.1c-47.22-41.41-29.41-93.08,4.06-80.31,20.96,8.52,10.05,40.44-1.01,71.88.4.38.71.76,1.12,1.13l3.08,2.61C230.39,96.89,273.66,3.22,273.66,3.22l-3.61-3.22c-9.95,20.56-20.67,51.55-50.33,46.95-29.58-4.56-46.81,1.98-58.03,15.04-24.67,28.93-8.03,81.76,33.28,114.17l59.22,49.54c46.54,37.83,47.01,107.46-16.94,117.84-38.11,4.45-57.09-25.75-70.36-54.24l-11.47,10.08,40.87-111.39-4.06-3.4s-27.07,72.54-32.85,87.94L80.79,87.24c-3.97-9.29-8.9-33.96,22.84-33.96v-5.03H0v5.03c13.16,0,24.24.79,36.28,28.25,0,0,43.73,98.02,92.79,213.45,17.53,39.82,65.37,62.8,110.91,53.97,76.53-14.83,101.73-101.5,33.93-159.44Z'/%3E%3C/svg%3E");
    background-size: 180px auto;
    background-position: center center;
}

/* ============================================
   Main Content Layout
   ============================================ */
.content {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}

/* ============================================
   Logo & Typography
   ============================================ */
.logo-icon {
    margin-bottom: 0.5rem;
}

.logo-icon img {
    width: 120px;
    height: auto;
    display: block;
}

.brand-name {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 500;
    letter-spacing: 0.5em;
    margin-bottom: 3rem;
    text-transform: uppercase;
}

.headline {
    font-size: clamp(1.75rem, 5vw, 3rem);
    font-weight: 300;
    letter-spacing: 0.15em;
    margin-bottom: 0.75rem;
}

.opening {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    font-weight: 400;
    letter-spacing: 0.1em;
    margin-bottom: 2.5rem;
    opacity: 0.9;
}

.address {
    font-size: clamp(0.875rem, 2vw, 1rem);
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.05em;
    opacity: 0.75;
    line-height: 1.6;
}

/* ============================================
   Entrance Animations
   ============================================ */

/* Initial states - hidden */
.animate-logo,
.animate-brand,
.animate-headline,
.animate-opening,
.animate-address {
    opacity: 0;
}

/* Fade in keyframes */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInPattern {
    from {
        opacity: 0;
    }
    to {
        opacity: 0.4;
    }
}

/* Animation timings:
   0-0.5s: Black hold (nothing visible)
   0.5-1.5s: Logo fades in
   2.0s: "JEWELS" fades in
   2.5s: Coming Soon
   3.0s: Store opening
   3.5s: Address
*/

.animate-logo {
    animation: fadeIn 1s ease-out 0.5s forwards;
}

.animate-brand {
    animation: fadeIn 0.8s ease-out 2s forwards;
}

.animate-headline {
    animation: fadeIn 0.8s ease-out 2.5s forwards;
}

.animate-opening {
    animation: fadeIn 0.8s ease-out 3s forwards;
}

.animate-address {
    animation: fadeIn 0.8s ease-out 3.5s forwards;
}

/* ============================================
   Responsive Adjustments
   ============================================ */
@media (max-width: 600px) {
    .logo-icon img {
        width: 100px;
    }
    
    .brand-name {
        letter-spacing: 0.35em;
        margin-bottom: 2.5rem;
    }
    
    .background-pattern {
        background-size: 120px auto;
    }
}

@media (min-width: 1200px) {
    .logo-icon img {
        width: 160px;
    }
    
    .background-pattern {
        background-size: 220px auto;
    }
}

/* ============================================
   Reduced Motion Preference
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .animate-logo,
    .animate-brand,
    .animate-headline,
    .animate-opening,
    .animate-address,
    .background-pattern {
        animation: none;
        opacity: 1;
    }
}