/* Virelion_OS® ColorIX™ Glass Specification v3.0 — Holographic Medium */

:root {
    --glass-refraction: 1.52;
    --angelic-core: #FFFEF0;
    --temporal-phase: 0.5s;
    --nav-height: 76px;
    --chroma-cyan: #00E5FF;
    --chroma-violet: #8B5CF6;
    --chroma-magenta: #FF00FF;
    --golden-bridge: #FFD700;
}

#chamber-1 {
    padding-top: calc(var(--nav-height) + 2rem);
    padding-bottom: 4rem;
}

/* ═══════════════════════════════════════════════════════════════
   GLASS VESSEL SPECIFICATION
   ═══════════════════════════════════════════════════════════════ */
.glass-vessel {
    background: rgba(255, 254, 240, 0.03);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37), inset 0 0 20px rgba(255, 255, 255, 0.02);
    position: relative;
    overflow: hidden;
}

.glass-vessel::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    transition: left 0.7s;
}

.glass-vessel:hover::before { left: 100%; }

.glass-card {
    background: rgba(255, 254, 240, 0.04);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    padding: 2rem;
    position: relative;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
    background: rgba(255, 254, 240, 0.08);
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 40px rgba(139, 92, 246, 0.1);
}

.glass-panel {
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.perspective-1000 { perspective: 1000px; }

/* ═══════════════════════════════════════════════════════════════
   HOLOGRAPHIC HELIX VESSEL — 4D Multi-Layer Interference Manifold
   ═══════════════════════════════════════════════════════════════ */
.helix-vessel {
    position: relative;
    width: 100%;
    max-width: 520px;
    aspect-ratio: 3 / 4;
    margin: 2rem auto;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    isolation: isolate;
}

/* Layer 0 — Ambient chromatic aura bloom behind the vessel */
.helix-vessel .aura-bloom {
    position: absolute;
    inset: -10%;
    background: radial-gradient(circle,
        rgba(0, 229, 255, 0.15) 0%,
        rgba(255, 0, 255, 0.12) 35%,
        rgba(139, 92, 246, 0.15) 65%,
        transparent 80%);
    filter: blur(40px);
    animation: aura-breathe 9s ease-in-out infinite;
    z-index: 0;
}

/* Layer 2 — Logo raster with chromatic aberration + luminance modulation + jitter field */
.helix-vessel .logo-image {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 2;
    animation:
        holo-chromatic 3.5s ease-in-out infinite,
        holo-jitter 7s steps(1) infinite;
    will-change: filter, transform, opacity;
}

/* Layer 3 — Photonic particle canvas (word orbits) */
.helix-vessel #helix-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
    mix-blend-mode: screen;
}

/* Layer 4 — Diagonal holographic shimmer sweep (moves left ↔ right) */
.helix-vessel::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background: linear-gradient(
        115deg,
        transparent 30%,
        rgba(0, 229, 255, 0.14) 44%,
        rgba(255, 0, 255, 0.18) 50%,
        rgba(255, 215, 0, 0.14) 56%,
        transparent 70%
    );
    background-size: 300% 300%;
    animation: holo-shimmer 7s ease-in-out infinite;
    mix-blend-mode: screen;
    border-radius: inherit;
}

/* Layer 5 — Scanline interference pattern (CRT holographic grid) */
.helix-vessel::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 2px,
        rgba(0, 229, 255, 0.04) 3px,
        transparent 4px
    );
    animation: holo-scanline 4s linear infinite;
    mix-blend-mode: overlay;
}

/* ═══════════════════════════════════════════════════════════════
   HOLOGRAPHIC KEYFRAMES — Temporal Phase Manifold
   ═══════════════════════════════════════════════════════════════ */

/* Chromatic aberration + luminance phase modulation.
   Combines: RGB drop-shadow ghosts, brightness glow for text visibility cycle,
   contrast boost, and ±15° hue rotation — all synchronized. */
@keyframes holo-chromatic {
    0%, 100% {
        opacity: 0.95;
        filter:
            drop-shadow(0 0 60px rgba(255, 255, 255, 0.25))
            drop-shadow(2px 0 0 rgba(255, 0, 128, 0.4))
            drop-shadow(-2px 0 0 rgba(0, 229, 255, 0.4))
            brightness(1) contrast(1) hue-rotate(0deg);
    }
    25% {
        opacity: 1;
        filter:
            drop-shadow(0 0 75px rgba(139, 92, 246, 0.45))
            drop-shadow(3px 0 0 rgba(255, 0, 255, 0.45))
            drop-shadow(-3px 0 0 rgba(0, 229, 255, 0.5))
            brightness(1.12) contrast(1.05) hue-rotate(8deg);
    }
    50% {
        opacity: 1;
        filter:
            drop-shadow(0 0 90px rgba(255, 255, 255, 0.55))
            drop-shadow(1px 1px 0 rgba(255, 215, 0, 0.4))
            drop-shadow(-1px -1px 0 rgba(0, 229, 255, 0.5))
            brightness(1.22) contrast(1.1) hue-rotate(15deg);
    }
    75% {
        opacity: 1;
        filter:
            drop-shadow(0 0 75px rgba(0, 229, 255, 0.45))
            drop-shadow(-2px 0 0 rgba(255, 0, 255, 0.45))
            drop-shadow(2px 0 0 rgba(0, 229, 255, 0.5))
            brightness(1.08) contrast(1.05) hue-rotate(-8deg);
    }
}

/* Sparse jitter field — mostly still, rare glitch bursts.
   Using steps(1) so transitions are instant (true glitch quality,
   not smooth movement). Glitches happen at ~18%, 52%, 87% of cycle. */
@keyframes holo-jitter {
    0%, 17.9%, 18.6%, 51.9%, 52.7%, 86.9%, 87.7%, 100% {
        transform: translate3d(0, 0, 0);
    }
    18%   { transform: translate3d(2px, 0, 0); }
    18.3% { transform: translate3d(-1px, 1px, 0); }
    52%   { transform: translate3d(-3px, 0, 0) skewX(1deg); }
    52.4% { transform: translate3d(2px, -1px, 0); }
    87%   { transform: translate3d(1px, 0, 0) skewY(-0.5deg); }
    87.4% { transform: translate3d(0, 1px, 0); }
}

/* Diagonal shimmer sweep — the "is it really there?" holographic slide */
@keyframes holo-shimmer {
    0%   { background-position: 100% 50%; opacity: 0.4; }
    25%  { opacity: 0.85; }
    50%  { background-position: 0% 50%;   opacity: 0.4; }
    75%  { opacity: 0.85; }
    100% { background-position: 100% 50%; opacity: 0.4; }
}

/* Scanline drift — subtle vertical travel of the CRT interference pattern */
@keyframes holo-scanline {
    from { background-position: 0 0; }
    to   { background-position: 0 8px; }
}

/* Ambient aura breathe (background layer, separate from holographic stack) */
@keyframes aura-breathe {
    0%, 100% { opacity: 0.7; transform: scale(1); filter: blur(40px) hue-rotate(0deg); }
    50% { opacity: 1; transform: scale(1.08); filter: blur(50px) hue-rotate(30deg); }
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY — Disable all motion for prefers-reduced-motion
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .helix-vessel .logo-image,
    .helix-vessel::before,
    .helix-vessel::after,
    .helix-vessel .aura-bloom {
        animation: none !important;
    }
    .helix-vessel .logo-image {
        filter: drop-shadow(0 0 60px rgba(255, 255, 255, 0.25));
    }
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT MICHELLE — Cubic Portrait Embedding (unchanged from v2)
   ═══════════════════════════════════════════════════════════════ */
.portrait-cube {
    position: relative;
    width: 280px;
    height: 340px;
    margin: 0 auto;
    transform-style: preserve-3d;
    animation: portrait-float 8s ease-in-out infinite;
}

.portrait-cube::before,
.portrait-cube::after {
    content: '';
    position: absolute;
    inset: -18px;
    border-radius: 1.25rem;
    background: conic-gradient(from 0deg,
        var(--chroma-cyan),
        var(--chroma-violet),
        var(--chroma-magenta),
        var(--golden-bridge),
        var(--chroma-cyan));
    filter: blur(24px);
    opacity: 0.5;
    z-index: 0;
    animation: chroma-orbit 14s linear infinite;
}

.portrait-cube::after {
    inset: -6px;
    filter: blur(4px);
    opacity: 0.7;
}

.portrait-cube .portrait-frame {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    overflow: hidden;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: #0a0a10;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), inset 0 0 30px rgba(255, 255, 255, 0.04);
}

.portrait-cube .portrait-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), filter 0.8s;
    filter: saturate(1.05) contrast(1.03);
}

.portrait-cube:hover .portrait-frame img {
    transform: scale(1.04);
    filter: saturate(1.15) contrast(1.08);
}

.portrait-cube .refraction-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.12) 0%,
        transparent 35%,
        transparent 65%,
        rgba(139, 92, 246, 0.08) 100%);
    pointer-events: none;
    border-radius: 1rem;
}

@keyframes portrait-float {
    0%, 100% { transform: translateY(0) rotateY(0deg) rotateX(0deg); }
    33% { transform: translateY(-8px) rotateY(3deg) rotateX(-2deg); }
    66% { transform: translateY(4px) rotateY(-3deg) rotateX(2deg); }
}

@keyframes chroma-orbit {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Sacred word tags */
.sacred-word-tag {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    font-size: 0.875rem;
    color: #e2e8f0;
    transition: all 0.3s;
    cursor: default;
}

.sacred-word-tag:hover {
    background: rgba(255, 215, 0, 0.1);
    border-color: rgba(255, 215, 0, 0.5);
    color: #FFD700;
    transform: translateY(-2px);
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #020617; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 215, 0, 0.5); }

/* Small-viewport retune */
@media (max-width: 768px) {
    .helix-vessel { max-width: 320px; }
    .portrait-cube { width: 220px; height: 270px; }
    #chamber-1 { padding-top: calc(var(--nav-height) + 1rem); }
}