/* --- RESET & BASE --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* --- TYPOGRAPHY --- */
@font-face {
    font-family: 'D-DINExp';
    /* Ensure this path matches your folder structure exactly */
    src: url('../fonts/D-DINExp.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'D-DINExp', sans-serif;
    color: #01030e;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden; /* Prevents scrollbar during animation fly-ins */
}

/* --- LAYOUT --- */
/* We use a simple wrapper to center everything */
.container {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 2rem;
}

.logo-container {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* --- SVG ANIMATION (The Mechanical Feather) --- */

.feather-svg {
    width: 106px;
    height: auto;
    margin-bottom: 1rem;
    overflow: visible;
}

/* CSP Compliance for Mask */
.mask-alpha {
    mask-type: alpha;
}

/* 1. Spine Animation */
.feather-spine {
    transform-origin: bottom center;
    animation: deploySpine 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* 2. Plates Common Styles */
.feather-plate {
    opacity: 0;
    transform-origin: center center;
}

/* Animation Direction */
.left-plate {
    animation: snapLeft 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.right-plate {
    animation: snapRight 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Staggered Delays (Zipper Effect) */
.plate-1 { animation-delay: 0.30s; }
.plate-2 { animation-delay: 0.35s; }
.plate-3 { animation-delay: 0.40s; }
.plate-4 { animation-delay: 0.45s; }
.plate-5 { animation-delay: 0.50s; }
.plate-6 { animation-delay: 0.55s; }
.plate-7 { animation-delay: 0.60s; }
.plate-8 { animation-delay: 0.65s; }

/* --- TEXT ANIMATION --- */

.brand-name {
    font-family: 'D-DINExp', sans-serif; /* Explicitly force correct font */
    font-size: 128px;
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.02em; /* Tights up the large text slightly */
    font-weight: normal;
    color: #01030e;
    
    /* Animation */
    opacity: 0;
    animation: fadeUp 1s ease-out forwards;
    animation-delay: 0.8s;
}

.tagline {
    font-family: 'D-DINExp', sans-serif; /* Explicitly force correct font */
    font-size: 34px;
    margin-top: 1rem;
    color: #01030e;
    letter-spacing: 0.04em;
    font-weight: normal;
    
    /* Animation */
    opacity: 0;
    animation: fadeUp 1s ease-out forwards;
    animation-delay: 1.0s;
}

/* --- KEYFRAMES --- */

@keyframes deploySpine {
    0% { transform: scaleY(0); opacity: 0; }
    100% { transform: scaleY(1); opacity: 1; }
}

@keyframes snapLeft {
    0% { opacity: 0; transform: translateX(15px) scale(0.9); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes snapRight {
    0% { opacity: 0; transform: translateX(-15px) scale(0.9); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- RESPONSIVE --- */

@media (max-width: 768px) {
    .feather-svg {
        width: 80px; /* Shrink logo slightly on mobile */
    }
    
    .brand-name {
        font-size: 64px; /* Halve the size for tablets/mobile */
        line-height: 1.2;
    }
    
    .tagline {
        font-size: 18px;
        margin-top: 0.5rem;
        max-width: 300px; /* Prevent tagline from getting too wide on small screens */
        line-height: 1.4;
    }
}

@media (max-width: 400px) {
    .brand-name {
        font-size: 48px; /* Even smaller for very narrow phones */
    }
}