* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.landing {
    background: #05070c;
    color: #f4efe6;
    font-family: "Inter", sans-serif;
    overflow-x: hidden;
}

/* ==================================================
   HERO
================================================== */
.hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    isolation: isolate;
    background: radial-gradient(circle at 50% 60%, #182c45 0%, #080d16 45%, #04060a 100%);
    perspective: 1200px;
}
.hero::after {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none; z-index: 20;
    background: radial-gradient(circle at center, transparent 35%, rgba(0,0,0,0.75) 110%);
}

/* ==================================================
   NAV
================================================== */
.nav {
    position: absolute; top: 0; left: 0; width: 100%;
    padding: 32px 55px;
    display: flex; justify-content: space-between; align-items: center;
    z-index: 30;
}
.logo { font-size: 16px; font-weight: 500; letter-spacing: 0.22em; color: #f4efe6; text-decoration: none; }
.logo span { color: #f3c366; }
.nav-links { display: flex; gap: 34px; }
.nav-links a {
    color: rgba(255,255,255,.65); text-decoration: none; text-transform: uppercase;
    font-size: 11px; letter-spacing: .18em; transition: .3s;
}
.nav-links a:hover { color: white; }

/* ==================================================
   HERO CONTENT
================================================== */
.hero-content {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%) translateZ(80px);
    text-align: center; width: min(1100px, 90%); z-index: 10;
}
.eyebrow { margin-bottom: 25px; font-size: 11px; letter-spacing: .42em; color: #e6bf78; }
.hero-content h1 {
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(85px, 11vw, 190px);
    font-weight: 400; letter-spacing: -.06em; line-height: .72; text-transform: uppercase;
}
.hero-content h1 span { display: block; }
.hero-content h1 .surname {
    font-style: italic;
    background: linear-gradient(90deg, #ffffff, #dec99d, #ffffff);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.subtitle {
    max-width: 440px; margin: 42px auto 0;
    font-family: "Cormorant Garamond", serif;
    font-size: 25px; font-style: italic; font-weight: 400;
    color: rgba(255,255,255,.66); line-height: 1.25;
}

/* ==================================================
   BUTTONS
================================================== */
.hero-actions { margin-top: 35px; display: flex; align-items: center; justify-content: center; gap: 32px; }
.main-button {
    display: flex; gap: 38px; align-items: center; padding: 17px 25px;
    text-decoration: none; color: #080808; background: #f0e7d6;
    text-transform: uppercase; font-size: 11px; letter-spacing: .22em; border-radius: 2px;
    transition: transform .3s ease, background .3s ease;
}
.main-button { position: relative; overflow: hidden; }
.main-button:hover { transform: translateY(-4px); background: white; }
/* gold sweep shimmer on hover */
.main-button::after {
    content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent);
    transform: skewX(-18deg); transition: none;
}
.main-button:hover::after { animation: sweep .8s ease; }
@keyframes sweep { from { left: -120%; } to { left: 130%; } }
.arrow { font-size: 16px; transition: transform .3s ease; }
.main-button:hover .arrow { transform: translate(3px,-3px); }
.text-link {
    color: rgba(255,255,255,.7); text-decoration: none; font-size: 11px;
    letter-spacing: .14em; text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,.25); padding-bottom: 4px;
}

/* ==================================================
   VAN GOGH INSPIRED BACKGROUND
================================================== */
.art-background { position: absolute; inset: 0; overflow: hidden; transform-style: preserve-3d; z-index: -2; }
.glow { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .5; animation: drift 12s ease-in-out infinite alternate; }
.glow-1 { width: 500px; height: 500px; left: -100px; top: 35%; background: #164b9c; }
.glow-2 { width: 420px; height: 420px; right: 5%; top: 5%; background: #cb8c2d; animation-delay: -3s; }
.glow-3 { width: 350px; height: 350px; left: 55%; bottom: -120px; background: #1a3e8f; animation-delay: -5s; }

.swirl {
    position: absolute; width: 550px; height: 550px; border-radius: 50%;
    border: 2px solid rgba(255,198,85,.24);
    box-shadow: 0 0 60px rgba(237,178,56,.08);
    animation: rotateSwirl 25s linear infinite; opacity: .4;
}
.swirl::before, .swirl::after { content: ""; position: absolute; border-radius: 50%; }
.swirl::before { inset: 70px; border: 2px solid rgba(93,152,255,.15); }
.swirl::after { inset: 150px; border: 1px solid rgba(255,198,85,.2); }
.swirl-1 { left: -220px; top: -120px; }
.swirl-2 { right: -260px; bottom: -220px; width: 700px; height: 700px; animation-direction: reverse; }
.swirl-3 { left: 48%; top: 30%; width: 380px; height: 380px; opacity: .18; }

/* particles */
.star {
    position: absolute; width: 2px; height: 2px; border-radius: 50%;
    background: #f6d28b; box-shadow: 0 0 8px #ffcf67;
    animation: twinkle 3s infinite alternate;
}

/* ==================================================
   FLOATING ART CARDS
================================================== */
.art-objects { position: absolute; inset: 0; pointer-events: none; z-index: 2; transform-style: preserve-3d; }
.art-card {
    position: absolute; width: 160px; height: 220px; padding: 8px;
    border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.035);
    backdrop-filter: blur(8px); box-shadow: 0 30px 80px rgba(0,0,0,.45);
    transition: transform .15s ease-out;
}
.art-inner {
    width: 100%; height: 100%;
    background:
        radial-gradient(circle at 60% 30%, #efbd4d 0 4%, transparent 5%),
        repeating-radial-gradient(ellipse at center, transparent 0 12px, rgba(255,207,88,.18) 13px 15px),
        linear-gradient(135deg, #152b53, #1c4c8e 60%, #ca842f);
}
.card-1 { left: 7%; top: 20%; transform: rotateY(22deg) rotateZ(-8deg); opacity: .65; }
.card-2 { right: 8%; top: 23%; transform: rotateY(-20deg) rotateZ(7deg); opacity: .6; }
.card-3 { left: 17%; bottom: -100px; width: 200px; height: 280px; transform: rotateY(15deg) rotateZ(12deg); opacity: .35; }

/* side text + scroll */
.side-text {
    position: absolute; left: 25px; top: 50%;
    transform: translateY(-50%) rotate(-90deg); transform-origin: left center;
    color: rgba(255,255,255,.25); font-size: 9px; letter-spacing: .28em; z-index: 10;
}
.scroll-indicator {
    position: absolute; right: 50px; bottom: 35px;
    display: flex; align-items: center; gap: 15px; z-index: 10;
    color: rgba(255,255,255,.35); font-size: 9px; letter-spacing: .2em;
}
.scroll-line { width: 55px; height: 1px; background: rgba(255,255,255,.35); position: relative; overflow: hidden; }
.scroll-line::after {
    content: ""; position: absolute; left: -100%; width: 100%; height: 100%;
    background: white; animation: scrollLine 2s infinite;
}

/* ==================================================
   ANIMATIONS
================================================== */
/* Staggered entrance reveal (blur + rise) */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    filter: blur(8px);
    animation: reveal-in 1s cubic-bezier(.2,.7,.2,1) forwards;
    animation-delay: var(--d, 0s);
}
@keyframes reveal-in {
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes drift {
    from { transform: translate3d(-20px, -15px, 0) scale(1); }
    to   { transform: translate3d(40px, 25px, 0) scale(1.15); }
}
@keyframes rotateSwirl { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes twinkle { from { opacity: .15; transform: scale(.6); } to { opacity: 1; transform: scale(1.4); } }
@keyframes scrollLine { from { left: -100%; } to { left: 100%; } }

/* ==================================================
   RESPONSIVE
================================================== */
@media (max-width: 900px) {
    .nav { padding: 24px 28px; }
    .hero-content { width: 92%; }
    /* move art cards to the edges/behind so they don't clash with text */
    .card-1 { left: -6%; top: 10%; }
    .card-2 { right: -6%; top: 12%; }
    .card-3 { left: -4%; bottom: -140px; }
}

@media (max-width: 700px) {
    .nav { padding: 20px; }
    .nav-links { display: none; }
    .hero-content h1 { font-size: 18vw; line-height: .82; }
    .eyebrow { font-size: 10px; letter-spacing: .3em; margin-bottom: 18px; }
    .subtitle { font-size: 20px; margin-top: 30px; }
    .hero-actions { flex-direction: column; gap: 18px; margin-top: 30px; }
    .main-button { width: 100%; max-width: 300px; justify-content: center; gap: 16px; padding: 16px 22px; }
    .side-text { display: none; }
    .art-card { opacity: .18; }         /* subtle, behind the text */
    .scroll-indicator { right: 50%; transform: translateX(50%); bottom: 20px; }
}

@media (max-width: 420px) {
    .hero-content h1 { font-size: 21vw; }
    .subtitle { font-size: 18px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .glow, .swirl, .star, .scroll-line::after,
    .art-card, .main-button::after { animation: none !important; }
    .reveal { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }
}