/*
Theme Name: aqvaglobal
Theme URI: http://aqvaglobal.com/
Author: Your Name
Author URI: http://aqvaglobal.com
Description: A custom WordPress theme named Websnetics.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: websnetics
Tags: custom, theme, aqvaglobal
*/

  /* ─── RESET & BASE ─── */
        *,
        *::before,
        *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --black: #0a0a0a;
            --white: #f5f2ee;
            --red: #c0392b;
            --grey: #3a3a3a;
            --light: #d6d0c8;
            --font-serif: 'Cormorant Garamond', Georgia, serif;
            --font-sans: 'Montserrat', sans-serif;
        }

        html {
            scroll-behavior: auto;
        }

        /* Lenis handles scroll */
        body {
            background: var(--black);
            color: var(--white);
            font-family: var(--font-sans);
            font-size: 14px;
            letter-spacing: 0.08em;
            overflow-x: hidden;
            cursor: none;
        }

        /* ─── CUSTOM CURSOR ─── */
        #cursor {
            position: fixed;
            width: 12px;
            height: 12px;
            background: var(--white);
            border-radius: 50%;
            pointer-events: none;
            z-index: 9999;
            transform: translate(-50%, -50%);
            transition: width .3s, height .3s, background .3s;
            mix-blend-mode: difference;
        }

        #cursor-follower {
            position: fixed;
            width: 40px;
            height: 40px;
            border: 1px solid rgba(245, 242, 238, .4);
            border-radius: 50%;
            pointer-events: none;
            z-index: 9998;
            transform: translate(-50%, -50%);
            transition: width .3s, height .3s;
        }

        body:has(a:hover) #cursor {
            width: 20px;
            height: 20px;
        }

        /* ─── PAGE LOADER ─── */
        #loader {
            position: fixed;
            inset: 0;
            background: var(--black);
            z-index: 9000;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 20px;
        }

        #loader-text {
            font-family: var(--font-serif);
            font-size: clamp(40px, 8vw, 100px);
            font-weight: 300;
            letter-spacing: .2em;
            overflow: hidden;
        }

        #loader-text span {
            display: block;
            transform: translateY(100%);
        }

        #loader-bar {
            width: 200px;
            height: 1px;
            background: var(--grey);
            position: relative;
        }

        #loader-bar::after {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            background: var(--white);
            width: 0;
            transition: none;
        }

        #loader-progress {
            font-size: 11px;
            letter-spacing: .2em;
            color: var(--light);
        }

        /* ─── NAVIGATION ─── */
        nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 30px 50px;
            mix-blend-mode: difference;
            opacity: 0;
        }

        .nav-logo {
            font-family: var(--font-serif);
            font-size: 20px;
            font-weight: 300;
            letter-spacing: .3em;
            text-transform: uppercase;
            text-decoration: none;
            color: var(--white);
        }

        .nav-links {
            display: flex;
            gap: 40px;
        }

        .nav-links a {
            font-size: 11px;
            letter-spacing: .2em;
            text-transform: uppercase;
            text-decoration: none;
            color: var(--white);
            position: relative;
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 1px;
            background: var(--white);
            transition: width .4s ease;
        }

        .nav-links a:hover::after {
            width: 100%;
        }

        /* ─── HERO ─── */
        #hero {
            position: relative;
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .hero-bg {
            position: absolute;
            inset: 0;
            background: var(--black);
        }

        .hero-bg video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: .3;
        }

        .hero-content {
            position: relative;
            z-index: 2;
            text-align: center;
        }

        .hero-definition {
            font-family: var(--font-serif);
            font-size: clamp(14px, 1.5vw, 20px);
            font-weight: 300;
            font-style: italic;
            letter-spacing: .15em;
            color: var(--light);
            margin-bottom: 30px;
            overflow: hidden;
        }

        .hero-definition span {
            display: block;
            transform: translateY(110%);
        }

        .hero-title {
            font-family: var(--font-serif);
            font-size: clamp(60px, 10vw, 140px);
            font-weight: 300;
            line-height: 1;
            letter-spacing: .05em;
            overflow: hidden;
        }

        .hero-title .line {
            overflow: hidden;
            display: block;
        }

        .hero-title .line span {
            display: block;
            transform: translateY(110%);
        }

        .hero-tagline {
            font-size: 11px;
            letter-spacing: .3em;
            text-transform: uppercase;
            color: var(--light);
            margin-top: 40px;
            overflow: hidden;
        }

        .hero-tagline span {
            display: block;
            transform: translateY(110%);
        }

        .hero-side {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            writing-mode: vertical-rl;
            font-size: 10px;
            letter-spacing: .3em;
            text-transform: uppercase;
            color: var(--light);
            opacity: 0;
        }

        .hero-side.left {
            left: 50px;
        }

        .hero-side.right {
            right: 50px;
            transform: translateY(-50%) rotate(180deg);
        }

        .hero-scroll-indicator {
            position: absolute;
            bottom: 40px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            opacity: 0;
        }

        .hero-scroll-indicator span {
            font-size: 9px;
            letter-spacing: .3em;
            text-transform: uppercase;
            color: var(--light);
        }

        .scroll-line {
            width: 1px;
            height: 60px;
            background: linear-gradient(to bottom, transparent, var(--white));
            animation: scrollPulse 2s ease-in-out infinite;
        }

        @keyframes scrollPulse {

            0%,
            100% {
                transform: scaleY(1);
                opacity: 1;
            }

            50% {
                transform: scaleY(.5);
                opacity: .5;
            }
        }

        /* ─── SECTION COMMON ─── */
        section {
            position: relative;
        }

        .section-label {
            font-size: 10px;
            letter-spacing: .4em;
            text-transform: uppercase;
            color: var(--light);
            margin-bottom: 20px;
        }

        /* ─── ABOUT ─── */
        #about {
            padding: 140px 80px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center;
            min-height: 100vh;
        }

        .about-images {
            position: relative;
            height: 500px;
        }

        .about-img {
            position: absolute;
            border-radius: 2px;
            overflow: hidden;
            clip-path: inset(100% 0 0 0);
        }

        .about-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform: scale(1.1);
        }

        .about-img:nth-child(1) {
            width: 65%;
            height: 55%;
            top: 0;
            left: 0;
        }

        .about-img:nth-child(2) {
            width: 55%;
            height: 60%;
            bottom: 0;
            right: 0;
        }

        .about-text {
            padding: 40px 0;
        }

        .about-number {
            font-family: var(--font-serif);
            font-size: 120px;
            font-weight: 300;
            color: rgba(245, 242, 238, .06);
            line-height: 1;
            margin-bottom: -20px;
        }

        .about-heading {
            font-family: var(--font-serif);
            font-size: clamp(36px, 5vw, 64px);
            font-weight: 300;
            line-height: 1.1;
            margin-bottom: 30px;
            overflow: hidden;
        }

        .about-heading .word {
            display: inline-block;
            overflow: hidden;
        }

        .about-heading .word span {
            display: inline-block;
            transform: translateY(100%);
        }

        .about-body {
            font-size: 14px;
            line-height: 2;
            color: var(--light);
            max-width: 420px;
            opacity: 0;
            transform: translateY(20px);
        }

        .about-divider {
            width: 40px;
            height: 1px;
            background: var(--red);
            margin: 30px 0;
            transform: scaleX(0);
            transform-origin: left;
        }

        /* ─── COLLECTION (HORIZONTAL SCROLL) ─── */
        #collection-wrapper {
            position: relative;
            overflow: hidden;
        }

        #collection-header {
            padding: 50px 80px 60px;
            display: flex;
            align-items: baseline;
            gap: 40px;
        }

        #collection-header h2 {
            font-family: var(--font-serif);
            font-size: clamp(50px, 8vw, 120px);
            font-weight: 300;
            letter-spacing: .05em;
        }

        #collection-header .col-count {
            font-size: 11px;
            letter-spacing: .3em;
            color: var(--light);
        }

        #collection-track-wrapper {
            /* This section will be pinned during horizontal scroll */
            height: 75vh;
            display: flex;
            align-items: center;
            overflow: hidden;
        }

        #collection-track {
            display: flex;
            gap: 40px;
            padding: 0 80px;
            will-change: transform;
        }

        .col-item {
            flex-shrink: 0;
            width: clamp(280px, 28vw, 400px);
            opacity: 0;
            transform: translateY(40px);
        }

        .col-item-inner {
            position: relative;
            overflow: hidden;
            border-radius: 2px;
        }


        .col-item-top-title {
            position: absolute;
            top: 10px;
            left: 12px;
            color: #fff;
            font-size: 14px;
            font-weight: 600;
            z-index: 2;
            background: rgba(0, 0, 0, 0.4);
            padding: 4px 8px;
            border-radius: 4px;
        }

        .col-item-inner img {
            width: 100%;
            height: clamp(350px, 50vh, 520px);
            object-fit: cover;
            transform: scale(1.05);
            transition: transform .6s ease;
        }

        .col-item:hover .col-item-inner img {
            transform: scale(1);
        }

        .col-item-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, .6) 0%, transparent 60%);
            opacity: 0;
            transition: opacity .4s;
        }

        .col-item:hover .col-item-overlay {
            opacity: 1;
        }

        .col-item-info {
            padding: 16px 4px;
            display: flex;
            align-items: baseline;
            justify-content: space-between;
        }

        .col-item-num {
            font-size: 10px;
            letter-spacing: .3em;
            color: var(--light);
        }

        .col-item-name {
            font-family: var(--font-serif);
            font-size: 18px;
            font-weight: 300;
            font-style: italic;
            letter-spacing: .1em;
        }

        /* ─── EXPERIENCE / EVENTS ─── */
        #experience {
            padding: 140px 80px;
            border-top: 1px solid rgba(245, 242, 238, .1);
        }

        .exp-header {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-bottom: 80px;
        }

        .exp-header h2 {
            font-family: var(--font-serif);
            font-size: clamp(40px, 6vw, 90px);
            font-weight: 300;
            letter-spacing: .05em;
        }

        .exp-header p {
            font-size: 11px;
            letter-spacing: .2em;
            color: var(--light);
            max-width: 200px;
            text-align: right;
            line-height: 1.8;
        }

        .event-list {
            display: flex;
            flex-direction: column;
        }

        .event-item {
            display: grid;
            grid-template-columns: 160px 1fr 200px;
            align-items: center;
            padding: 24px 0;
            border-bottom: 1px solid rgba(245, 242, 238, .08);
            opacity: 0;
            transform: translateX(-30px);
            position: relative;
            cursor: none;
            transition: border-color .3s;
        }

        .event-item:hover {
            border-color: rgba(245, 242, 238, .3);
        }

        .event-item::before {
            content: '';
            position: absolute;
            left: -80px;
            right: -80px;
            top: 0;
            height: 100%;
            background: rgba(245, 242, 238, .02);
            opacity: 0;
            transition: opacity .3s;
        }

        .event-item:hover::before {
            opacity: 1;
        }

        .event-date {
            font-size: 11px;
            letter-spacing: .15em;
            color: var(--light);
            font-variant-numeric: tabular-nums;
        }

        .event-name {
            font-family: var(--font-serif);
            font-size: clamp(18px, 2.5vw, 28px);
            font-weight: 300;
        }

        .event-type {
            font-size: 10px;
            letter-spacing: .3em;
            text-transform: uppercase;
            color: var(--light);
            text-align: right;
        }

        /* ─── GALLERY ─── */
        #gallery {
            padding: 100px 40px;
            columns: 4;
            column-gap: 16px;
        }

        .gallery-item {
            break-inside: avoid;
            margin-bottom: 16px;
            overflow: hidden;
            border-radius: 2px;
            clip-path: inset(100% 0 0 0);
        }

        .gallery-item img {
            width: 100%;
            display: block;
            transform: scale(1.05);
            transition: transform .6s ease;
        }

        .gallery-item:hover img {
            transform: scale(1);
        }

        /* ─── MARQUEE ─── */
        #marquee-section {
            padding: 80px 0;
            border-top: 1px solid rgba(245, 242, 238, .1);
            border-bottom: 1px solid rgba(245, 242, 238, .1);
            overflow: hidden;
        }

        .marquee-track {
            display: flex;
            white-space: nowrap;
            will-change: transform;
        }

        .marquee-content {
            display: flex;
            gap: 60px;
            padding-right: 60px;
            flex-shrink: 0;
        }

        .marquee-word {
            font-family: var(--font-serif);
            font-size: clamp(40px, 6vw, 80px);
            font-weight: 300;
            letter-spacing: .08em;
            color: transparent;
            -webkit-text-stroke: 1px rgba(245, 242, 238, .5);
        }

        .marquee-word.filled {
            color: var(--white);
            -webkit-text-stroke: none;
        }

        .marquee-sep {
            font-size: 10px;
            align-self: center;
            color: var(--red);
            letter-spacing: .3em;
        }

        /* ─── FORM / CONTACT ─── */
        #contact {
            padding: 160px 80px;
            min-height: 100vh;
            display: flex;
            align-items: center;
        }

        .contact-inner {
            width: 100%;
            max-width: 800px;
            margin: auto;
        }

        .contact-eyebrow {
            font-size: 10px;
            letter-spacing: .5em;
            text-transform: uppercase;
            color: var(--red);
            margin-bottom: 30px;
            opacity: 0;
        }

        .contact-heading {
            font-family: var(--font-serif);
            font-size: clamp(50px, 8vw, 110px);
            font-weight: 300;
            line-height: 1;
            margin-bottom: 60px;
            overflow: hidden;
        }

        .contact-heading .line {
            overflow: hidden;
        }

        .contact-heading .line span {
            display: block;
            transform: translateY(110%);
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-bottom: 30px;
            opacity: 0;
            transform: translateY(20px);
        }

        .form-field {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .form-field label {
            font-size: 9px;
            letter-spacing: .4em;
            text-transform: uppercase;
            color: var(--light);
        }

        .form-field input,
        .form-field textarea {
            background: transparent;
            border: none;
            border-bottom: 1px solid rgba(245, 242, 238, .2);
            padding: 14px 0;
            color: var(--white);
            font-family: var(--font-sans);
            font-size: 14px;
            letter-spacing: .08em;
            outline: none;
            transition: border-color .3s;
            width: 100%;
            cursor: none;
        }

        .form-field input:focus,
        .form-field textarea:focus {
            border-color: var(--white);
        }

        .form-field textarea {
            resize: none;
            height: 120px;
        }

        .form-submit {
            margin-top: 50px;
            opacity: 0;
            transform: translateY(20px);
        }

        .btn-submit {
            background: transparent;
            border: 1px solid rgba(245, 242, 238, .3);
            color: var(--white);
            font-family: var(--font-sans);
            font-size: 11px;
            letter-spacing: .4em;
            text-transform: uppercase;
            padding: 20px 60px;
            cursor: none;
            position: relative;
            overflow: hidden;
            transition: border-color .4s;
        }

        .btn-submit::before {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--white);
            transform: translateY(100%);
            transition: transform .5s cubic-bezier(.76, 0, .24, 1);
        }

        .btn-submit:hover {
            border-color: var(--white);
        }

        .btn-submit:hover::before {
            transform: translateY(0);
        }

        .btn-submit span {
            position: relative;
            z-index: 1;
            transition: color .5s cubic-bezier(.76, 0, .24, 1);
        }

        .btn-submit:hover span {
            color: var(--black);
        }

        /* ─── FOOTER ─── */
        footer {
            padding: 60px 80px;
            border-top: 1px solid rgba(245, 242, 238, .1);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .footer-logo {
            font-family: var(--font-serif);
            font-size: 28px;
            font-weight: 300;
            letter-spacing: .3em;
            text-transform: uppercase;
        }

        .footer-credits {
            font-size: 10px;
            letter-spacing: .2em;
            color: var(--light);
            text-align: right;
            line-height: 2;
        }

        .footer-credits a {
            color: var(--white);
            text-decoration: none;
        }

        .footer-top {
            font-size: 10px;
            letter-spacing: .3em;
            text-transform: uppercase;
            color: var(--light);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .footer-top::before {
            content: '↑';
            font-size: 14px;
        }

        /* ─── NOISE TEXTURE ─── */
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            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.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");
            pointer-events: none;
            z-index: 10000;
            opacity: .4;
        }

        /* ─── PROGRESS BAR ─── */
        #progress-bar {
            position: fixed;
            top: 0;
            left: 0;
            height: 2px;
            background: var(--red);
            z-index: 200;
            width: 0%;
            transition: none;
        }

        /* ─── RESPONSIVE ─── */
        @media (max-width: 768px) {
            #about {
                grid-template-columns: 1fr;
                padding: 80px 30px;
            }

            #collection-header {
                padding: 80px 30px 40px;
            }

            #collection-track {
                padding: 0 30px;
            }

            .col-item {
                width: 75vw;
            }

            #experience {
                padding: 80px 30px;
            }

            .event-item {
                grid-template-columns: 120px 1fr;
            }

            .event-type {
                display: none;
            }

            #gallery {
                columns: 2;
                padding: 60px 20px;
            }

            #contact {
                padding: 100px 30px;
            }

            footer {
                flex-direction: column;
                gap: 30px;
                padding: 40px 30px;
            }

            nav {
                padding: 20px 30px;
            }

            .hero-side {
                display: none;
            }

            .form-row {
                grid-template-columns: 1fr;
            }
        }


        /* NAV BASE */
        #main-nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            background: #000;
            color: #fff;
            position: sticky;
        }

        .nav-logo {
            font-size: 20px;
            font-weight: bold;
            color: #fff;
            text-decoration: none;
        }

        /* LINKS */
        .nav-links {
            display: flex;
            gap: 20px;
        }

        .nav-links a {
            color: #fff;
            text-decoration: none;
            font-size: 14px;
        }

        /* HAMBURGER */
        .menu-toggle {
            display: none;
            flex-direction: column;
            cursor: pointer;
        }

        .menu-toggle span {
            height: 3px;
            width: 25px;
            background: white;
            margin: 4px 0;
            display: block;
        }

        /* MOBILE */
        @media (max-width: 768px) {
            .menu-toggle {
                display: flex;
            }

            .nav-links {
                position: absolute;
                top: 60px;
                right: 0;
                background: #000;
                width: 100%;
                flex-direction: column;
                align-items: center;
                display: none;
                padding: 20px 0;
            }

            .nav-links.active {
                display: flex;
            }
        }












        .experience-container {
            display: flex;
            gap: 30px;
            align-items: flex-start;
        }

        .event-list {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }




        #gallery-display {
            flex: 1;           
            max-width: 500px;
            position: absolute;
            right: 22%;
        }

        #gallery-display img {
            width: 100%;
            height: auto;
            object-fit: cover;
            transition: opacity 0.3s ease-in-out;
        }