/* =================================================================
   styles.css — Agim Sherifi Portfolio  ·  v3.0 OPTIMIZED
   Liquid Glass Master System · Deduped Animations · CSS Variables
   ================================================================= */

/* ═══════════════════════════════════════════════════════════════
   1.  DESIGN TOKENS  (single source of truth)
   ═══════════════════════════════════════════════════════════════ */
:root {
    /* Brand palette */
    --color-primary:        #06b6d4;
    --color-primary-dark:   #0891b2;
    --color-primary-light:  #22d3ee;
    --color-primary-glow:   rgba(6, 182, 212, 0.5);
    --color-primary-soft:   rgba(6, 182, 212, 0.15);
    --color-primary-haze:   rgba(6, 182, 212, 0.08);

    /* Text */
    --color-text-light:     #f8fafc;
    --color-text-dark:      #0f172a;

    /* Glass system */
    --glass-bg-light:       rgba(255, 255, 255, 0.18);
    --glass-bg-dark:        rgba(15, 23, 42, 0.45);
    --glass-border-light:   rgba(255, 255, 255, 0.45);
    --glass-border-dark:    rgba(255, 255, 255, 0.10);
    --glass-blur:           20px;
    --glass-blur-sm:        12px;
    --glass-blur-lg:        32px;
    --glass-saturate:       180%;

    /* Shadows */
    --shadow-soft:          0 4px  6px -1px  rgba(0, 0, 0, 0.10);
    --shadow-glass:         0 8px 32px   0    rgba(31, 38, 135, 0.12);
    --shadow-glass-dark:    0 8px 32px   0    rgba(0, 0, 0, 0.35);
    --shadow-glow:          0 0   25px        var(--color-primary-glow);

    /* Timing */
    --ease-spring:          cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-bounce:          cubic-bezier(0.34,  1.56,  0.64, 1);
    --ease-smooth:          cubic-bezier(0.25,  0.46,  0.45, 0.94);
    --ease-expo-out:        cubic-bezier(0.16,  1,     0.3,  1);
    --transition-standard:  0.3s ease;
    --transition-fast:      0.15s ease;
    --transition-slow:      0.5s ease;
}

/* ═══════════════════════════════════════════════════════════════
   2.  BASE
   ═══════════════════════════════════════════════════════════════ */
body {
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    scroll-behavior: smooth;
}
.font-serif        { font-family: 'Playfair Display', serif; }
.font-cinematic    { font-family: 'Cinzel', serif; }
.font-signature    { font-family: 'Great Vibes', cursive; }
.font-mono-receipt { font-family: 'Courier Prime', monospace; }

/* ═══════════════════════════════════════════════════════════════
   3.  KEYFRAMES  (deduplicated, single canonical set)
   ═══════════════════════════════════════════════════════════════ */

/* Layout / Entry */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes pageEnter {
    0%   { opacity: 0; transform: translateY(30px) scale(0.98); filter: blur(10px); }
    100% { opacity: 1; transform: translateY(0)    scale(1);    filter: blur(0); }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes slideInFromRight {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInFromLeft {
    from { opacity: 0; transform: translateX(-50px) rotateY(-10deg); }
    to   { opacity: 1; transform: translateX(0)      rotateY(0); }
}
@keyframes slideInFromRight3D {
    from { opacity: 0; transform: translateX(50px)  rotateY(10deg); }
    to   { opacity: 1; transform: translateX(0)      rotateY(0); }
}

/* Loops */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-15px); }
}
@keyframes bounceSoft {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-5px); }
}
@keyframes microBounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-3px); }
}
@keyframes rotateSlow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes gradientShift {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}
@keyframes textGlow {
    0%, 100% { text-shadow: 0 0 20px rgba(6, 182, 212, 0); }
    50%       { text-shadow: 0 0 20px var(--color-primary-glow); }
}
@keyframes gentlePulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.8; }
}
@keyframes blink {
    50% { opacity: 0; }
}
@keyframes scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes audioWave {
    0%, 100% { transform: scaleY(1);   opacity: 1; }
    50%       { transform: scaleY(1.5); opacity: 0.7; }
}

/* Interaction */
@keyframes shake {
    0%   { transform: rotate(0deg); }
    25%  { transform: rotate(10deg); }
    50%  { transform: rotate(0deg); }
    75%  { transform: rotate(-10deg); }
    100% { transform: rotate(0deg); }
}
@keyframes ripple {
    0%   { transform: scale(0); opacity: 1; }
    100% { transform: scale(4); opacity: 0; }
}
@keyframes shimmer {
    0%   { background-position: -1000px 0; }
    100% { background-position:  1000px 0; }
}
@keyframes writing {
    0%, 100% { transform: rotate(0deg)   translateY(0); }
    25%       { transform: rotate(-20deg) translateY(2px); }
    75%       { transform: rotate(10deg)  translateY(-2px); }
}
@keyframes penScribble {
    0%   { transform: translate(0,   0)   rotate(-15deg); }
    25%  { transform: translate(1px, -2px) rotate(-20deg); }
    50%  { transform: translate(2px,  0)  rotate(-10deg); }
    75%  { transform: translate(0,   1px) rotate(-15deg); }
    100% { transform: translate(0,   0)   rotate(-15deg); }
}

/* Loader */
@keyframes loaderGlow {
    0%   { text-shadow: 0 0  5px rgba(6,182,212,0); opacity: 0.5; }
    50%  { text-shadow: 0 0 20px rgba(6,182,212,1); opacity: 1; transform: scale(1.1); }
    100% { text-shadow: 0 0  5px rgba(6,182,212,0); opacity: 0.5; }
}
@keyframes loaderFadeOut {
    from { opacity: 1; visibility: visible; }
    to   { opacity: 0; visibility: hidden; }
}

/* UI */
@keyframes scan {
    0%   { transform: translateY(-100%); opacity: 0; }
    50%  { opacity: 1; }
    100% { transform: translateY(500%);  opacity: 0; }
}
@keyframes deckEnter {
    0%   { opacity: 0; transform: translateY(10px) scale(0.9); }
    100% { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes iconPop {
    0%   { transform: scale(0);   opacity: 0; }
    80%  { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1);   opacity: 1; }
}
@keyframes fadeInk {
    0%   { transform: translate(-50%,-50%) scale(1);   opacity: 0.6; }
    100% { transform: translate(-50%,-50%) scale(0.2); opacity: 0; }
}

/* ── LIQUID GLASS EXCLUSIVE KEYFRAMES ── */

/* Prismatic edge — shifts hue along the border */
@keyframes prismShift {
    0%   { filter: hue-rotate(0deg)   saturate(120%); }
    33%  { filter: hue-rotate(30deg)  saturate(160%); }
    66%  { filter: hue-rotate(-20deg) saturate(140%); }
    100% { filter: hue-rotate(0deg)   saturate(120%); }
}

/* Liquid morph — organic shape breathing */
@keyframes liquidMorph {
    0%   { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    25%  { border-radius: 40% 60% 70% 30% / 40% 70% 30% 60%; }
    50%  { border-radius: 30% 70% 40% 60% / 70% 40% 60% 30%; }
    75%  { border-radius: 70% 30% 60% 40% / 30% 60% 40% 70%; }
    100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

/* Glass shimmer sweep — specular highlight travels across */
@keyframes glassSweep {
    0%   { transform: skewX(-25deg) translateX(-200%); }
    100% { transform: skewX(-25deg) translateX(200%); }
}

/* Refraction ripple — simulates light bending through glass */
@keyframes refractionPulse {
    0%, 100% { backdrop-filter: blur(var(--glass-blur)) saturate(180%) hue-rotate(0deg); }
    50%       { backdrop-filter: blur(calc(var(--glass-blur) + 4px)) saturate(220%) hue-rotate(8deg); }
}

/* Iridescent border */
@keyframes iridescence {
    0%   { border-color: rgba(6, 182, 212, 0.6); }
    20%  { border-color: rgba(99, 102, 241, 0.6); }
    40%  { border-color: rgba(236,  72, 153, 0.6); }
    60%  { border-color: rgba(16,  185, 129, 0.6); }
    80%  { border-color: rgba(245, 158,  11, 0.6); }
    100% { border-color: rgba(6,  182, 212, 0.6); }
}

/* ═══════════════════════════════════════════════════════════════
   4.  UTILITY ANIMATION CLASSES
   ═══════════════════════════════════════════════════════════════ */
.animate-fade-in             { animation: fadeIn          1s var(--ease-smooth) forwards; }
.animate-fade-in-up          { animation: fadeIn          0.6s ease-out forwards; }
.animate-scale-in            { animation: scaleIn         0.3s ease-out forwards; }
.animate-slide-in-right      { animation: slideInFromRight 0.4s ease-out forwards; }
.page-transition             { animation: pageEnter       0.8s var(--ease-smooth) forwards; }

.animate-float               { animation: float           6s  ease-in-out infinite; }
.animate-bounce-soft         { animation: bounceSoft      1s  ease-in-out infinite; }
.micro-bounce                { animation: microBounce     0.3s ease; }
.animate-spin-slow           { animation: rotateSlow      12s linear infinite; }
.animate-rotate-slow         { animation: rotateSlow      20s linear infinite; }
.gradient-shift              { background-size: 200% 200%; animation: gradientShift 3s ease infinite; }
.text-glow                   { animation: textGlow        2s  ease-in-out infinite; }
.animate-gentle-pulse        { animation: gentlePulse     2s  ease-in-out infinite; }
.animate-scroll              { animation: scroll          40s linear infinite; }
.pause-on-hover:hover        { animation-play-state: paused; }
.animate-writing             { animation: writing         3s  ease-in-out infinite; transform-origin: bottom center; }
.animate-scan                { animation: scan            3s  cubic-bezier(0.4,0,0.6,1) infinite; }
.loader-anim                 { animation: loaderGlow      1.5s ease-in-out infinite; }

.timeline-item-visible-right { animation: slideInFromLeft  0.8s var(--ease-smooth) forwards; }
.timeline-item-visible-left  { animation: slideInFromRight3D 0.8s var(--ease-smooth) forwards; }

.share-deck-enter            { animation: deckEnter       0.3s var(--ease-spring) forwards; }
.share-icon-enter            { opacity: 0; animation: iconPop 0.4s var(--ease-bounce) forwards; }

.vibrating                   { animation: shake           0.3s infinite; }
.writing-pen-icon {
    display: inline-block;
    vertical-align: text-bottom;
    margin-left: 2px;
    filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3));
    animation: penScribble 0.1s infinite linear;
    transform-origin: bottom left;
}

/* ═══════════════════════════════════════════════════════════════
   5.  TYPING / CURSOR
   ═══════════════════════════════════════════════════════════════ */
.typing-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background-color: var(--color-primary);
    animation: blink 1s step-end infinite;
    margin-left: 2px;
    vertical-align: middle;
}
.typewriter-cursor { animation: blink 1s step-end infinite; }

/* ═══════════════════════════════════════════════════════════════
   6.  CUSTOM CURSOR  (desktop only, conflict-free)
   ═══════════════════════════════════════════════════════════════ */

/* Step 1 — hide the OS cursor on desktop fine-pointer devices */
@media (pointer: fine) {
    body, a, button, input, select, textarea, .cursor-pointer, [role="button"] {
        cursor: none !important;
    }
}

/* Step 2 — the SVG feather element that JS drives */
.custom-cursor {
    position: fixed;
    top: 0; left: 0;
    width: 24px; height: 24px;
    pointer-events: none;
    z-index: 999999;
    transform: translate(-5px, -24px);
    transition: transform 0.1s ease-out;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.35))
            drop-shadow(0 0 6px var(--color-primary-soft));
    will-change: transform;
}

/* Step 3 — show a feather on interactive elements only when
   the user somehow has a fallback (touch device / JS off) */
@media (pointer: coarse) {
    a, button, input[type="submit"], select, label,
    .cursor-pointer, [role="button"] {
        cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%2306b6d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z'/%3E%3Cline x1='16' x2='2' y1='8' y2='22'/%3E%3Cline x1='17.5' x2='9' y1='15' y2='15'/%3E%3C/svg%3E") 0 22, pointer !important;
    }
    a:active, button:active, .cursor-pointer:active {
        cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='%2306b6d4' stroke='%2306b6d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z'/%3E%3Cline x1='16' x2='2' y1='8' y2='22'/%3E%3Cline x1='17.5' x2='9' y1='15' y2='15'/%3E%3C/svg%3E") 0 20, pointer !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   7.  INK TRAIL
   ═══════════════════════════════════════════════════════════════ */
.ink-dot {
    position: fixed;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle, var(--color-primary) 0%, rgba(6,182,212,0) 70%);
    transform: translate(-50%, -50%);
    z-index: 9999;
    animation: fadeInk 1s linear forwards;
}
.dark .ink-dot {
    background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
}

/* ═══════════════════════════════════════════════════════════════
   8.  ░░░ LIQUID GLASS MASTER SYSTEM ░░░
       Three tiers: Standard · Enhanced · Ultra
   ═══════════════════════════════════════════════════════════════ */

/* ── SVG NOISE FILTER (inject once into the DOM via CSS) ── */
/* NOTE: Add <svg style="display:none"> with id="noise-filter" to your HTML.
   The filter below references it for a tactile frosted-glass texture. */

/* ─────────────────────────────────────────────
   8A. TIER 1 — Standard Glass  (.glass-panel)
       Lightweight, broadly applicable
───────────────────────────────────────────── */
.glass-panel {
    background:        rgba(255, 255, 255, 0.06);
    backdrop-filter:   blur(var(--glass-blur-sm)) saturate(160%);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(160%);
    border:            1px solid rgba(255, 255, 255, 0.08);
    transition:        border-color var(--transition-standard),
                       box-shadow   var(--transition-standard);
}
.glass-panel:hover {
    border-color: rgba(6, 182, 212, 0.35);
    box-shadow:   0 0 30px var(--color-primary-haze);
}
.bg-white .glass-panel {
    background:  rgba(255, 255, 255, 0.65);
    border:      1px solid rgba(0, 0, 0, 0.06);
}

/* ─────────────────────────────────────────────
   8B. TIER 2 — Liquid Glass Panel  (.liquid-glass-panel)
       Full glassmorphism with shine sweep
───────────────────────────────────────────── */
.liquid-glass-panel {
    --_glass-bg:  var(--glass-bg-light);
    --_glass-bdr: var(--glass-border-light);

    background:        var(--_glass-bg);
    backdrop-filter:   blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border:            1px solid var(--_glass-bdr);
    box-shadow:
        var(--shadow-glass),
        inset 0 0 0 1px rgba(255, 255, 255, 0.22),
        inset 0 1px 0    rgba(255, 255, 255, 0.45);   /* top specular rim */
    position:   relative;
    overflow:   hidden;
    transition: box-shadow var(--transition-slow),
                border-color var(--transition-slow);
}

/* Shine sweep on hover */
.liquid-glass-panel::before {
    content:  '';
    position: absolute;
    inset:    0;
    width:    60%;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(255,255,255,0.18) 50%,
        transparent 100%
    );
    transform: skewX(-25deg) translateX(-200%);
    pointer-events: none;
    will-change: transform;
}
.liquid-glass-panel:hover::before {
    animation: glassSweep 0.7s var(--ease-expo-out) forwards;
}

/* Bottom refracted caustic tint */
.liquid-glass-panel::after {
    content:  '';
    position: absolute;
    inset: auto 0 0 0;
    height: 40%;
    background: linear-gradient(
        to top,
        rgba(6, 182, 212, 0.06) 0%,
        transparent 100%
    );
    pointer-events: none;
    border-radius: inherit;
}

/* Dark mode */
.dark .liquid-glass-panel {
    --_glass-bg:  var(--glass-bg-dark);
    --_glass-bdr: var(--glass-border-dark);
    box-shadow:
        var(--shadow-glass-dark),
        inset 0 0 0 1px rgba(255,255,255,0.06),
        inset 0 1px 0   rgba(255,255,255,0.12);
}

/* ─────────────────────────────────────────────
   8C. TIER 3 — Ultra Liquid Glass  (.liquid-glass-ultra)
       Chromatic aberration · iridescence ·
       refraction pulse · prismatic edge
       Use for hero cards, modals, spotlights
───────────────────────────────────────────── */
.liquid-glass-ultra {
    --_bg:   rgba(255, 255, 255, 0.12);
    --_blur: var(--glass-blur-lg);

    position: relative;
    isolation: isolate;
    overflow: hidden;

    background:  var(--_bg);
    backdrop-filter:   blur(var(--_blur)) saturate(200%) brightness(1.05);
    -webkit-backdrop-filter: blur(var(--_blur)) saturate(200%) brightness(1.05);

    /* Layered box-shadow: outer glow + inner specular rim + depth */
    box-shadow:
        0 0  0   1px  rgba(255,255,255,0.55),           /* crisp outer ring  */
        0 0  0   2px  rgba(6, 182, 212, 0.25),          /* cyan aura          */
        0 8px 40px    rgba(0,   0,   0, 0.18),           /* depth shadow       */
        inset 0  2px  0   rgba(255,255,255,0.70),        /* top light streak   */
        inset 0 -1px  0   rgba(255,255,255,0.20),        /* bottom rim         */
        inset 2px 0   0   rgba(255,255,255,0.25),        /* left edge          */
        inset -2px 0  0   rgba(6, 182, 212, 0.15);       /* right chromatic    */

    border: 1px solid transparent;
    animation: iridescence 6s linear infinite;
    will-change: filter, box-shadow;
}

/* Chromatic aberration pseudo-layers */
.liquid-glass-ultra::before {
    content:  '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(
        135deg,
        rgba(255,   0, 128, 0.06) 0%,
        rgba(  0, 200, 255, 0.06) 33%,
        rgba(128, 255,   0, 0.04) 66%,
        rgba(255, 200,   0, 0.06) 100%
    );
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 1;
}

/* Moving specular highlight */
.liquid-glass-ultra::after {
    content:  '';
    position: absolute;
    top: -50%; left: -20%;
    width:  60%; height: 200%;
    background: linear-gradient(
        to bottom right,
        rgba(255,255,255,0.55) 0%,
        rgba(255,255,255,0.08) 40%,
        transparent 70%
    );
    transform: skewX(-15deg);
    pointer-events: none;
    z-index: 2;
    transition: opacity var(--transition-slow);
}
.liquid-glass-ultra:hover::after { opacity: 0.6; }

/* Dark mode ultra */
.dark .liquid-glass-ultra {
    --_bg: rgba(15, 23, 42, 0.55);
    box-shadow:
        0 0  0 1px  rgba(255,255,255,0.12),
        0 0  0 2px  rgba(6, 182, 212, 0.35),
        0 12px 48px rgba(0,0,0,0.55),
        inset 0  2px 0 rgba(255,255,255,0.15),
        inset 0 -1px 0 rgba(6, 182, 212, 0.12),
        inset -2px 0 0 rgba(6, 182, 212, 0.20);
}

/* ─────────────────────────────────────────────
   8D. LIQUID MORPH BLOB  (.liquid-glass-morph)
       Organic breathing shape — hero elements
───────────────────────────────────────────── */
.liquid-glass-morph {
    background:  rgba(255,255,255,0.14);
    backdrop-filter:   blur(24px) saturate(200%);
    -webkit-backdrop-filter: blur(24px) saturate(200%);
    border: 1px solid rgba(255,255,255,0.4);
    box-shadow:
        0 0 40px rgba(6,182,212,0.15),
        inset 0 2px 0 rgba(255,255,255,0.6);
    animation: liquidMorph 8s ease-in-out infinite,
               prismShift  6s ease-in-out infinite;
    will-change: border-radius, filter;
}
.dark .liquid-glass-morph {
    background: rgba(15,23,42,0.5);
    border:     1px solid rgba(6,182,212,0.2);
}

/* ─────────────────────────────────────────────
   8E. HOLOGRAPHIC GLASS  (.glass-holo)
       Share decks, tooltips, floating UI
───────────────────────────────────────────── */
.glass-holo {
    background:        rgba(255,255,255,0.88);
    backdrop-filter:   blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border:     1px solid rgba(255,255,255,0.55);
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.22),
                inset 0 1px 0 rgba(255,255,255,0.9);
}
.dark .glass-holo {
    background: rgba(15,23,42,0.82);
    border:     1px solid rgba(6,182,212,0.22);
    box-shadow: 0 0 30px rgba(6,182,212,0.18),
                inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ─────────────────────────────────────────────
   8F. LIQUID INPUTS  (.liquid-input)
───────────────────────────────────────────── */
.liquid-input {
    background:      rgba(255,255,255,0.06) !important;
    backdrop-filter: blur(10px);
    border:          1px solid rgba(255,255,255,0.28) !important;
    color:           inherit;
    box-shadow:      inset 2px 2px 6px rgba(0,0,0,0.06);
    transition:      background var(--transition-standard),
                     border-color var(--transition-standard),
                     box-shadow var(--transition-standard);
}
.liquid-input:focus {
    background:   rgba(255,255,255,0.15) !important;
    border-color: var(--color-primary)   !important;
    box-shadow:   0 0 18px rgba(6,182,212,0.22),
                  inset 2px 2px 6px rgba(0,0,0,0.06);
    outline: none;
}

/* ─────────────────────────────────────────────
   8G. LIQUID BUTTONS  (.liquid-btn)
───────────────────────────────────────────── */
.liquid-btn {
    background:      rgba(6,182,212,0.82);
    backdrop-filter: blur(6px);
    border:          1px solid rgba(255,255,255,0.35);
    box-shadow:      0 4px 16px rgba(6,182,212,0.32),
                     inset 0 1px 0 rgba(255,255,255,0.4);
    position: relative;
    overflow: hidden;
    transition: background     var(--transition-standard),
                box-shadow     var(--transition-standard),
                transform      var(--transition-standard);
    will-change: transform, box-shadow;
}
.liquid-btn::before {
    content:  '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 50%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.22), transparent);
    border-radius: inherit;
    pointer-events: none;
}
.liquid-btn:hover {
    background: rgba(6,182,212,0.97);
    box-shadow: 0 0 28px rgba(6,182,212,0.65),
                inset 0 1px 0 rgba(255,255,255,0.45);
    transform: translateY(-2px) scale(1.01);
}
.liquid-btn:active { transform: translateY(0) scale(0.99); }

/* ═══════════════════════════════════════════════════════════════
   9.  VIRTUAL GALLERY / 3D CORRIDOR
   ═══════════════════════════════════════════════════════════════ */
.virtual-corridor {
    perspective:    2000px;
    overflow-x:     auto;
    overflow-y:     visible;
    scroll-behavior: smooth;
    padding:        80px 0 100px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.virtual-corridor::-webkit-scrollbar { display: none; }

.gallery-item-3d {
    transition: transform 0.6s var(--ease-smooth), filter 0.6s ease;
    transform-style: preserve-3d;
    position: relative;
    transform: rotateY(25deg) scale(0.9);
    filter: brightness(0.7) sepia(0.2);
    margin: 0 40px;
    will-change: transform, filter;
}
.gallery-item-3d:hover {
    transform: rotateY(0deg) scale(1.05) translateZ(20px);
    filter: brightness(1) sepia(0);
    z-index: 50;
    cursor: crosshair;
}

/* Museum frame */
.museum-frame {
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
    transition: box-shadow var(--transition-standard);
    background-size: cover;
}
.gallery-item-3d:hover .museum-frame {
    box-shadow: 0 30px 60px -10px rgba(0,0,0,0.7);
    border-color: rgba(255,255,255,0.4);
}

/* Spotlight layer */
.spotlight-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 20;
    background: radial-gradient(
        800px circle at var(--x) var(--y),
        rgba(255,255,255,0.52) 0%,
        rgba(255,255,255,0.18) 20%,
        transparent 50%
    );
    mix-blend-mode: overlay;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.gallery-item-3d:hover .spotlight-layer { opacity: 1; }

/* Art caption — Liquid Glass pill */
.art-caption {
    position: absolute;
    bottom:  20px;
    left:    5%;
    width:   90%;
    padding: 12px 20px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    /* UPGRADED to Liquid Glass Ultra pill */
    background:        rgba(255,255,255,0.18);
    backdrop-filter:   blur(18px) saturate(200%);
    -webkit-backdrop-filter: blur(18px) saturate(200%);
    border:     1px solid rgba(255,255,255,0.5);
    box-shadow:
        0 8px 32px rgba(0,0,0,0.28),
        inset 0 1px 0 rgba(255,255,255,0.65),
        inset 0 -1px 0 rgba(255,255,255,0.12);

    z-index: 60;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: opacity 0.4s var(--ease-spring),
                transform 0.4s var(--ease-spring);
    will-change: transform, opacity;
}
.gallery-item-3d:hover .art-caption {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ═══════════════════════════════════════════════════════════════
   10.  SPOTLIGHT CARD (cursor-tracking)
   ═══════════════════════════════════════════════════════════════ */
.spotlight-card { position: relative; overflow: hidden; }
.spotlight-card::before {
    content:  '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        800px circle at var(--mouse-x) var(--mouse-y),
        var(--color-primary-soft),
        transparent 40%
    );
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
    z-index: 2;
}
.spotlight-card:hover::before { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   11.  INTERACTIVE COMPONENTS
   ═══════════════════════════════════════════════════════════════ */

/* Hover helpers */
.hover-glow:hover {
    box-shadow: 0 0 32px rgba(6,182,212,0.22);
}
.hover-scale {
    transition: transform 0.2s var(--ease-bounce);
}
.hover-scale:hover  { transform: scale(1.02); }
.hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    will-change: transform;
}
.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.12);
}

/* Magnetic button */
.magnetic-btn {
    position: relative;
    overflow: hidden;
    display: inline-block;
}
.magnetic-btn::after {
    content:  '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--color-primary-soft) 0%, transparent 50%);
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
    z-index: 0;
}
.magnetic-btn:hover::after { opacity: 1; transform: scale(1); }
.magnetic-btn > * { position: relative; z-index: 1; }

/* Ripple */
.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.6);
    animation: ripple 0.6s linear;
}

/* Shimmer skeleton */
.shimmer {
    background: linear-gradient(90deg,
        rgba(255,255,255,0)   0%,
        rgba(255,255,255,0.3) 50%,
        rgba(255,255,255,0)   100%);
    background-size: 1000px 100%;
    animation: shimmer 2s infinite;
}

/* Neon text */
.neon-text { text-shadow: 0 0 10px rgba(6,182,212,0.7); }

/* Tilt card */
.tilt-card    { transform-style: preserve-3d; transition: transform 0.1s ease-out; }
.tilt-content { transform: translateZ(20px); }

/* Theme transition */
.theme-transition * {
    transition: background-color var(--transition-slow),
                color             var(--transition-slow),
                border-color      var(--transition-slow);
}

/* Audio wave bar */
.audio-wave-bar { animation: audioWave 0.8s ease-in-out infinite; }

/* ═══════════════════════════════════════════════════════════════
   12.  HARDWARE ACCELERATION / PERF
   ═══════════════════════════════════════════════════════════════ */
.gpu-accelerated {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}
.will-change-transform { will-change: transform; }
.will-change-opacity   { will-change: opacity; }
.perspective-2000      { perspective: 2000px; }

/* Canvas */
.shadow-canvas { filter: drop-shadow(0 20px 50px rgba(0,0,0,0.5)); }
canvas.signature-pad { touch-action: none; cursor: crosshair; }

/* ═══════════════════════════════════════════════════════════════
   13.  SCROLLBARS
   ═══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar          { width: 8px; background: transparent; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb {
    background-color: rgba(6,182,212,0.32);
    border-radius: 20px;
    backdrop-filter: blur(4px);
    border: 2px solid transparent;
    background-clip: content-box;
    transition: background-color 0.2s;
}
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(6,182,212,0.82);
    box-shadow: 0 0 15px rgba(6,182,212,0.5);
}

/* Custom scrollbar class (modal / panels) */
.custom-scrollbar::-webkit-scrollbar       { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(156,163,175,0.5);
    border-radius: 20px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(6,182,212,0.8);
}

/* Mobile scrollbars */
@media (max-width: 768px) {
    ::-webkit-scrollbar { width: 5px !important; height: 5px !important; }
    ::-webkit-scrollbar-thumb {
        background-color: rgba(6,182,212,0.6) !important;
        border-radius: 10px !important;
        border: none !important;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
        background-color: rgba(6,182,212,0.6) !important;
    }
    .custom-scrollbar::-webkit-scrollbar-track { background: transparent !important; }
}

/* ═══════════════════════════════════════════════════════════════
   14.  RANGE INPUT
   ═══════════════════════════════════════════════════════════════ */
input[type='range']::-webkit-slider-thumb {
    appearance: none;
    width: 16px; height: 16px;
    background: var(--color-primary-light);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(34,211,238,0.55);
    transition: box-shadow var(--transition-fast);
}
input[type='range']::-webkit-slider-thumb:hover {
    box-shadow: 0 0 20px rgba(34,211,238,0.9);
}

/* ═══════════════════════════════════════════════════════════════
   15.  RECEIPT BACKGROUND
   ═══════════════════════════════════════════════════════════════ */
.receipt {
    background-image: radial-gradient(circle, #000 2px, transparent 2.5px);
    background-size: 100% 30px;
}

/* ═══════════════════════════════════════════════════════════════
   16.  MOBILE ANIMATION OPTIMIZATIONS
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .animate-on-mobile { animation-duration: 0.5s !important; }
    .reduce-motion * { animation: none !important; transition: none !important; }
    .touch-target { min-height: 44px; min-width: 44px; }
}

/* ═══════════════════════════════════════════════════════════════
   17.  ACCESSIBILITY — REDUCED MOTION
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration:        0.01ms !important;
        animation-iteration-count: 1      !important;
        transition-duration:       0.01ms !important;
        scroll-behavior:           auto   !important;
    }
    .liquid-glass-morph  { animation: none !important; border-radius: 12px !important; }
    .liquid-glass-ultra  { animation: none !important; }
    .text-glow           { animation: none !important; }
    .writing-pen-icon    { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   18.  PRINT STYLES
   ═══════════════════════════════════════════════════════════════ */
@media print {
    body * { visibility: hidden; }
    #print-area, #print-area * { visibility: visible; }
    #print-area {
        position: fixed; left: 0; top: 0; width: 100%; height: 100%;
        z-index: 99999; display: flex !important;
        align-items: center; justify-content: center;
        padding: 0; margin: 0;
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    body {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        background: white !important; color: black !important;
    }
    .no-print { display: none !important; }
    a { color: black !important; text-decoration: underline !important; }
    .print-break-inside-avoid { break-inside: avoid !important; }
    .print-page-break-before  { page-break-before: always !important; }
}

/* Print card base */
.print-card {
    width: 100%; max-width: 800px; min-height: 600px; padding: 60px;
    position: relative; display: flex;
    flex-direction: column; justify-content: space-between; overflow: hidden;
}
.print-watermark {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%) rotate(-45deg);
    font-family: 'Cinzel', serif; font-size: 8rem;
    color: rgba(0,0,0,0.03); white-space: nowrap;
    pointer-events: none; z-index: 0;
}
.print-content { z-index: 1; position: relative; text-align: center; }

/* Print themes */
.print-theme-classic  { background-color: #fdfbf7; color: #000; border: 8px double #000; }
.print-theme-minimal  { background-color: #fff; color: #111; border: none; }
.print-theme-gold {
    background-color: #fff; color: #000; border: 4px solid #d4af37; position: relative;
}
.print-theme-gold::before {
    content: ''; position: absolute; inset: 10px; border: 1px solid #d4af37; pointer-events: none;
}
.print-theme-dark {
    background-color: #1a1a1a !important; color: #e2e8f0 !important;
    border: 1px solid #333; position: relative;
}
.print-theme-dark .print-watermark { color: rgba(212,175,55,0.1) !important; }
.print-theme-dark h1               { color: #fff !important; }

.print-theme-antique {
    background-color: #fdf5e6 !important; color: #4a4a4a !important;
    border: 10px solid #c9a75d !important; position: relative;
    box-shadow: 0 0 0 5px #d4af37 inset;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%25" height="100%25" opacity=".3"><defs><pattern id="p" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M50 0H0v50C50 50 50 0 50 0z" fill="%23c9a75d" opacity=".1"/></pattern></defs><rect width="100%25" height="100%25" fill="url(%23p)"/></svg>') !important;
}
.print-theme-antique .print-watermark { color: rgba(201,167,93,0.15) !important; }
.print-theme-antique h1 { color: #8B4513 !important; }

.print-theme-robotics {
    background-color: #0f172a !important; color: #06b6d4 !important;
    border: 5px solid #22d3ee !important; position: relative;
    box-shadow: 0 0 0 10px #083344 inset;
    background-image:
        linear-gradient(0deg, transparent 24%, rgba(34,211,238,0.08) 25%, rgba(34,211,238,0.08) 26%, transparent 27%,
                        transparent 74%, rgba(34,211,238,0.08) 75%, rgba(34,211,238,0.08) 76%, transparent 77%),
        linear-gradient(90deg, transparent 24%, rgba(34,211,238,0.08) 25%, rgba(34,211,238,0.08) 26%, transparent 27%,
                        transparent 74%, rgba(34,211,238,0.08) 75%, rgba(34,211,238,0.08) 76%, transparent 77%);
    background-size: 100px 100px;
}
.print-theme-robotics .print-watermark {
    color: rgba(34,211,238,0.05) !important;
    font-family: 'Share Tech Mono', monospace !important;
}
.print-theme-robotics h1,
.print-theme-robotics h3 {
    color: #22d3ee !important;
    text-shadow: 0 0 5px rgba(34,211,238,0.5) !important;
}
.print-theme-robotics .print-card {
    border: 2px solid #06b6d4;
    box-shadow: 0 0 20px rgba(6,182,212,0.5);
}

.print-theme-romantic {
    background: linear-gradient(135deg, #fff5f7 0%, #ffe5ec 100%) !important;
    color: #831843 !important; border: 8px solid #ffc0cb !important;
}
.print-theme-romantic .print-watermark { color: rgba(255,182,193,0.1) !important; }

.print-theme-nature {
    background: linear-gradient(135deg, #f0fff4 0%, #d1fae5 100%) !important;
    color: #064e3b !important; border: 8px solid #10b981 !important;
}
.print-theme-nature .print-watermark { color: rgba(16,185,129,0.08) !important; }

.print-theme-neon {
    background: #000 !important; color: #a855f7 !important;
    border: 4px solid #a855f7 !important;
    box-shadow: 0 0 40px rgba(168,85,247,0.6) inset !important;
}
.print-theme-neon .print-watermark {
    color: rgba(168,85,247,0.05) !important;
    text-shadow: 0 0 20px rgba(168,85,247,0.8) !important;
}