/* ===================================================
   DHIRAJ — Rich Dark Fine Art Exhibition & Studio Space
   dhirajleg.art
   =================================================== */

:root {
    --canvas: #0b0a09;
    --canvas-subtle: #141310;
    --paper: #191714;
    --paper-card: #201e19;
    --ink: #f7f4ed;
    --ink-subtle: #d0c9bc;
    --muted: #9c9486;
    --line: rgba(255, 255, 255, 0.12);
    --line-faint: rgba(255, 255, 255, 0.06);

    /* Artwork-Derived Color Palette */
    --art-ochre: #e67e22;
    --art-ochre-glow: rgba(230, 126, 34, 0.45);
    --art-red: #e74c3c;
    --art-red-glow: rgba(231, 76, 60, 0.45);
    --art-cyan: #1abc9c;
    --art-cyan-glow: rgba(26, 188, 156, 0.45);
    --art-blue: #3498db;
    --art-blue-glow: rgba(52, 152, 219, 0.45);
    --art-green: #2ecc71;
    --art-green-glow: rgba(46, 204, 113, 0.45);

    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --max-width: 1280px;
    --gutter: 40px;
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body.exhibition-space {
    font-family: var(--font-body);
    background: var(--canvas);
    color: var(--ink);
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    position: relative;
    transition: background 1.2s cubic-bezier(0.2, 0, 0.2, 1), color 1.2s cubic-bezier(0.2, 0, 0.2, 1);
}

/* Rich Paper & Canvas Noise Overlay */
.grain-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* ===== GLOBAL MOBILE OVERFLOW FIX ===== */
html {
    overflow-x: hidden;
}
body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Clamp every section so nothing bleeds outside the viewport */
section,
header,
footer,
.nft,
.about,
.collection,
.archive,
.motion,
.commission,
.interlude,
.archival-note {
    overflow-x: hidden;
    max-width: 100vw;
}

/* NFT grid-lines — stop the drifting background from adding scroll width */
.nft__grid-lines {
    overflow: hidden;
    max-width: 100%;
}

@media (max-width: 768px) {
    /* Kill the orb pseudo-elements on mobile — they still bleed even with overflow:hidden on parent */
    .nft::before,
    .nft::after { display: none; }

    /* Contain the nft photo 3D transform — perspective can cause overflow */
    .nft__image { overflow: hidden; }

    /* Cursor elements are desktop-only — ensure they don't affect layout on mobile */
    .cursor-dot,
    .cursor-ring,
    .cursor-aura { display: none !important; }
}

/* Hide native cursor on desktop */
@media (hover: hover) and (pointer: fine) {
    body, a, button, [role="button"], input, textarea, select, label { cursor: none !important; }
}

/* --- Inner dot (snaps exactly to pointer) --- */
.cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffffff;
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%);
    transition: width 0.2s ease, height 0.2s ease, background 0.3s ease, opacity 0.3s ease;
    mix-blend-mode: difference;
    opacity: 0;
}
body.cursor-ready .cursor-dot { opacity: 1; }

/* Dot expands on hover over interactive elements */
body.cursor-hover .cursor-dot {
    width: 16px;
    height: 16px;
}
/* Dot squashes on click */
body.cursor-click .cursor-dot {
    width: 6px;
    height: 6px;
    opacity: 0.6;
}

/* --- Outer ring (lags behind via JS lerp) --- */
.cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid rgba(230, 126, 34, 0.7);
    pointer-events: none;
    z-index: 99998;
    transform: translate(-50%, -50%);
    transition: width 0.35s cubic-bezier(0.2, 0, 0.2, 1),
                height 0.35s cubic-bezier(0.2, 0, 0.2, 1),
                border-color 0.4s ease,
                opacity 0.3s ease;
    opacity: 0;
}
body.cursor-ready .cursor-ring { opacity: 1; }

body.cursor-hover .cursor-ring {
    width: 60px;
    height: 60px;
    border-color: rgba(230, 126, 34, 0.4);
    border-width: 1px;
}
body.cursor-click .cursor-ring {
    width: 28px;
    height: 28px;
    border-color: rgba(230, 126, 34, 1);
}

/* --- Aura glow (large lag blob) --- */
.cursor-aura {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9990;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.5s ease, background 0.8s ease;
    filter: blur(60px);
    mix-blend-mode: screen;
    background: radial-gradient(circle,
        rgba(230, 126, 34, 0.22) 0%,
        rgba(26, 188, 156, 0.12) 55%,
        transparent 80%);
}
body.cursor-ready .cursor-aura { opacity: 1; }

/* Aura color variants per section */
body[data-cursor-zone="collection"] .cursor-aura {
    background: radial-gradient(circle, rgba(26, 188, 156, 0.22) 0%, rgba(52, 152, 219, 0.12) 55%, transparent 80%);
}
body[data-cursor-zone="nft"] .cursor-aura {
    background: radial-gradient(circle, rgba(230, 126, 34, 0.28) 0%, rgba(231, 76, 60, 0.14) 55%, transparent 80%);
}
body[data-cursor-zone="motion"] .cursor-aura {
    background: radial-gradient(circle, rgba(231, 76, 60, 0.22) 0%, rgba(230, 126, 34, 0.1) 55%, transparent 80%);
}
body[data-cursor-zone="commission"] .cursor-aura {
    background: radial-gradient(circle, rgba(46, 204, 113, 0.2) 0%, rgba(26, 188, 156, 0.1) 55%, transparent 80%);
}
body[data-cursor-zone="hero"] .cursor-aura {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, rgba(230, 126, 34, 0.1) 55%, transparent 80%);
}

/* --- Paint trail particles --- */
.cursor-trail {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9991;
    transform: translate(-50%, -50%) scale(1);
    animation: trailFade 0.7s cubic-bezier(0.2, 0, 0.2, 1) forwards;
}
@keyframes trailFade {
    0%   { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0;   transform: translate(-50%, -50%) scale(0.1); }
}

/* --- Click burst ring --- */
.cursor-burst {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9992;
    transform: translate(-50%, -50%) scale(0);
    border: 2px solid var(--art-ochre);
    animation: burstExpand 0.5s cubic-bezier(0.2, 0, 0.2, 1) forwards;
}
@keyframes burstExpand {
    0%   { transform: translate(-50%, -50%) scale(0);  opacity: 0.9; }
    100% { transform: translate(-50%, -50%) scale(2.8); opacity: 0; }
}

/* Legacy aura div (kept in DOM but replaced) */
.paint-cursor { display: none; }

img, video, iframe {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--ink);
    text-decoration: none;
    transition: color 0.3s ease, opacity 0.3s ease;
}

a:hover { opacity: 0.8; }

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.container--skinny {
    max-width: 780px;
}

/* Common Micro Labels & Headlines */
.meta-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--art-ochre);
    display: block;
    margin-bottom: 12px;
}

.caption-mono {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 2px;
    color: var(--muted);
    text-transform: uppercase;
    display: block;
    margin-top: 8px;
}

.section-heading {
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 5.5vw, 3.8rem);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.1;
    letter-spacing: -1px;
}

/* Buttons */
.btn-magnetic {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 32px;
    font-family: var(--font-body);
    font-size: 0.86rem;
    font-weight: 500;
    color: #ffffff;
    background: var(--art-ochre);
    border: 1px solid var(--art-ochre);
    border-radius: 2px;
    transition: all 0.4s cubic-bezier(0.2, 0, 0.2, 1);
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 20px var(--art-ochre-glow);
}

.btn-magnetic svg {
    transition: transform 0.4s cubic-bezier(0.2, 0, 0.2, 1);
}

.btn-magnetic:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--canvas);
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(255, 255, 255, 0.25);
}

.btn-magnetic:hover svg {
    transform: translateX(4px);
}

.btn-editorial {
    display: inline-flex;
    align-items: center;
    padding: 12px 28px;
    font-family: var(--font-body);
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--ink);
    background: var(--paper-card);
    border: 1px solid var(--line);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.btn-editorial:hover {
    background: var(--ink);
    color: var(--canvas);
    opacity: 1;
}

.link-editorial {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--art-ochre);
    border-bottom: 1px solid var(--art-ochre);
    padding-bottom: 2px;
}
.link-editorial:hover {
    border-bottom-color: transparent;
}

/* ===== QUIET FLOATING NAVIGATION ===== */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 48px;
    background: transparent;
    transition: padding 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.nav--scrolled {
    padding: 16px 48px;
    background: rgba(11, 10, 9, 0.92);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}

.nav__logo {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ink);
}
.nav__logo span {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 400;
    color: var(--muted);
    margin-left: 2px;
}

.nav__links {
    display: flex;
    gap: 36px;
    list-style: none;
}

.nav__links a {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
    transition: color 0.3s ease;
}
.nav__links a:hover { color: var(--ink); opacity: 1; }

.nav__toggle {
    display: none;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 1201;
}
.nav__toggle span {
    display: block;
    position: absolute;
    width: 20px;
    height: 1.5px;
    background: var(--ink);
    left: 50%;
    transform: translateX(-50%);
    transition: transform 0.3s ease, top 0.3s ease;
}
.nav__toggle span:nth-child(1) { top: 14px; }
.nav__toggle span:nth-child(2) { top: 22px; }

.nav__toggle.active span:nth-child(1) {
    top: 18px;
    transform: translateX(-50%) rotate(45deg);
}
.nav__toggle.active span:nth-child(2) {
    top: 18px;
    transform: translateX(-50%) rotate(-45deg);
}

.nav__overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999;
}
.nav__overlay.active { display: block; }

/* ===== HERO — 95vh DYNAMIC ARTWORK CANVAS ===== */
.hero {
    position: relative;
    width: 100%;
    height: 95vh;
    min-height: 680px;
    display: flex;
    align-items: flex-end;
    padding: 0 0 48px 0;
    overflow: hidden;
    background: var(--canvas);
}

.hero__canvas-wrap {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

.hero__artwork {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    filter: saturate(1.1) contrast(1.05);
    will-change: transform;
    animation: heroCanvasZoom 24s ease-in-out infinite alternate;
}

@keyframes heroCanvasZoom {
    0% { transform: scale(1.02) translate(0, 0); }
    50% { transform: scale(1.06) translate(-10px, -5px); }
    100% { transform: scale(1.03) translate(8px, -10px); }
}

/* Multi-Color Paint Aura & Floating Fog Background */
.hero__paint-aura {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

.aura-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.65;
    mix-blend-mode: screen;
    animation: colorShift 16s ease-in-out infinite alternate, blobFloat 24s ease-in-out infinite alternate;
}

.aura-blob--ochre {
    width: 650px;
    height: 650px;
    top: -100px;
    left: -100px;
    background: radial-gradient(circle, rgba(230, 126, 34, 0.6) 0%, rgba(231, 76, 60, 0.3) 60%, transparent 100%);
}

.aura-blob--cyan {
    width: 750px;
    height: 750px;
    bottom: -150px;
    right: -100px;
    background: radial-gradient(circle, rgba(26, 188, 156, 0.55) 0%, rgba(52, 152, 219, 0.35) 60%, transparent 100%);
    animation-delay: -5s;
}

.aura-blob--crimson {
    width: 550px;
    height: 550px;
    top: 25%;
    left: 35%;
    background: radial-gradient(circle, rgba(231, 76, 60, 0.5) 0%, rgba(230, 126, 34, 0.25) 60%, transparent 100%);
    animation-delay: -10s;
}

.aura-blob--green {
    width: 600px;
    height: 600px;
    bottom: 20%;
    left: 10%;
    background: radial-gradient(circle, rgba(46, 204, 113, 0.5) 0%, rgba(26, 188, 156, 0.25) 60%, transparent 100%);
    animation-delay: -15s;
}

.aura-mist {
    position: absolute;
    inset: -30%;
    background: radial-gradient(ellipse at center, rgba(11, 10, 9, 0.2) 0%, rgba(18, 17, 14, 0.45) 50%, rgba(11, 10, 9, 0.85) 100%);
    filter: blur(50px);
    opacity: 0.75;
    animation: fogMove 28s ease-in-out infinite alternate;
}

@keyframes colorShift {
    0% { filter: blur(90px) hue-rotate(0deg); opacity: 0.65; }
    33% { filter: blur(100px) hue-rotate(70deg); opacity: 0.75; }
    66% { filter: blur(80px) hue-rotate(150deg); opacity: 0.55; }
    100% { filter: blur(95px) hue-rotate(240deg); opacity: 0.7; }
}

@keyframes blobFloat {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(70px, -50px) scale(1.15); }
    100% { transform: translate(-50px, 60px) scale(0.92); }
}

@keyframes fogMove {
    0% { transform: translate(-4%, -4%) rotate(0deg) scale(1); }
    50% { transform: translate(4%, 3%) rotate(2deg) scale(1.06); }
    100% { transform: translate(-3%, 4%) rotate(-2deg) scale(1.02); }
}

/* Rich Vignette Overlay */
.hero__vignette {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(180deg, 
        rgba(11, 10, 9, 0.75) 0%, 
        rgba(11, 10, 9, 0.2) 30%, 
        rgba(11, 10, 9, 0.25) 65%, 
        rgba(11, 10, 9, 0.95) 100%);
    pointer-events: none;
}

.hero__container {
    position: relative;
    z-index: 4;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.hero__header-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.hero__eyebrow {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 3.5px;
    color: var(--art-ochre);
    font-weight: 500;
}

.hero__location {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 2px;
    color: var(--muted);
}

.hero__title {
    font-family: var(--font-heading);
    font-size: clamp(4.8rem, 14vw, 10.5rem);
    font-weight: 900;
    line-height: 0.85;
    letter-spacing: -3px;
    color: #ffffff;
    margin: 8px 0 24px -6px;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.9);
}

.hero__footer-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

/* Hero action button group */
.hero__action {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

/* Hero waitlist button — ghost white outline */
.btn-hero-waitlist {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    font-family: var(--font-body);
    font-size: 0.86rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: #ffffff;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.45);
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.2,0,0.2,1);
    position: relative;
    overflow: hidden;
}
.btn-hero-waitlist::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.08);
    transform: translateX(-100%);
    transition: transform 0.4s ease;
}
.btn-hero-waitlist:hover::before { transform: translateX(0); }
.btn-hero-waitlist:hover {
    border-color: rgba(255,255,255,0.9);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255,255,255,0.12);
}

.hero__tagline {
    font-family: var(--font-heading);
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    font-style: italic;
    color: var(--ink-subtle);
    max-width: 480px;
    line-height: 1.4;
}

/* ===== DYNAMIC ROOM THEME TRANSITIONS ===== */
.section-room {
    position: relative;
    transition: background 1s ease;
}

/* ===== ABOUT — CATALOGUE EXHIBITION ROOM ===== */
.about {
    padding: 140px 0;
    border-bottom: 1px solid var(--line);
    background: var(--canvas-subtle);
}

.about__composition {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 72px;
    align-items: start;
}

.about__img-container {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.about__portrait {
    width: 100%;
    height: auto;
    display: block;
    filter: saturate(1.05) contrast(1.05);
    transition: transform 0.8s cubic-bezier(0.2, 0, 0.2, 1);
}

.about__img-container:hover .about__portrait {
    transform: scale(1.02);
}

.about__headline {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 24px;
    line-height: 1.15;
}
.about__headline span {
    display: block;
    font-size: 1.1rem;
    font-weight: 400;
    font-style: italic;
    color: var(--muted);
    margin-top: 4px;
}

.about__prose p {
    font-size: 0.98rem;
    color: var(--ink-subtle);
    margin-bottom: 18px;
    line-height: 1.8;
}

.about__metadata {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.meta-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--line-faint);
}

.meta-key {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 2px;
    color: var(--muted);
}

.meta-val {
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--ink);
}

/* ===== MANIFESTO INTERLUDE ===== */
.interlude {
    padding: 120px 0;
    border-bottom: 1px solid var(--line-faint);
    background: var(--canvas);
}

.interlude__quote {
    font-family: var(--font-heading);
    font-size: clamp(1.35rem, 2.8vw, 1.85rem);
    font-style: italic;
    line-height: 1.6;
    color: var(--ink);
    text-align: center;
}

/* ===== THE COLLECTION — CURATED ASYMMETRICAL GALLERY ===== */
.collection {
    padding: 140px 0;
    border-bottom: 1px solid var(--line);
    background: var(--canvas);
}

.collection__header {
    margin-bottom: 48px;
}

.collection__meta-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.collection__count-badge {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 2px;
    color: var(--art-ochre);
    background: rgba(230, 126, 34, 0.12);
    padding: 4px 12px;
    border-radius: 2px;
    border: 1px solid rgba(230, 126, 34, 0.3);
}

.collection__lead {
    font-size: 0.98rem;
    color: var(--muted);
    margin-top: 10px;
}

.collection__filters {
    display: flex;
    gap: 12px;
    margin-bottom: 64px;
    flex-wrap: wrap;
    background: rgba(25, 23, 20, 0.6);
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 2px;
}

.filter-btn {
    padding: 9px 20px;
    border: 1px solid var(--line);
    background: var(--paper-card);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 1px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.filter-btn span {
    font-size: 0.65rem;
    opacity: 0.75;
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 6px;
    border-radius: 2px;
}

.filter-btn:hover,
.filter-btn.active {
    border-color: var(--art-ochre);
    color: #ffffff;
    background: var(--art-ochre);
}

.filter-btn:hover span,
.filter-btn.active span {
    background: rgba(255, 255, 255, 0.25);
    opacity: 1;
}

/* Asymmetrical Masonry Grid */
.collection__composition {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 48px 36px;
    align-items: start;
}

.art-piece {
    position: relative;
}

.art-piece__frame {
    position: relative;
    overflow: hidden;
    background: var(--paper-card);
    border: 1px solid var(--line);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
    border-radius: 2px;
}

.art-piece__corner-accent {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 4;
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--art-ochre);
    border-right: 2px solid var(--art-ochre);
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.art-piece:hover .art-piece__corner-accent {
    opacity: 1;
}

.art-piece__frame img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.8s cubic-bezier(0.2, 0, 0.2, 1);
}

.art-piece__overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(180deg, transparent 40%, rgba(11, 10, 9, 0.82) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    display: flex;
    align-items: flex-end;
    padding: 20px;
}

.art-piece:hover .art-piece__overlay {
    opacity: 1;
}

.art-piece__zoom-icon {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 2px;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.7);
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    border-radius: 1px;
}

.art-piece__glow {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 2;
}

/* Dynamic Artwork Accent Glow on Hover */
.art-piece[data-color="ochre"]:hover .art-piece__glow {
    opacity: 1;
    box-shadow: inset 0 0 40px var(--art-ochre-glow);
}
.art-piece[data-color="cyan"]:hover .art-piece__glow {
    opacity: 1;
    box-shadow: inset 0 0 40px var(--art-cyan-glow);
}
.art-piece[data-color="red"]:hover .art-piece__glow {
    opacity: 1;
    box-shadow: inset 0 0 40px var(--art-red-glow);
}
.art-piece[data-color="green"]:hover .art-piece__glow {
    opacity: 1;
    box-shadow: inset 0 0 40px var(--art-green-glow);
}
.art-piece[data-color="blue"]:hover .art-piece__glow {
    opacity: 1;
    box-shadow: inset 0 0 40px var(--art-blue-glow);
}

.art-piece:hover .art-piece__frame img {
    transform: scale(1.04);
}

.art-piece__caption {
    margin-top: 14px;
}

.art-piece__no {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 2px;
    color: var(--art-ochre);
    display: block;
}

.art-piece__title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ink);
    margin: 2px 0;
}

.art-piece__meta {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--muted);
}

/* Grid Sizing Spans for Asymmetry */
.art-piece--hero { grid-column: span 7; }
.art-piece--medium { grid-column: span 5; }
.art-piece--tall { grid-column: span 4; }
.art-piece--wide { grid-column: span 8; }
.art-piece.hidden { display: none; }

/* ===== LIGHTBOX MODAL ===== */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(11, 10, 9, 0.96);
    align-items: center;
    justify-content: center;
    padding: 60px;
}
.lightbox.active { display: flex; }

.lightbox__img {
    max-width: 88vw;
    max-height: 84vh;
    object-fit: contain;
    border: 1px solid var(--line);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}

.lightbox__close {
    position: absolute;
    top: 24px;
    right: 36px;
    font-size: 2.4rem;
    color: var(--ink);
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
}

.lightbox__prev,
.lightbox__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    color: var(--ink);
    background: var(--paper-card);
    border: 1px solid var(--line);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
}
.lightbox__prev { left: 36px; }
.lightbox__next { right: 36px; }
.lightbox__prev:hover,
.lightbox__next:hover {
    background: var(--art-ochre);
    border-color: var(--art-ochre);
    color: #ffffff;
}

/* ===== ARCHIVAL NOTE ===== */
.archival-note {
    padding: 100px 0;
    border-bottom: 1px solid var(--line);
    background: var(--canvas-subtle);
}

.archival-card {
    border: 1px solid var(--line);
    padding: 44px 48px;
    background: var(--paper-card);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.archival-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.meta-mono {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 1.5px;
    color: var(--muted);
}

.archival-card__quote {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-style: italic;
    color: var(--ink);
    line-height: 1.75;
    margin-bottom: 32px;
}

.archival-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* ===== ARCHIVE — MUSEUM TIMELINE ===== */
.archive {
    padding: 140px 0;
    border-bottom: 1px solid var(--line);
    background: var(--canvas);
}

.archive__header {
    margin-bottom: 64px;
}

.archive__lead {
    font-size: 1rem;
    color: var(--muted);
    margin-top: 10px;
    font-style: italic;
    font-family: var(--font-heading);
}

/* ===== TIMELINE ===== */
.timeline-list {
    max-width: 720px;
    margin: 56px auto 0;
    position: relative;
    padding-left: 40px;
}

/* Vertical spine */
.timeline-list::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--line) 8%, var(--line) 92%, transparent);
}

.timeline-row {
    position: relative;
    margin-bottom: 52px;
    display: flex;
    gap: 28px;
    align-items: flex-start;
}
.timeline-row:last-child { margin-bottom: 0; }

/* Dot + marker column */
.timeline-row__marker {
    position: absolute;
    left: -40px;
    top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
}

.timeline-row__dot {
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--art-ochre);
    border: 2px solid var(--canvas);
    box-shadow: 0 0 0 1px var(--art-ochre);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    flex-shrink: 0;
}

.timeline-row:hover .timeline-row__dot {
    box-shadow: 0 0 0 4px var(--art-ochre-glow);
    transform: scale(1.2);
}

/* Live / "Now" pulsing dot */
.timeline-row__dot--live {
    background: var(--art-green, #2ecc71);
    box-shadow: 0 0 0 1px var(--art-green, #2ecc71);
    animation: dotLivePulse 2s ease-in-out infinite;
}
@keyframes dotLivePulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(46,204,113,0.8), 0 0 0 5px rgba(46,204,113,0); }
    50%       { box-shadow: 0 0 0 1px rgba(46,204,113,0.8), 0 0 0 8px rgba(46,204,113,0.2); }
}

/* Content area */
.timeline-row__content {
    flex: 1;
    padding-bottom: 4px;
    transition: transform 0.3s ease;
}
.timeline-row:hover .timeline-row__content {
    transform: translateX(4px);
}

.timeline-row__label {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--art-ochre);
    margin-bottom: 6px;
}

.timeline-row__title {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 10px;
    line-height: 1.4;
}

.timeline-row__desc {
    font-size: 0.96rem;
    color: var(--ink-subtle);
    line-height: 1.8;
    max-width: 560px;
}

/* Childhood photos inside row 1 — side by side */
.timeline-row__photos {
    display: flex;
    gap: 16px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.timeline-row__photo {
    position: relative;
    flex: 1;
    min-width: 120px;
    max-width: 200px;
}
.timeline-row__photo img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--line);
    border-radius: 2px;
    filter: sepia(0.15) contrast(1.05);
    transition: filter 0.5s ease, transform 0.5s cubic-bezier(0.2, 0, 0.2, 1);
    box-shadow: 0 10px 32px rgba(0,0,0,0.5);
}
.timeline-row__photo:hover img {
    filter: sepia(0) contrast(1.08);
    transform: scale(1.02);
}
.timeline-row__photo-caption {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 1.5px;
    color: var(--muted);
    margin-top: 8px;
    text-transform: uppercase;
}

/* ===== MOTION — FILM SCREENING ===== */
.motion {
    padding: 140px 0;
    border-bottom: 1px solid var(--line);
    background: var(--canvas-subtle);
}

.motion__header {
    margin-bottom: 56px;
}

.motion__primary {
    margin-bottom: 64px;
}

.motion__video-wrap {
    width: 100%;
    background: #000;
    border: 1px solid var(--line);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.motion__video-wrap video {
    width: 100%;
    height: auto;
    max-height: 600px;
    display: block;
}

.motion__primary-info {
    margin-top: 16px;
}

.motion__primary-title {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ink);
    margin: 4px 0 6px;
}

.motion__primary-desc {
    font-size: 0.94rem;
    color: var(--muted);
    max-width: 580px;
}

.motion__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.motion__card-video {
    width: 100%;
    background: #000;
    border: 1px solid var(--line);
    overflow: hidden;
}

.motion__card-video video {
    width: 100%;
    height: auto;
    display: block;
}

.motion__card-caption {
    margin-top: 12px;
}

.motion__card-caption h4 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 2px 0;
}

.motion__card-caption p {
    font-size: 0.86rem;
    color: var(--muted);
    line-height: 1.6;
}

/* ===== COMMISSION — REQUEST A WORK ===== */
.commission {
    padding: 140px 0;
    border-bottom: 1px solid var(--line);
    background: var(--canvas);
}

.commission__header {
    margin-bottom: 48px;
    text-align: center;
}

.commission__lead {
    font-size: 1rem;
    color: var(--muted);
    margin-top: 12px;
    line-height: 1.7;
}

.commission__form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group--full {
    grid-column: span 2;
}

.form-label {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--art-ochre);
    margin-bottom: 10px;
}

.form-input,
.form-select,
.form-textarea {
    font-family: var(--font-body);
    font-size: 0.96rem;
    padding: 14px 0;
    border: none;
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.25);
    background: transparent;
    color: var(--ink);
    border-radius: 0;
    outline: none;
    transition: border-color 0.3s ease;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-bottom-color: var(--art-ochre);
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

.form-action {
    grid-column: span 2;
    margin-top: 16px;
    text-align: center;
}

.btn-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 48px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: var(--art-ochre);
    color: #ffffff;
    border: 1px solid var(--art-ochre);
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 1px;
    box-shadow: 0 6px 20px var(--art-ochre-glow);
}

.btn-submit:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--canvas);
}

.request__success {
    text-align: center;
    padding: 48px 0;
}

.request__success h3 {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    margin-bottom: 12px;
}

.request__success p {
    color: var(--muted);
    margin-bottom: 24px;
}

.request__error {
    text-align: center;
    color: var(--art-red);
    margin-top: 16px;
    font-size: 0.88rem;
}

/* ===== FOOTER ===== */
.footer {
    padding: 80px 0 48px;
    background: var(--canvas-subtle);
}

.footer__content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 48px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 28px;
}

.footer__title {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    display: block;
}

.footer__tag {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--muted);
    margin-top: 4px;
}

.footer__nav {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}

.footer__nav a {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
}

.footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.footer__copy {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--muted);
}

.footer__ca-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
}

.ca-tag {
    font-weight: 600;
    color: var(--art-ochre);
}

.footer__ca-bar code {
    color: var(--muted);
    word-break: break-all;
    overflow-wrap: anywhere;
}

.footer__ca-bar button {
    background: transparent;
    border: 1px solid var(--line);
    padding: 3px 8px;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--ink);
    cursor: pointer;
    transition: all 0.2s ease;
}
.footer__ca-bar button:hover {
    border-color: var(--art-ochre);
    color: var(--art-ochre);
}

/* ===== REVEAL ANIMATIONS ===== */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s cubic-bezier(0.2, 0, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0, 0.2, 1);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Reduced Motion Safety */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
    .paint-cursor { display: none !important; }
    .cursor-dot, .cursor-ring, .cursor-aura { display: none !important; }
}

/* ===== RESPONSIVE MEDIA QUERIES ===== */
@media (max-width: 1024px) {
    .hero { height: 85vh; }
    .about__composition { grid-template-columns: 1fr; gap: 48px; }
    .art-piece--hero { grid-column: span 12; }
    .art-piece--medium { grid-column: span 6; }
    .art-piece--tall { grid-column: span 6; }
    .art-piece--wide { grid-column: span 12; }
    .motion__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    :root { --gutter: 24px; }

    .nav { padding: 18px 24px; }
    .nav__links {
        position: fixed;
        top: 0;
        right: 0;
        width: 280px;
        height: 100vh;
        height: 100dvh;
        background: var(--canvas);
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 80px 36px 40px;
        gap: 0;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        border-left: 1px solid var(--line);
        z-index: 1200;
    }
    .nav__links.active { transform: translateX(0); }
    .nav__links li {
        width: 100%;
        border-bottom: 1px solid var(--line);
    }
    .nav__links a {
        display: block;
        padding: 16px 0;
        font-size: 0.9rem;
        color: var(--ink);
    }
    .nav__toggle { display: block; }

    .hero {
        height: 100svh;
        min-height: 600px;
        padding: 100px 0 44px;
    }
    .hero__artwork {
        object-position: center center;
        animation: none; /* stop zoom jitter on mobile */
        transform: none;
    }
    /* Stronger vignette on mobile so text pops over any image */
    .hero__vignette {
        background: linear-gradient(180deg,
            rgba(11,10,9,0.72) 0%,
            rgba(11,10,9,0.15) 25%,
            rgba(11,10,9,0.2)  60%,
            rgba(11,10,9,0.92) 100%);
    }
    /* Shrink aura blobs — they cause overflow blur on small screens */
    .aura-blob { display: none; }
    .hero__header-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .hero__eyebrow {
        font-size: 0.62rem;
        letter-spacing: 2.5px;
    }
    .hero__title {
        font-size: clamp(3.6rem, 17vw, 6rem);
        margin: 10px 0 18px 0;
        letter-spacing: -2px;
    }
    .hero__footer-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }
    .hero__tagline {
        font-size: 1rem;
    }
    .btn-magnetic {
        padding: 13px 26px;
        font-size: 0.84rem;
    }

    .interlude { padding: 80px 0; }
    .about { padding: 80px 0; }
    .collection { padding: 80px 0; }
    .collection__composition { grid-template-columns: 1fr; }
    .art-piece--hero,
    .art-piece--medium,
    .art-piece--tall,
    .art-piece--wide { grid-column: span 1; }

    .archival-card { padding: 28px 24px; }
    .archival-card__head { flex-direction: column; align-items: flex-start; gap: 6px; }

    .archive { padding: 80px 0; }
    .timeline-list { padding-left: 28px; }
    .timeline-list::before { left: 5px; }
    .timeline-row__marker { left: -28px; }
    .timeline-row__photos { flex-direction: column; }
    .timeline-row__photo { max-width: 100%; }

    .motion { padding: 80px 0; }
    .motion__grid { grid-template-columns: 1fr; }

    .commission { padding: 80px 0; }
    .commission__form { grid-template-columns: 1fr; }
    .form-group--full { grid-column: span 1; }
    .form-action { grid-column: span 1; }

    .footer__content {
        flex-direction: column;
        gap: 24px;
    }
    .footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
}


/* ===================================================================
   NFT SECTION — Cinematic Entrance + Living Ambient Animations
   =================================================================== */

/* ---------- Section Shell ---------- */
.nft {
    padding: 160px 0;
    background: var(--canvas);
    border-bottom: 1px solid var(--line);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Ambient background orbs */
.nft::before,
.nft::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(110px);
    pointer-events: none;
    z-index: 0;
}
.nft::before {
    width: 700px;
    height: 700px;
    top: -180px;
    left: -200px;
    background: radial-gradient(circle, rgba(230, 126, 34, 0.22) 0%, rgba(231, 76, 60, 0.12) 55%, transparent 100%);
    animation: nftOrbLeft 18s ease-in-out infinite alternate;
}
.nft::after {
    width: 600px;
    height: 600px;
    bottom: -160px;
    right: -160px;
    background: radial-gradient(circle, rgba(26, 188, 156, 0.2) 0%, rgba(52, 152, 219, 0.1) 55%, transparent 100%);
    animation: nftOrbRight 22s ease-in-out infinite alternate;
}

@keyframes nftOrbLeft {
    0%   { transform: translate(0, 0) scale(1); opacity: 0.8; }
    50%  { transform: translate(60px, 40px) scale(1.12); opacity: 1; }
    100% { transform: translate(-40px, 60px) scale(0.95); opacity: 0.7; }
}
@keyframes nftOrbRight {
    0%   { transform: translate(0, 0) scale(1); opacity: 0.7; }
    50%  { transform: translate(-50px, -30px) scale(1.1); opacity: 1; }
    100% { transform: translate(40px, 50px) scale(0.9); opacity: 0.75; }
}

/* Subtle animated grid lines */
.nft__grid-lines {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 80px 80px;
    animation: nftGridDrift 30s linear infinite;
    mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 75%);
}
@keyframes nftGridDrift {
    from { background-position: 0 0; }
    to   { background-position: 80px 80px; }
}

/* ---------- Layout ---------- */
.nft__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 88px;
    align-items: center;
}

/* ---------- Image Side ---------- */
.nft__image {
    position: relative;
}

/* Floating frame glow ring */
.nft__image::before {
    content: '';
    position: absolute;
    inset: -18px;
    border-radius: 4px;
    background: conic-gradient(
        from 0deg,
        var(--art-ochre) 0%,
        var(--art-cyan) 25%,
        var(--art-red) 50%,
        var(--art-blue) 75%,
        var(--art-ochre) 100%
    );
    opacity: 0;
    filter: blur(24px);
    transition: opacity 0.6s ease;
    z-index: -1;
    animation: nftRingPulse 4s ease-in-out infinite;
}
.nft__image:hover::before {
    opacity: 0.75;
}
@keyframes nftRingPulse {
    0%, 100% { filter: blur(24px); opacity: 0; }
    50%       { filter: blur(18px); opacity: 0.35; }
}

.nft__photo {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow:
        0 20px 60px rgba(0,0,0,0.7),
        0 0 0 1px rgba(230,126,34,0.15);
    border-radius: 3px;
    transform: perspective(900px) rotateY(-4deg) rotateX(2deg);
    transition: transform 0.8s cubic-bezier(0.2, 0, 0.2, 1), box-shadow 0.8s ease;
    animation: nftPhotoFloat 8s ease-in-out infinite alternate;
}
.nft__photo:hover {
    transform: perspective(900px) rotateY(0deg) rotateX(0deg) scale(1.02);
    box-shadow:
        0 28px 80px rgba(0,0,0,0.8),
        0 0 0 1px rgba(230,126,34,0.45),
        0 0 60px rgba(230,126,34,0.2);
}
@keyframes nftPhotoFloat {
    0%   { transform: perspective(900px) rotateY(-4deg) rotateX(2deg) translateY(0); }
    50%  { transform: perspective(900px) rotateY(-3deg) rotateX(1deg) translateY(-10px); }
    100% { transform: perspective(900px) rotateY(-5deg) rotateX(3deg) translateY(-6px); }
}

.nft__photo img {
    width: 100%;
    height: auto;
    display: block;
    filter: saturate(1.1) contrast(1.05);
    transition: transform 0.8s cubic-bezier(0.2, 0, 0.2, 1), filter 0.6s ease;
}
.nft__photo:hover img {
    transform: scale(1.06);
    filter: saturate(1.2) contrast(1.08);
}

/* Scan-line shimmer overlay */
.nft__photo::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        135deg,
        transparent 40%,
        rgba(255,255,255,0.06) 50%,
        transparent 60%
    );
    background-size: 200% 200%;
    animation: nftShimmer 5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes nftShimmer {
    0%   { background-position: 200% 200%; opacity: 0; }
    30%  { opacity: 1; }
    70%  { opacity: 1; }
    100% { background-position: -200% -200%; opacity: 0; }
}

/* Corner accents */
.nft__photo::after {
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 18px;
    height: 18px;
    border-top: 2px solid var(--art-ochre);
    border-right: 2px solid var(--art-ochre);
    z-index: 3;
    opacity: 0.7;
    transition: opacity 0.3s ease, width 0.3s ease, height 0.3s ease;
}
.nft__photo:hover::after {
    opacity: 1;
    width: 26px;
    height: 26px;
}

.nft__photo-tag {
    position: absolute;
    bottom: 14px;
    left: 14px;
    z-index: 4;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    background: rgba(11,10,9,0.72);
    padding: 5px 12px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 1px;
}

/* ---------- Content Side ---------- */
.nft__content {
    position: relative;
}

.nft__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: var(--art-ochre);
    margin-bottom: 20px;
}
/* Blinking dot before eyebrow */
.nft__eyebrow::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--art-ochre);
    animation: nftDotBlink 1.8s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes nftDotBlink {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 var(--art-ochre-glow); }
    50%       { opacity: 0.4; transform: scale(0.7); box-shadow: 0 0 0 6px transparent; }
}

/* Big heading with the animated "T" */
.nft__sign {
    font-family: var(--font-heading);
    font-size: clamp(4rem, 8vw, 6.5rem);
    font-weight: 900;
    letter-spacing: -4px;
    line-height: 0.9;
    color: var(--ink);
    margin-bottom: 28px;
    position: relative;
}
.nft__sign span {
    display: inline-block;
    color: var(--art-ochre);
    text-shadow:
        0 0 30px var(--art-ochre-glow),
        0 0 60px rgba(230,126,34,0.25);
    animation: nftLetterGlow 3s ease-in-out infinite alternate;
    transform-origin: bottom center;
}
@keyframes nftLetterGlow {
    0%   { text-shadow: 0 0 20px var(--art-ochre-glow), 0 0 50px rgba(230,126,34,0.2); transform: skewX(0deg) scale(1); }
    50%  { text-shadow: 0 0 40px var(--art-ochre-glow), 0 0 90px rgba(230,126,34,0.4), 0 0 120px rgba(230,126,34,0.15); transform: skewX(-1deg) scale(1.03); }
    100% { text-shadow: 0 0 25px var(--art-ochre-glow), 0 0 60px rgba(230,126,34,0.3); transform: skewX(0deg) scale(1); }
}

.nft__lead {
    font-size: 1rem;
    color: var(--ink-subtle);
    line-height: 1.85;
    margin-bottom: 40px;
    max-width: 520px;
}

/* ---------- Stats ---------- */
/* 3-stat grid */
.nft__meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    margin-bottom: 32px;
    border-radius: 2px;
    overflow: hidden;
}

.nft__stat {
    background: var(--paper-card);
    padding: 22px 18px;
    text-align: center;
    position: relative;
    transition: background 0.35s ease, transform 0.35s ease;
    overflow: hidden;
}
.nft__stat::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(230,126,34,0.08) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.35s ease;
}
.nft__stat:hover {
    background: rgba(230,126,34,0.08);
    transform: translateY(-3px);
}
.nft__stat:hover::before {
    opacity: 1;
}

.nft__stat strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--ink);
    line-height: 1;
    margin-bottom: 6px;
    transition: color 0.35s ease;
}
.nft__stat:hover strong {
    color: var(--art-ochre);
}
.nft__stat span {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.63rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
    line-height: 1.4;
}

/* Animated counter number entrance */
.nft__stat strong {
    animation: nftCountUp 0.6s cubic-bezier(0.2, 0, 0.2, 1) both;
}
@keyframes nftCountUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Note ---------- */
.nft__note {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.5px;
    color: var(--muted);
    line-height: 1.75;
    padding: 16px 20px;
    border-left: 2px solid var(--art-ochre);
    background: rgba(230,126,34,0.05);
    margin-bottom: 36px;
    border-radius: 0 2px 2px 0;
    position: relative;
    overflow: hidden;
}
/* Animated left-border sweep */
.nft__note::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background: var(--art-ochre);
    animation: nftBorderSweep 2.4s ease-in-out infinite;
    opacity: 0.6;
}
@keyframes nftBorderSweep {
    0%, 100% { transform: scaleY(1); transform-origin: top; }
    50%       { transform: scaleY(0.5); transform-origin: bottom; }
}

/* ---------- Buttons ---------- */
.nft__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.btn--dark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #ffffff;
    background: var(--art-ochre);
    border: 1px solid var(--art-ochre);
    border-radius: 2px;
    transition: all 0.4s cubic-bezier(0.2, 0, 0.2, 1);
    box-shadow: 0 6px 24px var(--art-ochre-glow);
    position: relative;
    overflow: hidden;
}
.btn--dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}
.btn--dark:hover::before {
    transform: translateX(100%);
}
.btn--dark:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--canvas);
    opacity: 1;
    transform: translateY(-3px);
    box-shadow: 0 12px 36px rgba(255,255,255,0.2);
}

.btn--outline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 2px;
    transition: all 0.4s cubic-bezier(0.2, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.btn--outline::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--art-ochre);
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.2, 0, 0.2, 1);
    z-index: -1;
}
.btn--outline:hover::before {
    transform: translateX(0);
}
.btn--outline:hover {
    border-color: var(--art-ochre);
    color: #ffffff;
    opacity: 1;
    transform: translateY(-3px);
    box-shadow: 0 8px 28px var(--art-ochre-glow);
}

/* ---------- Entrance reveal stagger ---------- */
/* Image comes from the left, content from the right */
.nft__image.reveal {
    transform: translateX(-48px) translateY(0);
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.2, 0, 0.2, 1), transform 1s cubic-bezier(0.2, 0, 0.2, 1);
}
.nft__image.reveal.visible {
    transform: translateX(0);
    opacity: 1;
}
.nft__content.reveal {
    transform: translateX(48px) translateY(0);
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.2, 0, 0.2, 1) 0.2s, transform 1s cubic-bezier(0.2, 0, 0.2, 1) 0.2s;
}
.nft__content.reveal.visible {
    transform: translateX(0);
    opacity: 1;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .nft {
        padding: 120px 0;
    }
    .nft__grid {
        grid-template-columns: 1fr;
        gap: 56px;
    }
    .nft__photo {
        transform: none;
        animation: none;
    }
    .nft__image.reveal {
        transform: translateY(32px);
    }
    .nft__content.reveal {
        transform: translateY(32px);
    }
    .nft__image.reveal.visible,
    .nft__content.reveal.visible {
        transform: translateY(0);
    }
}
@media (max-width: 768px) {
    .nft {
        padding: 80px 0;
    }
    .nft__grid {
        gap: 44px;
    }
    .nft__sign {
        font-size: clamp(3.5rem, 16vw, 5rem);
        letter-spacing: -2px;
    }
    .nft__meta {
        grid-template-columns: repeat(2, 1fr);
    }
    .nft__meta .nft__stat:last-child {
        grid-column: span 2;
    }
    .nft__actions {
        flex-direction: column;
        align-items: stretch;
    }
    .btn--dark,
    .btn--outline {
        text-align: center;
        justify-content: center;
    }
}

/* ===================================================================
   TVA STAT — NFT section
   =================================================================== */
.nft__stat--tva {
    position: relative;
    overflow: hidden;
}
.nft__tva-logo {
    font-family: var(--font-heading) !important;
    font-size: 2rem !important;
    font-weight: 900 !important;
    letter-spacing: -1px;
    background: linear-gradient(135deg, var(--art-ochre) 0%, #fff 55%, var(--art-ochre) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: tvaShine 3s linear infinite;
    display: block !important;
}
@keyframes tvaShine {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}

/* Join Waitlist button */
.btn--waitlist {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--canvas);
    background: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.2, 0, 0.2, 1);
    box-shadow: 0 6px 24px rgba(255,255,255,0.18);
    position: relative;
    overflow: hidden;
}
.btn--waitlist::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(230,126,34,0.3) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}
.btn--waitlist:hover::before { transform: translateX(100%); }
.btn--waitlist:hover {
    background: var(--art-ochre);
    border-color: var(--art-ochre);
    color: #ffffff;
    opacity: 1;
    transform: translateY(-3px);
    box-shadow: 0 10px 32px var(--art-ochre-glow);
}

/* ===================================================================
   WAITLIST MODAL
   =================================================================== */

/* Overlay backdrop */
.wl-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99000;
    background: rgba(6, 5, 4, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.wl-overlay.active {
    display: flex;
    animation: wlFadeIn 0.3s ease forwards;
}
@keyframes wlFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Modal box */
.wl-modal {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 4px;
    width: 100%;
    max-width: 520px;
    max-height: 88vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
    box-shadow:
        0 24px 80px rgba(0,0,0,0.7),
        0 0 0 1px rgba(230,126,34,0.12),
        inset 0 1px 0 rgba(255,255,255,0.04);
    animation: wlSlideUp 0.35s cubic-bezier(0.2,0,0.2,1) forwards;
}
@keyframes wlSlideUp {
    from { transform: translateY(28px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* Close button */
.wl-modal__close {
    position: absolute;
    top: 14px;
    right: 18px;
    background: none;
    border: none;
    color: var(--muted);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease;
    padding: 4px;
    z-index: 10;
}
.wl-modal__close:hover { color: var(--ink); }

/* Step visibility */
.wl-step {
    display: flex;
    flex-direction: column;
    padding: 44px 40px 36px;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 88vh;
    /* hide scrollbar cross-browser */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.wl-step::-webkit-scrollbar { display: none; }
.wl-step--hidden { display: none !important; }

/* Typography */
.wl-modal__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--art-ochre);
    margin-bottom: 12px;
}
.wl-modal__eyebrow::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--art-ochre);
    animation: nftDotBlink 1.8s ease-in-out infinite;
}
.wl-modal__title {
    font-family: var(--font-heading);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.15;
    margin-bottom: 10px;
}
.wl-modal__lead {
    font-size: 0.9rem;
    color: var(--ink-subtle);
    line-height: 1.65;
    margin-bottom: 20px;
}
.wl-modal__hint {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--muted);
    letter-spacing: 0.5px;
    line-height: 1.55;
    margin: 10px 0 8px;
}

/* Task list */
.wl-tasks {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}
.wl-task {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    background: var(--paper-card);
    border: 1px solid var(--line);
    border-radius: 3px;
    transition: border-color 0.3s ease, background 0.3s ease;
}
.wl-task__icon {
    color: var(--art-ochre);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.wl-task__body {
    flex: 1;
}
.wl-task__body strong {
    display: block;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 2px;
}
.wl-task__body span {
    font-size: 0.78rem;
    color: var(--muted);
    font-family: var(--font-mono);
    letter-spacing: 0.3px;
}
/* Checkmark circle */
.wl-task__check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 0.7rem;
    color: #ffffff;
}
.wl-task.done {
    border-color: rgba(46,204,113,0.5);
    background: rgba(46,204,113,0.05);
}
.wl-task.done .wl-task__check {
    background: var(--art-green, #2ecc71);
    border-color: var(--art-green, #2ecc71);
}
.wl-task.done .wl-task__check::after {
    content: '✓';
}

/* Tweet button */
.wl-btn--tweet {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: center;
    padding: 13px 24px;
    background: #000;
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    margin-bottom: 4px;
}
.wl-btn--tweet:hover {
    background: #1a1a1a;
    border-color: rgba(255,255,255,0.3);
    opacity: 1;
    transform: translateY(-2px);
}

/* Next / Submit / Done buttons */
.wl-btn--next,
.wl-btn--submit {
    display: block;
    width: 100%;
    padding: 14px 24px;
    background: var(--art-ochre);
    color: #ffffff;
    border: 1px solid var(--art-ochre);
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px var(--art-ochre-glow);
    margin-top: 8px;
}
.wl-btn--next:hover,
.wl-btn--submit:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--canvas);
    box-shadow: 0 8px 28px rgba(255,255,255,0.2);
    transform: translateY(-2px);
}
.wl-btn--submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Back link */
.wl-back {
    display: block;
    text-align: center;
    margin-top: 14px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 1px;
    color: var(--muted);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s ease;
}
.wl-back:hover { color: var(--ink); }

/* Wallet form */
.wl-form__group {
    margin-bottom: 20px;
}
.wl-form__label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--art-ochre);
    margin-bottom: 10px;
}
.wl-form__input {
    width: 100%;
    font-family: var(--font-mono);
    font-size: 0.86rem;
    padding: 13px 0;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid rgba(255,255,255,0.2);
    color: var(--ink);
    outline: none;
    transition: border-color 0.3s ease;
    letter-spacing: 0.5px;
}
.wl-form__input:focus { border-bottom-color: var(--art-ochre); }
.wl-form__input::placeholder { color: var(--muted); }
.wl-form__note {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--muted);
    letter-spacing: 0.3px;
    line-height: 1.6;
    margin-bottom: 4px;
}
.wl-form__error {
    margin-top: 12px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--art-red);
    line-height: 1.5;
    letter-spacing: 0.3px;
    text-align: center;
}

/* Success / Limit screens */
.wl-success {
    text-align: center;
    padding: 16px 0 8px;
}
.wl-success__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(46,204,113,0.12);
    border: 1.5px solid rgba(46,204,113,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #2ecc71;
    margin: 0 auto 24px;
    animation: successPop 0.4s cubic-bezier(0.2,0,0.2,1) both;
}
.wl-success__icon--limit {
    background: rgba(231,76,60,0.1);
    border-color: rgba(231,76,60,0.4);
    color: var(--art-red);
}
@keyframes successPop {
    0%   { transform: scale(0.6); opacity: 0; }
    70%  { transform: scale(1.1); }
    100% { transform: scale(1);   opacity: 1; }
}
.wl-success .wl-modal__lead a {
    color: var(--art-ochre);
    border-bottom: 1px solid var(--art-ochre);
    padding-bottom: 1px;
}

/* Responsive */
@media (max-width: 600px) {
    .wl-overlay {
        align-items: flex-end;
        padding: 0;
    }
    .wl-modal {
        width: 100%;
        max-width: 100%;
        max-height: 92vh;
        border-radius: 10px 10px 0 0;
    }
    .wl-step {
        padding: 32px 22px 28px;
        max-height: 92vh;
    }
}