/* ===== SHARED STYLES — DNEG-inspired Design System ===== */

:root {
    --white-noise: #fbfbf0;
    --film-noir: #2a2830;
    --coral: #ff625a;
    --grey-05: #3f3d43;
    --grey-04: #7e7d7d;
    --grey-03: #bcbcb6;
    --grey-02: #dcdbd3;
    --grey-01: #f1f0e6;
    --navy: #1D1C2A;
    --gap: 20px;
    --top-menu-height: 104px;
    --ease: cubic-bezier(.25, .1, .25, 1);
    --ease-dneg: cubic-bezier(0.8, 0, 0, 1);
    --max-width: 1512px;
}

@media (max-width: 767px) {
    :root { --top-menu-height: 60px; }
}

*, *::before, *::after { box-sizing: border-box; }

body, html {
    margin: 0; padding: 0;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    color: var(--film-noir);
    background-color: var(--white-noise);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

@media (max-width: 767px) {
    html, body { font-size: 15px; }
}

h1,h2,h3,h4,h5,h6,p,ul,li,figure,button { padding: 0; margin: 0; }
a { text-decoration: none; color: inherit; }
button { border: none; background: none; cursor: pointer; outline: none; }
img { display: block; }
li { list-style: none; }
::selection { background-color: var(--coral); color: #000; }

/* ===== NAVIGATION ===== */
.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    height: var(--top-menu-height);
    display: flex;
    align-items: center;
    padding: 0 var(--gap);
    transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.nav.scrolled {
    background: rgba(251, 251, 240, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.nav__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.nav__logo {
    font-family: 'Oswald', sans-serif;
    font-weight: 900;
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: var(--white-noise);
    transition: color 0.4s var(--ease);
}
.nav.scrolled .nav__logo { color: var(--film-noir); }
.nav__links { display: flex; gap: 30px; align-items: center; }
.nav__link {
    font-family: 'Inter', sans-serif;
    font-size: 0.889rem;
    font-weight: 500;
    color: var(--white-noise);
    transition: color 0.4s var(--ease), opacity 0.3s var(--ease);
    text-transform: capitalize;
}
.nav.scrolled .nav__link { color: var(--film-noir); }
.nav__link:hover { opacity: 0.4; }
.nav__cta {
    font-family: 'Inter', sans-serif;
    font-size: 0.889rem;
    font-weight: 500;
    color: var(--film-noir);
    background: var(--coral);
    padding: 10px 28px;
    border-radius: 100vw;
    transition: transform 0.3s var(--ease);
}
.nav__cta:hover { transform: scale(1.05); }
.nav__hamburger { display: none; flex-direction: column; gap: 6px; cursor: pointer; z-index: 1001; }
.nav__hamburger span { width: 28px; height: 2px; background: var(--white-noise); transition: background 0.4s var(--ease); }
.nav.scrolled .nav__hamburger span { background: var(--film-noir); }
@media (max-width: 767px) {
    .nav__links { display: none; }
    .nav__logo { font-size: 1.4rem; }
    .nav__hamburger { display: flex; }
}

/* ===== FOOTER ===== */
.footer {
    position: relative;
    z-index: 100;
    background: var(--film-noir);
    color: var(--white-noise);
}
.footer a, .footer button {
    line-height: 1.25;
    transition: opacity 0.3s var(--ease);
    font-family: 'Inter', sans-serif;
}
.footer a:hover, .footer button:hover { opacity: 0.3; }
.footer__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 400px;
    padding: 40px var(--gap) 30px;
    justify-content: space-between;
}
.footer__top {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    column-gap: var(--gap);
    margin-bottom: 60px;
}
.footer__brand { grid-column: 1 / 3; }
.footer__brand-name {
    font-family: 'Oswald', sans-serif;
    font-weight: 900;
    font-size: 1.8rem;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.footer__brand-desc {
    font-size: 0.833rem;
    font-weight: 300;
    color: var(--grey-03);
    line-height: 1.5;
    max-width: 280px;
}
.footer__nav { grid-column: 3 / 5; display: flex; gap: 60px; }
.footer__nav-title {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 0.889rem;
    text-transform: uppercase;
    margin-bottom: 16px;
    letter-spacing: 0.05em;
}
.footer__nav-list { display: flex; flex-direction: column; gap: 10px; }
.footer__nav-link { font-size: 0.833rem; font-weight: 300; color: var(--grey-03); }
.footer__social { grid-column: 5 / 7; display: flex; gap: 20px; justify-content: flex-end; align-items: flex-start; }
.footer__social-link {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid var(--grey-05);
    display: flex; align-items: center; justify-content: center;
    transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.footer__social-link:hover { border-color: var(--coral); background: var(--coral); opacity: 1; }
.footer__social-link svg { width: 16px; height: 16px; fill: var(--white-noise); }
.footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-top: 1px solid var(--grey-05);
    padding-top: 20px;
}
.footer__copy { font-size: 0.722rem; font-weight: 300; color: var(--grey-04); }
.footer__back-top {
    font-family: 'Inter', sans-serif;
    font-size: 0.833rem;
    font-weight: 500;
    color: var(--white-noise);
    cursor: pointer;
    text-transform: capitalize;
}
@media (max-width: 767px) {
    .footer__top { grid-template-columns: 1fr; gap: 40px; }
    .footer__brand, .footer__nav, .footer__social { grid-column: 1; }
    .footer__social { justify-content: flex-start; }
}

/* ===== REVEAL ANIMATION ===== */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s var(--ease-dneg), transform 0.8s var(--ease-dneg);
}
.reveal.visible { opacity: 1; transform: translateY(0); }