/* Reset and base styles */
html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    background:
        radial-gradient(circle at 12% 8%, rgba(216, 223, 200, 0.48) 0, transparent 28vw),
        radial-gradient(circle at 90% 18%, rgba(62, 128, 0, 0.10) 0, transparent 24vw),
        linear-gradient(145deg, #FFFDD0 0%, #fbf7cd 46%, #edf3d8 100%);
}

#sequence-canvas-container {
    --character-bottom-bleed: 24vh;
    height: calc(100vh + var(--character-bottom-bleed)) !important;
    overflow: visible !important;
    z-index: 60;
}

#sequence-video,
#heroVideo {
    width: 100%;
    height: calc(100vh + var(--character-bottom-bleed)) !important;
    object-fit: contain;
    object-position: 100% center;
    overflow: visible;
    background: transparent;
}

@media (max-width: 768px) {
    #sequence-video {
        object-position: center;
    }
}

.hero-glow-backdrop,
.contact-glow-panel {
    border: 1px solid rgba(74, 222, 171, 0.20);
    background:
        radial-gradient(circle at 30% 22%, rgba(74, 222, 171, 0.20) 0%, transparent 36%),
        radial-gradient(circle at 72% 76%, rgba(255, 253, 208, 0.10) 0%, transparent 32%),
        linear-gradient(145deg, #143b34 0%, #0d1f1c 52%, #061411 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 253, 208, 0.16),
        inset 0 0 54px rgba(74, 222, 171, 0.13),
        0 36px 100px rgba(13, 31, 28, 0.20);
}

.contact-glow-panel {
    border-radius: clamp(2.2rem, 7vw, 4.8rem) !important;
    filter: none !important;
    opacity: 0.52;
}

.character-platform {
    position: absolute;
    left: 75%;
    top: calc(100vh - 8vh);
    z-index: 6;
    width: clamp(420px, 48vw, 860px);
    height: clamp(330px, 33vw, 580px);
    border-radius: clamp(45px, 6vw, 90px);
    pointer-events: none;
    transform: translate(-50%, -50%) perspective(900px) rotateX(58deg);
    transform-origin: center;
    background:
        radial-gradient(ellipse at 50% 20%, rgba(46, 174, 126, 0.25) 0%, transparent 65%),
        linear-gradient(180deg, #0f352e 0%, #051411 100%);
    border: 1px solid rgba(74, 222, 171, 0.18);
    border-top: 1.5px solid rgba(74, 222, 171, 0.45);
    box-shadow:
        inset 0 1.5px 0 rgba(74, 222, 171, 0.35),
        0 1px 0 #08211b,
        0 2px 0 #08211b,
        0 3px 0 #08211b,
        0 4px 0 #071c17,
        0 5px 0 #071c17,
        0 6px 0 #061814,
        0 7px 0 #061814,
        0 8px 0 #051410,
        0 9px 0 #051410,
        0 10px 0 #04110d,
        0 11px 0 #04110d,
        0 12px 0 #030e0a,
        0 13px 0 #030e0a,
        0 14px 0 #020a07,
        0 15px 0 #020a07,
        0 16px 0 #010604,
        0 17px 0 #010604,
        0 18px 0 #010302,
        0 22px 50px rgba(0, 0, 0, 0.35),
        0 38px 80px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.character-platform::before {
    content: "";
    position: absolute;
    inset: 8% 6% 12%;
    border-radius: inherit;
    border: 1px solid rgba(74, 222, 171, 0.15);
    background: linear-gradient(180deg, #041411 0%, #010504 100%);
    box-shadow:
        inset 0 0 20px rgba(0, 0, 0, 0.85),
        0 1px 0 rgba(255, 255, 255, 0.05);
}

.character-platform::after {
    content: "";
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: -40%;
    height: 60%;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    filter: blur(30px);
    transform: scaleX(1.1);
    z-index: -2;
}

@media (max-width: 768px) {
    .character-platform {
        left: 50%;
        top: calc(100vh - 10vh);
        width: clamp(360px, 85vw, 680px);
        height: clamp(250px, 60vw, 375px);
        border-radius: clamp(38px, 8vw, 65px);
        transform: translate(-50%, -50%) perspective(760px) rotateX(60deg);
    }
}

/* Custom Selection */
::selection {
    background-color: #0d1f1c;
    /* accent */
    color: #FFFDD0;
    /* cream */
}

/* Scrollbar hiding (handled mostly by Lenis, but good for base) */
::-webkit-scrollbar {
    display: none;
}

* {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Orbit Animations */
@keyframes spin-slow {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes spin-slow-reverse {
    from {
        transform: translate(-50%, -50%) rotate(360deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(0deg);
    }
}

.orbit-circle-1 {
    transform: translate(-50%, -50%);
    animation: spin-slow 60s linear infinite;
    transform-origin: center center;
    border-style: solid;
    border-color: #3e8000;
    /* 100% opacity vibrant parrot green */
    border-width: 3.5px 0.5px 4.0px 0.8px;
}

.orbit-circle-1::after {
    content: '';
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 18px;
    background-color: #d8cabd;
    /* beige/cream revolving ball 1 */
    border-radius: 50%;
}

.orbit-circle-1::before {
    content: '';
    position: absolute;
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 18px;
    background-color: #d8cabd;
    /* beige/cream revolving ball 2 (opposite side) */
    border-radius: 50%;
}

.orbit-circle-2 {
    transform: translate(-50%, -50%);
    animation: spin-slow-reverse 80s linear infinite;
    transform-origin: center center;
    border-style: solid;
    border-color: rgba(13, 31, 28, 0.1);
    border-width: 0.5px 3.0px 0.8px 2.5px;
}

.orbit-circle-2::before {
    content: '';
    position: absolute;
    bottom: 20%;
    right: -11px;
    width: 22px;
    height: 22px;
    background-color: #0d1f1c;
    /* dark green revolving ball 1 */
    border-radius: 50%;
}

.orbit-circle-2::after {
    content: '';
    position: absolute;
    top: 20%;
    left: -11px;
    width: 22px;
    height: 22px;
    background-color: #0d1f1c;
    /* dark green revolving ball 2 (opposite side) */
    border-radius: 50%;
}

/* Typography Enhancements */
h1,
h2,
h3 {
    text-wrap: balance;
}

h1.font-serif,
h2.font-serif,
h3.font-serif {
    letter-spacing: -0.02em;
    font-weight: 400;
}

/* Floating Green Rounded Rectangles (Capsules) */
.glow-rect {
    position: absolute;
    border-radius: 2.5rem;
    border: 1px solid rgba(62, 128, 0, 0.15);
    background: linear-gradient(135deg, rgba(26, 59, 53, 0.08) 0%, rgba(13, 31, 28, 0.03) 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 
        0 10px 40px rgba(13, 31, 28, 0.04),
        inset 0 0 20px rgba(62, 128, 0, 0.06);
    pointer-events: none;
    z-index: 5;
}

@keyframes float-rect-1 {
    0%, 100% {
        transform: translate(0, 0) rotate(15deg) scale(1);
    }
    50% {
        transform: translate(2.5vw, -3vh) rotate(30deg) scale(1.03);
    }
}

@keyframes float-rect-2 {
    0%, 100% {
        transform: translate(0, 0) rotate(-45deg) scale(1);
    }
    50% {
        transform: translate(-3vw, 4vh) rotate(-30deg) scale(0.97);
    }
}

@keyframes float-rect-3 {
    0%, 100% {
        transform: translate(0, 0) rotate(60deg) scale(1);
    }
    50% {
        transform: translate(2vw, 2.5vh) rotate(75deg) scale(1.02);
    }
}

@keyframes float-rect-4 {
    0%, 100% {
        transform: translate(0, 0) rotate(-15deg) scale(1);
    }
    50% {
        transform: translate(-2vw, -2.5vh) rotate(-25deg) scale(0.98);
    }
}

.animate-rect-1 {
    animation: float-rect-1 18s ease-in-out infinite;
}

.animate-rect-2 {
    animation: float-rect-2 22s ease-in-out infinite;
}

.animate-rect-3 {
    animation: float-rect-3 26s ease-in-out infinite;
}

.animate-rect-4 {
    animation: float-rect-4 30s ease-in-out infinite;
}

/* Utilities for JS */
.reveal-heading,
.reveal-text,
.about-reveal,
.works-reveal {
    opacity: 0;
}

.reveal-heading {
    transform: translateY(35px) scale(0.95);
    filter: blur(8px);
}

.liquid-glass {
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 
        0 20px 40px -8px rgba(13, 31, 28, 0.07),
        0 8px 18px -4px rgba(13, 31, 28, 0.04),
        0 0 1px 1px rgba(13, 31, 28, 0.02);
}

.premium-shadow {
    box-shadow: 
        0 40px 90px -15px rgba(13, 31, 28, 0.08),
        0 20px 45px -10px rgba(13, 31, 28, 0.04),
        0 0 1px 1px rgba(13, 31, 28, 0.01);
}

#contact-form-card {
    box-shadow: 
        0 50px 100px -20px rgba(0, 0, 0, 0.75),
        0 25px 50px -10px rgba(0, 0, 0, 0.4);
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

.animate-marquee {
    animation: marquee 20s linear infinite;
}

/* Floating Spheres Keyframe Animations */
@keyframes float-1 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(8vw, -6vh) scale(1.15);
    }

    66% {
        transform: translate(-4vw, 8vh) scale(0.85);
    }
}

@keyframes float-2 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-10vw, 6vh) scale(1.2);
    }
}

@keyframes float-3 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    40% {
        transform: translate(6vw, 10vh) scale(0.85);
    }

    80% {
        transform: translate(-6vw, -5vh) scale(1.1);
    }
}

.floating-sphere-1,
.floating-sphere-2,
.floating-sphere-3 {
    border-radius: clamp(2.5rem, 7vw, 5.5rem) !important;
    border: 1px solid rgba(62, 128, 0, 0.16);
    background:
        radial-gradient(circle at 24% 18%, rgba(255, 253, 208, 0.20) 0%, transparent 34%),
        linear-gradient(135deg, rgba(26, 59, 53, 0.11) 0%, rgba(62, 128, 0, 0.075) 48%, rgba(13, 31, 28, 0.035) 100%) !important;
    filter: none !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        inset 0 1px 0 rgba(255, 253, 208, 0.24),
        inset 0 0 42px rgba(62, 128, 0, 0.13),
        0 28px 90px rgba(13, 31, 28, 0.08);
}

.floating-sphere-1 {
    animation: float-1 28s ease-in-out infinite;
    transform: rotate(14deg);
}

.floating-sphere-2 {
    animation: float-2 34s ease-in-out infinite;
    border-color: rgba(62, 128, 0, 0.22);
}

.floating-sphere-3 {
    animation: float-3 40s ease-in-out infinite;
    transform: rotate(-18deg);
}

/* Contact Form & Input Styling */
input:focus,
select:focus,
textarea:focus {
    box-shadow: 0 0 0 2px rgba(255, 253, 208, 0.1);
}

/* Override browser autofill colors to match dark luxurious palette */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: #FFFDD0 !important;
    -webkit-box-shadow: 0 0 0px 1000px #0d1f1c inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Navbar theme adaptation for dark sections */
nav.in-dark-section .liquid-glass {
    background: rgba(13, 31, 28, 0.65) !important;
    /* Darker glass backdrop */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #FFFDD0 !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
}

nav.in-dark-section .liquid-glass span,
nav.in-dark-section .liquid-glass a,
nav.in-dark-section .liquid-glass i {
    color: #FFFDD0 !important;
}

nav.in-dark-section .liquid-glass a.bg-white\/40 {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #FFFDD0 !important;
}

nav.in-dark-section .liquid-glass a.bg-white\/40:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

nav.in-dark-section .bg-accent {
    background: #FFFDD0 !important;
    color: #0d1f1c !important;
}

/* Showreel Navigation Hide & Interactive Styles */
#main-navbar {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease-in-out !important;
}

#main-navbar.hidden-state {
    transform: translateY(-150%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#reel-overlay {
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

#reel-overlay.playing-state {
    opacity: 0;
    pointer-events: none;
}