/* ==========================================
   Echo Craft Creative Studio
   Global Styles
========================================== */

:root{

    --primary:#050505;
    --secondary:#111111;
    --accent:#D4AF37;

    --white:#FFFFFF;
    --light:#EDEDED;
    --gray:#9A9A9A;

    --max-width:1400px;

    --transition:.30s ease;

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--primary);
    color:var(--white);
    font-family:"Inter","Segoe UI",Arial,sans-serif;
    line-height:1.7;
    overflow-x:hidden;

}

img{

    display:block;
    max-width:100%;

}

a{

    text-decoration:none;
    color:inherit;

}

section{

    padding:120px 0;

}

.container{

    width:min(92%, var(--max-width));
    margin:0 auto;

}

/* ==========================================
   HERO
========================================== */

.hero {
    position: relative;

    min-height: 100vh;

    display: flex;
    align-items: center;

    overflow: hidden;
    isolation: isolate;

    background:
        linear-gradient(
            rgba(5, 5, 5, 0.38),
            rgba(5, 5, 5, 0.62)
        ),
        url("../images/hero/creative-studio-bg.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* ==========================================
   CINEMATIC VIDEO BACKGROUND
========================================== */

.hero-video {
    position: absolute;
    inset: -3%;

    z-index: 0;

    width: 106%;
    height: 106%;

    display: block;

    object-fit: cover;
    object-position: center center;

    opacity: 0.58;

    filter:
        brightness(0.68)
        contrast(1.08)
        saturate(0.9);

    pointer-events: none;

    transform: scale(1.02);

    animation:
        heroCinematicDrift 24s ease-in-out infinite alternate;
}


/* ==========================================
   HERO LIGHTING
========================================== */

.hero-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        radial-gradient(
            circle at 36% 45%,
            rgba(212, 175, 55, 0.09),
            transparent 28%
        ),
        linear-gradient(
            90deg,
            rgba(3, 3, 3, 0.97) 0%,
            rgba(3, 3, 3, 0.88) 31%,
            rgba(3, 3, 3, 0.63) 58%,
            rgba(3, 3, 3, 0.3) 100%
        ),
        linear-gradient(
            180deg,
            rgba(5, 5, 5, 0.12) 0%,
            rgba(5, 5, 5, 0.06) 70%,
            rgba(5, 5, 5, 0.9) 100%
        );

    pointer-events: none;
}

.hero::before {
    position: absolute;
    top: 22%;
    left: 18%;

    z-index: 1;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(212, 175, 55, 0.075),
            transparent 68%
        );

    content: "";

    filter: blur(10px);

    animation:
        heroAmbientGlow 8s ease-in-out infinite alternate;

    pointer-events: none;
}

.hero::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    z-index: 1;

    height: 150px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(5, 5, 5, 0.98)
        );

    content: "";

    pointer-events: none;
}


/* ==========================================
   HERO CONTENT
========================================== */

.hero > .container {
    position: relative;
    z-index: 2;

    width: min(92%, var(--max-width));
}

.hero-content {
    position: relative;

    width: 100%;
    max-width: 850px;

    padding-left: 2px;
}

.hero-tag {
    display: flex;
    align-items: center;
    gap: 16px;

    margin-bottom: 24px;

    color: var(--accent);

    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.42em;
    text-transform: uppercase;
}

.hero-tag::before {
    width: 42px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--accent)
        );

    content: "";
}

.hero h1 {
    max-width: 900px;

    margin: 0 0 30px;

    color: #ffffff;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(5rem, 6.5vw, 7rem);
    font-weight: 600;
    line-height: 0.96;
    letter-spacing: -0.025em;

    text-wrap: balance;

    text-shadow:
        0 12px 38px rgba(0, 0, 0, 0.75),
        0 2px 8px rgba(0, 0, 0, 0.55);
}

.text-gold {
    position: relative;

    display: inline-block;

    color: #d7ae2e;

    text-shadow:
        0 0 18px rgba(212, 175, 55, 0.15),
        0 0 42px rgba(212, 175, 55, 0.1);
}

.text-gold::after {
    position: absolute;
    right: 0;
    bottom: -6px;
    left: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(212, 175, 55, 0.85),
            rgba(212, 175, 55, 0)
        );

    content: "";
}

.hero-description {
    max-width: 720px;

    margin: 0 0 42px;

    color: rgba(255, 255, 255, 0.86);

    font-size: 1.08rem;
    line-height: 1.85;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.hero-buttons .btn,
.hero-buttons .btn-outline {
    min-width: 190px;
}

.hero-buttons .btn-outline {
    background: rgba(10, 10, 10, 0.48);
    border-color: rgba(212, 175, 55, 0.58);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}


/* ==========================================
   HERO MOTION
========================================== */

@keyframes heroCinematicDrift {

    0% {
        transform:
            scale(1.02)
            translate3d(0, 0, 0);
    }

    100% {
        transform:
            scale(1.08)
            translate3d(-1.2%, -0.6%, 0);
    }

}

@keyframes heroAmbientGlow {

    0% {
        opacity: 0.45;

        transform:
            translate3d(-12px, 4px, 0)
            scale(0.95);
    }

    100% {
        opacity: 0.9;

        transform:
            translate3d(18px, -10px, 0)
            scale(1.08);
    }

}


/* ==========================================
   HERO — TABLET
========================================== */

@media (max-width: 991px) {

    .hero {
        min-height: 100svh;

        padding: 130px 0 80px;

        text-align: center;
    }

    .hero-video {
        inset: 0;

        width: 100%;
        height: 100%;

        opacity: 0.42;

        object-position: center center;

        animation-duration: 28s;
    }

    .hero-overlay {
        background:
            radial-gradient(
                circle at 50% 38%,
                rgba(212, 175, 55, 0.08),
                transparent 32%
            ),
            linear-gradient(
                180deg,
                rgba(5, 5, 5, 0.66) 0%,
                rgba(5, 5, 5, 0.72) 46%,
                rgba(5, 5, 5, 0.94) 100%
            );
    }

    .hero::before {
        top: 25%;
        left: 50%;

        width: 420px;
        height: 420px;

        transform: translateX(-50%);
    }

    .hero-content {
        max-width: 760px;

        margin: 0 auto;
    }

    .hero-tag {
        justify-content: center;
    }

    .hero h1 {
        font-size: clamp(3.7rem, 8vw, 5.4rem);
    }

    .hero-description {
        margin-right: auto;
        margin-left: auto;

        font-size: 1.04rem;
    }

    .hero-buttons {
        justify-content: center;
    }

}


/* ==========================================
   HERO — PHONE
========================================== */

@media (max-width: 576px) {

    .hero {
        min-height: 100svh;

        padding: 115px 0 70px;
    }

    .hero > .container {
        width: 100%;

        padding: 0 22px;
    }

    .hero-video {
        opacity: 0.32;

        animation: none;

        transform: scale(1.04);
    }

    .hero::before {
        display: none;
    }

    .hero-content {
        width: 100%;
        max-width: none;

        margin: 0;
    }

    .hero-tag {
        gap: 10px;

        margin-bottom: 20px;

        font-size: 0.66rem;
        letter-spacing: 0.2em;
    }

    .hero-tag::before {
        width: 26px;
    }

    .hero h1 {
        margin-bottom: 26px;

        font-size: clamp(2.75rem, 12vw, 3.65rem);
        line-height: 0.98;
    }

    .hero-description {
        max-width: 100%;

        margin-bottom: 34px;

        font-size: 0.98rem;
        line-height: 1.75;
    }

    .hero-buttons {
        width: 100%;

        flex-direction: column;
        gap: 14px;
    }

    .hero-buttons .btn,
    .hero-buttons .btn-outline {
        width: 100%;
        min-width: 0;

        justify-content: center;
    }

}


/* ==========================================
   REDUCED MOTION
========================================== */

@media (prefers-reduced-motion: reduce) {

    .hero-video,
    .hero::before {
        animation: none;
    }

}
/* ==========================================
   BUTTONS
========================================== */

.btn,
.projectButton,
.ctaButton{

    display:inline-block;
    padding:18px 38px;
    background:linear-gradient(135deg,#D4AF37,#B68B28);
    color:#111;
    border:none;
    border-radius:999px;
    font-weight:700;
    transition:var(--transition);

}

.btn:hover,
.projectButton:hover,
.ctaButton:hover{

    transform:translateY(-4px);
    box-shadow:0 15px 35px rgba(212,175,55,.35);

}

.btn-outline{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:18px 38px;

    border:2px solid rgba(212,175,55,.70);

    border-radius:999px;

    background:rgba(255,255,255,.10);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    color:#FFFFFF;

    font-weight:600;

    transition:all .30s ease;

}

.btn-outline:hover{

    background:var(--accent);
    color:#111;

}

/* ==========================================
   CTA
========================================== */

.ctaSection{

    padding:140px 0;
    background:#080808;
    text-align:center;

}

.ctaContent{

    width:min(90%,900px);
    margin:auto;

}

.ctaEyebrow{

    display:block;
    color:var(--accent);
    letter-spacing:5px;
    text-transform:uppercase;
    margin-bottom:20px;
    font-size:.85rem;

}

.ctaContent h2{

    font-family:"Cormorant Garamond",serif;
    font-size:4rem;
    margin-bottom:25px;

}

.ctaContent p{

    color:#d0d0d0;
    line-height:1.9;
    font-size:1.15rem;
    margin-bottom:45px;

}

.ctaButtons{

    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;

}

.ctaButton.secondary{

    background:transparent;
    border:2px solid var(--accent);
    color:#fff;

}

.ctaButton.secondary:hover{

    background:var(--accent);
    color:#111;

}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width:991px){

    section{

        padding:90px 0;

    }

    .hero{

        text-align:center;

    }

    .hero-content{

        margin:auto;

    }

    .hero h1{

        font-size:3.6rem;

    }

    .hero-description{

        font-size:1.05rem;

    }

    .hero-buttons,
    .ctaButtons{

        justify-content:center;

    }

    .ctaContent h2{

        font-size:2.8rem;

    }

}

@media (max-width:576px){

    .hero h1{

        font-size:2.9rem;

    }

    .hero-tag{

        letter-spacing:3px;

    }

    .btn,
    .btn-outline,
    .projectButton,
    .ctaButton{

        width:100%;
        text-align:center;

    }

}