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

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--on-accent);
    color: var(--text-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: var(--landing-overlay);
    z-index: 0;
}

.noise-overlay {
    position: fixed;
    inset: 0;
    z-index: 1;
    opacity: 0.04;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}

.gradient-overlay {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        135deg,
        rgba(var(--accent-rgb), 0.1) 0%,
        rgba(var(--accent2-rgb), 0.06) 100%
    );
}

.hero {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 4rem;
    padding: 2rem 4rem;
    max-width: 1100px;
    width: 100%;
}

.hero-content {
    flex: 4;
    text-align: left;
}

h1 {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 2.625em;
    font-weight: 700;
    color: var(--text-strong);
    line-height: 1.2;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 1.125em;
    font-weight: 600;
    color: var(--accent);
    line-height: 1.6;
}

.buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    flex: 6;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex: 1 1 calc(33.333% - 0.5rem);
    min-width: 110px;
    padding: 0.75rem 1rem;
    font-family: 'Inter', sans-serif;
    font-size: 1em;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    border: 2px solid var(--accent);
    border-radius: 8px;
    background: transparent;
    transition: all 0.25s ease;
    cursor: pointer;
}

.btn:hover {
    transform: scale(1.0425);
    background: rgba(var(--accent-rgb), 0.1);
    box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.2);
}

.btn:active {
    transform: scale(0.98);
}

.btn svg {
    flex-shrink: 0;
    color: var(--accent);
}

/* Animations */
.fade-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.75s ease, transform 0.75s ease;
}

.fade-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.75s ease, transform 0.75s ease;
}

.fade-left.visible,
.fade-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Responsive */
@media (max-width: 980px) {
    .hero {
        gap: 3rem;
        padding: 2rem 3rem;
    }
}

@media (max-width: 736px) {
    .hero {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
        padding: 2rem;
    }

    .hero-content {
        text-align: center;
    }

    .buttons {
        align-items: center;
        width: 100%;
    }

    h1 {
        font-size: 2em;
    }

    .subtitle {
        font-size: 1em;
    }

    .buttons {
        max-width: 100%;
        justify-content: center;
    }

    .btn {
        padding: 0.65rem 0.75rem;
        font-size: 0.85em;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 1.6em;
    }

    .subtitle {
        font-size: 0.9em;
    }

    .hero {
        padding: 1.5rem;
    }

    .btn {
        max-width: 280px;
        padding: 0.7rem 1rem;
        font-size: 0.85em;
    }
}

/* ==========================================================================
   Landing animations
   ========================================================================== */

/* Slow Ken Burns drift on the background photo */
@keyframes ken-burns {
    from { transform: scale(1); }
    to   { transform: scale(1.08) translate(-1%, -1%); }
}

.bg-photo {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: url('../images/sja/sjabackground.jpeg');
    background-size: cover;
    background-position: center;
    animation: ken-burns 28s ease-in-out infinite alternate;
    will-change: transform;
}

/* Floating color orbs */
.orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.35;
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: screen;
    animation: orb-drift 18s ease-in-out infinite alternate;
}

.orb--gold {
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.55), transparent 65%);
    top: -10%;
    left: -8%;
}

.orb--blue {
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(var(--accent2-rgb), 0.45), transparent 65%);
    bottom: -15%;
    right: -10%;
    animation-duration: 24s;
    animation-delay: -6s;
}

.orb--rose {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.35), transparent 65%);
    top: 55%;
    left: 45%;
    animation-duration: 21s;
    animation-delay: -12s;
}

@keyframes orb-drift {
    from { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(60px, -40px) scale(1.12); }
    to   { transform: translate(-40px, 50px) scale(0.95); }
}

/* Title reveals letter by letter */
h1 .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.6em) rotateX(-60deg);
    transform-origin: bottom;
    animation: char-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

h1 .char.space {
    width: 0.3em;
}

@keyframes char-in {
    to { opacity: 1; transform: translateY(0) rotateX(0); }
}

.subtitle {
    opacity: 0;
    transform: translateY(12px);
    animation: fade-in-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.1s forwards;
}

@keyframes fade-in-up {
    to { opacity: 1; transform: translateY(0); }
}

/* Gold shimmer sweeps through the subtitle */
.subtitle {
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 40%, var(--accent-glow) 50%, var(--accent) 60%, var(--accent) 100%);
    background-size: 250% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.subtitle.shimmer {
    animation: fade-in-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.1s forwards, subtitle-shimmer 6s linear 2s infinite;
}

@keyframes subtitle-shimmer {
    from { background-position: 125% center; }
    to   { background-position: -125% center; }
}

/* Buttons cascade in, then get a shine sweep and lift on hover */
.buttons .btn {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
    animation: btn-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.buttons .btn:nth-child(1) { animation-delay: 1.3s; }
.buttons .btn:nth-child(2) { animation-delay: 1.4s; }
.buttons .btn:nth-child(3) { animation-delay: 1.5s; }
.buttons .btn:nth-child(4) { animation-delay: 1.6s; }
.buttons .btn:nth-child(5) { animation-delay: 1.7s; }
.buttons .btn:nth-child(6) { animation-delay: 1.8s; }

@keyframes btn-in {
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(115deg, transparent 35%, rgba(var(--accent-rgb), 0.35) 50%, transparent 65%);
    transform: translateX(-120%);
}

.btn:hover::before {
    transform: translateX(120%);
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 12px 28px rgba(var(--accent-rgb), 0.25), 0 0 0 1px rgba(var(--accent-rgb), 0.4) inset;
}

.btn svg {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn:hover svg {
    transform: rotate(-8deg) scale(1.15);
}

/* Old fade helpers are superseded by the animations above */
.fade-left,
.fade-right {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .bg-photo,
    .orb,
    h1 .char,
    .subtitle,
    .subtitle.shimmer,
    .buttons .btn,
    .btn svg {
        animation: none !important;
        transition: none !important;
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================================
   3D portrait — the photo turns toward the pointer (see js/portrait3d.js)
   ========================================================================== */
.portrait {
    position: relative;
    width: min(240px, 26vh);
    aspect-ratio: 4 / 5;
    margin-bottom: 1.5rem;
    border-radius: 20px;
    overflow: hidden;
    border: 2px solid rgba(var(--accent-rgb), 0.6);
    box-shadow: 0 20px 50px rgba(var(--shadow-rgb), 0.45), 0 0 40px rgba(var(--accent-rgb), 0.18);
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    opacity: 0;
    translate: 0 12px;
    animation: portrait-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

/* Animates `translate`, not `transform`, so the tilt keeps working */
@keyframes portrait-in {
    to { opacity: 1; translate: 0 0; }
}

.portrait img,
.portrait canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.portrait img {
    object-fit: cover;
}

.portrait canvas {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.portrait.is-3d canvas {
    opacity: 1;
}

/* Soft highlight that slides with the tilt */
.portrait-glare {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.16), transparent 55%);
    mix-blend-mode: soft-light;
}

@media (max-width: 736px) {
    .portrait {
        width: min(170px, 22vh);
        margin: 0 auto 1.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .portrait {
        animation: none;
        opacity: 1;
        translate: none;
        transform: none;
    }
}