:root {
    --bg-color: #050505;
    --primary: #9333EA;
    --accent: #C084FC;
    --glow: #d8b4fe;
    --white: #FFFFFF;

    /* Master responsive sizes: everything below derives from these,
       so the ring, eyes, and percentage text all scale together and
       never overflow small phone screens. */
    --ring-size: clamp(220px, 62vmin, 450px);
    --eye-w: clamp(120px, 30vmin, 250px);
}

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

body, html {
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    overflow: hidden;
    font-family: 'Space Grotesk', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white);
    cursor: none;
    user-select: none;
    -webkit-user-select: none;
}

/* --- OVERLAYS --- */
canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 30%, #07070B 100%);
    z-index: 2;
    pointer-events: none;
}

.film-grain {
    position: absolute;
    inset: 0;
    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.8" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.04"/%3E%3C/svg%3E');
    z-index: 3;
    pointer-events: none;
}

/* Soft ambient purple bloom breathing behind the whole scene for depth */
.ambient-glow {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%, rgba(147, 51, 234, 0.22) 0%, transparent 55%);
    animation: ambientBreathe 4s ease-in-out infinite alternate;
}
@keyframes ambientBreathe {
    0% { opacity: 0.6; }
    100% { opacity: 1; }
}

/* --- CINEMATIC LETTERBOX BARS --- */
.letterbox {
    position: fixed;
    left: 0;
    width: 100%;
    height: 11vh;
    background: #000;
    z-index: 50;
    transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.letterbox-top { top: 0; transform: translateY(0); }
.letterbox-bottom { bottom: 0; transform: translateY(0); }
.letterbox-top.open { transform: translateY(-100%); }
.letterbox-bottom.open { transform: translateY(100%); }

/* Slow cinematic dolly-zoom on the smoke/particle layers, independent of the shader's own breathing */
#smokeCanvas, #particleCanvas {
    animation: cinematicDrift 40s ease-in-out infinite alternate;
    filter: saturate(1.08) contrast(1.05);
}
@keyframes cinematicDrift {
    0% { transform: scale(1); }
    100% { transform: scale(1.06); }
}

/* --- UTILS --- */
.hidden {
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

/* --- MAIN CONTAINER --- */
.loader-container {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 10;
}

.camera-shake {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
    0% { transform: translate(0, 0); }
    10% { transform: translate(-5px, -5px) rotate(-1deg); }
    20% { transform: translate(5px, 5px) rotate(1deg); }
    30% { transform: translate(-5px, 5px) rotate(0deg); }
    40% { transform: translate(5px, -5px) rotate(1deg); }
    50% { transform: translate(-3px, 0px) rotate(-1deg); }
    60% { transform: translate(3px, 3px) rotate(0deg); }
    70% { transform: translate(-2px, -2px) rotate(1deg); }
    80% { transform: translate(2px, 2px) rotate(0deg); }
    90% { transform: translate(-1px, 1px) rotate(0deg); }
    100% { transform: translate(0, 0); }
}

/* --- SCENE 1: DEVIL EYES --- */
.eyes-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    transition: all 0.6s cubic-bezier(0.1, 0.9, 0.2, 1);
}

/* Inner wrapper carries the idle "gaze" micro-movement so it never fights
   the blink/morph/explode transforms on the outer container */
.eyes-gaze {
    display: flex;
    gap: clamp(20px, 8vw, 60px);
    animation: idleGaze 9s ease-in-out infinite;
}
@keyframes idleGaze {
    0%, 100% { transform: translate(0, 0); }
    20%      { transform: translate(3px, -2px); }
    45%      { transform: translate(-4px, 1px); }
    70%      { transform: translate(2px, 3px); }
    85%      { transform: translate(-2px, -1px); }
}

.eyes-container.blink .eye-svg {
    animation: eyeBlink 0.15s ease-in-out;
}
@keyframes eyeBlink {
    0% { transform: scaleY(1); }
    50% { transform: scaleY(0.1); }
    100% { transform: scaleY(1); }
}

.eye-wrapper {
    width: var(--eye-w);
    height: calc(var(--eye-w) / 2);
    display: flex;
    justify-content: center;
    align-items: center;
}

.left-eye {
    transform: scaleX(-1);
}

/* Desync the two eyes slightly so they read as alive, not a mirrored sticker */
.right-eye .eye-pulse { animation-delay: -0.6s; }
.right-eye .eye-glint { animation-delay: -0.9s; }
.right-eye .eye-rim { animation-delay: -1.4s; }

/* Crackling energy tracing the outer rim */
.eye-rim {
    opacity: 0.85;
    filter: drop-shadow(0 0 4px rgba(243, 232, 255, 0.85));
    animation: rimCrackle 3.4s linear infinite;
}
@keyframes rimCrackle {
    to { stroke-dashoffset: -72; }
}

/* --- FLASH OVERLAY --- */
.flash-overlay {
    position: absolute;
    inset: 0;
    background-color: var(--white);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: overlay;
}
.flash-overlay.active {
    animation: flashBang 1s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}
@keyframes flashBang {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

.eye-pulse {
    width: 100%;
    height: 100%;
    animation: eyePulseSvg 2s infinite alternate ease-in-out;
    transition: all 0.4s cubic-bezier(0.1, 0.9, 0.2, 1);
}

.eye-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

@keyframes eyePulseSvg {
    0% { transform: scale(0.96); filter: drop-shadow(0 0 12px rgba(192, 132, 252, 0.5)); }
    100% { transform: scale(1.04); filter: drop-shadow(0 0 45px rgba(192, 132, 252, 1)); }
}

/* Subtle glint shimmer so the eyes feel alive, not static */
.eye-glint {
    transform-box: fill-box;
    transform-origin: center;
    animation: glintShimmer 2.4s infinite alternate ease-in-out;
}
@keyframes glintShimmer {
    0% { opacity: 0.7; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1.1); }
}

/* Morph classes (added via JS) */
.eyes-container.morph {
    gap: -150px; /* Pull them extremely tightly into the center */
    transform: translate(-50%, -50%) scale(0.3);
}

.eyes-container.morph .eye-pulse {
    animation: none;
    transform: scale(0.1) !important;
    filter: brightness(5) drop-shadow(0 0 100px var(--white)) blur(8px);
}

.eyes-container.explode {
    transform: translate(-50%, -50%) scale(10);
    opacity: 0;
    filter: blur(40px);
    transition: all 0.6s cubic-bezier(0.05, 0.9, 0.1, 1);
}

/* --- SCENE 2: ROUND LOADER --- */
.round-loader {
    position: absolute;
    top: 50%; left: 50%;
    width: var(--ring-size);
    height: var(--ring-size);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%) scale(0.6) rotate(-45deg);
    opacity: 0;
    transition: all 1.2s cubic-bezier(0.1, 1, 0.2, 1);
}

.round-loader.active {
    transform: translate(-50%, -50%) scale(1) rotate(0deg) !important;
    opacity: 1 !important;
}

.shockwave {
    position: absolute;
    top: 50%; left: 50%;
    width: calc(var(--ring-size) * 0.66); height: calc(var(--ring-size) * 0.66);
    border-radius: 50%;
    border: 5px solid var(--white);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
}
.shockwave.active {
    animation: shockwaveAnim 0.8s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}
@keyframes shockwaveAnim {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; border-width: 15px; }
    100% { transform: translate(-50%, -50%) scale(5); opacity: 0; border-width: 0px; }
}

.spin-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: spin 6s linear infinite;
}
.spin-ring-reverse {
    transform-origin: 50px 50px;
    animation: spinReverse 12s linear infinite;
}
.spin-ring-fast {
    transform-origin: 50px 50px;
    animation: spinFast 1.5s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes spinReverse {
    0% { transform: rotate(360deg); }
    100% { transform: rotate(-360deg); }
}
@keyframes spinFast {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Inner core glow */
.loader-core {
    position: absolute;
    width: calc(var(--ring-size) * 0.6); height: calc(var(--ring-size) * 0.6);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(168,85,247,0.15) 0%, transparent 60%);
    animation: corePulse 2.5s ease-in-out infinite alternate;
}

@keyframes corePulse {
    0% { transform: scale(0.85); opacity: 0.6; }
    100% { transform: scale(1.15); opacity: 1; }
}

/* --- LOGO TEXT --- */
.logo-text {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.logo-text.visible {
    pointer-events: auto;
    opacity: 1;
}

/* Wordmark stage: holds the base letterforms, the light-sweep layer,
   a soft fog pass, and a few drifting dust motes */
.wordmark {
    position: relative;
    display: inline-flex;
    padding: 0.4em 0.2em;
}

/* Volumetric fog drifting behind the logo — very quiet, never a shape */
.wordmark-fog {
    position: absolute;
    inset: -60px -80px;
    background: radial-gradient(ellipse 60% 70% at 50% 55%, rgba(147, 51, 234, 0.16) 0%, rgba(147, 51, 234, 0.05) 45%, transparent 75%);
    filter: blur(18px);
    opacity: 0;
    z-index: -1;
    animation: fogDrift 6s ease-in-out infinite;
}
.logo-text.visible .wordmark-fog {
    animation: fogAppear 2.4s ease-out forwards, fogDrift 7s ease-in-out 2.4s infinite;
}
@keyframes fogAppear {
    0% { opacity: 0; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes fogDrift {
    0%, 100% { transform: translateX(-2%) scale(1); }
    50% { transform: translateX(2%) scale(1.03); }
}

.diesyt-base,
.diesyt-sweep {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: clamp(1.5rem, 7vw, 2.65rem);
    letter-spacing: 0.14em;
    line-height: 1;
    white-space: nowrap;
}

/* Base letterforms: an ambient off-white, lit rather than lit-up.
   A near-imperceptible purple falloff at the edges reads as reflected
   environment light, not a glow source. */
.diesyt-base {
    position: relative;
    color: #F8F8FA;
    opacity: 0;
    filter: blur(5px);
    transform: translateY(3px);
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06),
        0 6px 26px rgba(0, 0, 0, 0.55),
        0 0 18px rgba(147, 51, 234, 0.10);
}
.logo-text.visible .diesyt-base {
    animation: wordmarkFocus 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.1s;
}
@keyframes wordmarkFocus {
    0%   { opacity: 0;    filter: blur(9px);  transform: translateY(5px); }
    55%  { opacity: 0.75; filter: blur(2.5px); transform: translateY(1px); }
    100% { opacity: 1;    filter: blur(0);    transform: translateY(0); }
}

/* Sweep layer: a slim, angled band of light travels once across the
   letterforms via background-clip:text, revealing a metallic highlight
   as it passes, then fades — this is the "reveal", not a glow effect */
.diesyt-sweep {
    position: absolute;
    top: 0.4em;
    left: 0.2em;
    background-image: linear-gradient(
        100deg,
        transparent 35%,
        rgba(216, 180, 254, 0.55) 47%,
        rgba(255, 255, 255, 0.95) 50%,
        rgba(216, 180, 254, 0.55) 53%,
        transparent 65%
    );
    background-size: 260% 100%;
    background-position: 160% 0;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    opacity: 0;
    pointer-events: none;
}
.logo-text.visible .diesyt-sweep {
    animation: sweepPass 1.3s cubic-bezier(0.45, 0, 0.2, 1) forwards 0.15s;
}
@keyframes sweepPass {
    0%   { background-position: 160% 0; opacity: 1; }
    75%  { opacity: 1; }
    100% { background-position: -60% 0; opacity: 0; }
}

/* Tiny drifting dust motes — barely-there, settle quickly, no bounce */
.dust {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: rgba(216, 180, 254, 0.7);
    opacity: 0;
    filter: blur(0.3px);
}
.dust-1 { top: 10%; left: 8%; }
.dust-2 { top: 70%; left: 30%; width: 1.5px; height: 1.5px; }
.dust-3 { top: 20%; left: 78%; }
.dust-4 { top: 65%; left: 92%; width: 1.5px; height: 1.5px; }

.logo-text.visible .dust-1 { animation: dustDrift 3.2s ease-out forwards 0.5s; }
.logo-text.visible .dust-2 { animation: dustDrift 3.6s ease-out forwards 0.7s; }
.logo-text.visible .dust-3 { animation: dustDrift 3.4s ease-out forwards 0.6s; }
.logo-text.visible .dust-4 { animation: dustDrift 3.8s ease-out forwards 0.8s; }

@keyframes dustDrift {
    0%   { opacity: 0; transform: translate(0, 6px) scale(0.6); }
    25%  { opacity: 0.9; }
    100% { opacity: 0; transform: translate(4px, -14px) scale(1); }
}

/* STORE: a quiet subtitle sitting well beneath the wordmark, not
   competing with it */
.logo-text .store {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.62em;
    color: rgba(248, 248, 250, 0.55);
    margin-top: 14px;
    margin-right: -0.62em;
    opacity: 0;
    transform: translateY(4px);
}
.logo-text.visible .store {
    animation: storeFadeIn 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.9s;
}
@keyframes storeFadeIn {
    to { opacity: 1; transform: translateY(0); }
}

/* --- LOADING STATUS --- */
.loading-status {
    position: absolute;
    /* Offset is tied to the ring's actual rendered size (--ring-size),
       not a fixed pixel number, so on narrow/short phone screens this
       block sits right below the ring instead of drifting off-screen. */
    top: calc(50% + (var(--ring-size) / 2) + clamp(24px, 6vh, 60px));
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(400px, 88vw);
    max-width: 88vw;
    opacity: 0;
    filter: blur(5px);
    transform: translateX(-50%) translateY(20px);
    transition: all 1s cubic-bezier(0.1, 1, 0.2, 1) 0.6s;
}

.loading-status.visible {
    opacity: 1 !important;
    filter: blur(0px);
    transform: translateX(-50%) translateY(0);
}

.status-text {
    font-size: clamp(0.62rem, 3.2vw, 1rem);
    letter-spacing: clamp(0.12em, 1.2vw, 0.3em);
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
    text-transform: uppercase;
    text-align: center;
    white-space: normal;
    line-height: 1.4;
}

.percentage {
    font-size: clamp(1.4rem, 8vw, 2.2rem);
    font-weight: 900;
    color: var(--white);
    text-shadow: 0 0 15px var(--accent);
    letter-spacing: 0.05em;
}

.glitch-text {
    animation: textGlitch 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
}
@keyframes textGlitch {
    0% { transform: translate(0) }
    20% { transform: translate(-2px, 1px) }
    40% { transform: translate(-1px, -1px) }
    60% { transform: translate(2px, 1px) }
    80% { transform: translate(1px, -1px) }
    100% { transform: translate(0) }
}

/* --- FINAL FADE --- */
body.fade-to-black::after {
    content: '';
    position: fixed;
    inset: 0;
    background-color: #050505;
    z-index: 999999;
    opacity: 0;
    animation: finalFade 0.4s forwards ease-in-out;
}

@keyframes finalFade {
    0% { opacity: 0; }
    100% { opacity: 1; pointer-events: none; }
}