/* 
   ROOT CONFIGURATION
   ==========================================================================
   Design System Tokens: Colors, Grid, Typography, and Themes.
*/

:root {
   /* --- GRID SYSTEM CONFIGURATION --- */
   /* 
       Logic: Cell (160px) + Gap (20px) = 180px Total Stride.
       Grid Dots align every 20px (180 / 20 = 9 steps).
    */
   --gap: 20px;
   --cell: 160px;

   /* --- TYPOGRAPHY --- */
   --font-main: 'IBM Plex Mono', monospace, -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
}

/* 
   THEME: DARK (Default)
   Inspired by Deep Space & Bioluminescence
*/
:root,
[data-theme="dark"] {
   /* Backgrounds */
   --bg-deep: #0f1012;
   /* Main canvas background */
   --bg-panel: #18181b;
   /* Solid panels */

   /* Grid Texture */
   --grid-line: rgba(255, 255, 255, 0.1);

   /* Brand Accent (Transformative Teal) */
   --accent: #d4e4f1;
   --accent-dim: rgba(45, 212, 191, 0.15);
   /* Low opacity accent */
   --accent-glow: rgba(45, 212, 191, 0.5);
   /* Glow effects */

   /* Liquid Glass Material */
   --card-base: rgba(20, 20, 23, 0.25);
   /* Glass body */
   --card-hover: rgba(30, 30, 35, 0.35);
   /* Hover state */
   --border: rgba(255, 255, 255, 0.1);
   /* Glass edge */
   --shine: rgba(255, 255, 255, 0.15);
   /* Inner reflection */

   /* Typography */
   --text-main: #f4f4f5;
   --text-mute: #71717a;
   --text-inverse: #000000;

   /* Status Colors */
   --status-success: #86efac;
   --status-success-bg: rgba(134, 239, 172, 0.1);
   --status-success-border: rgba(134, 239, 172, 0.2);

   --status-error: #f87171;
   --status-error-bg: rgba(248, 113, 113, 0.1);
   --status-error-border: rgba(248, 113, 113, 0.2);
}

/* 
   THEME: LIGHT (Option)
   Inspired by Frost & Daylight
*/
[data-theme="light"] {
   /* Backgrounds */
   --bg-deep: #f0f2f5;
   /* Light misty gray */
   --bg-panel: #ffffff;

   /* Grid Texture */
   --grid-line: rgba(0, 0, 0, 0.08);

   /* Brand Accent (Darker Teal for contrast) */
   --accent: #0D9488;
   --accent-dim: rgba(13, 148, 136, 0.1);
   --accent-glow: rgba(13, 148, 136, 0.3);

   /* Liquid Glass Material */
   --card-base: rgba(255, 255, 255, 0.4);
   /* Frosted glass */
   --card-hover: rgba(255, 255, 255, 0.6);
   --border: rgba(0, 0, 0, 0.05);
   --shine: rgba(255, 255, 255, 0.8);

   /* Typography */
   --text-main: #18181b;
   --text-mute: #71717a;
   --text-inverse: #ffffff;
}

/* 
   LOGO ANIMATION (Global)
   ==========================================================================
*/
.odac-anim-logo {
    width: 140px;
    height: auto;
    max-width: 100%;
}

.anim-circle {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.anim-stem {
    transform-box: fill-box;
    transform: scaleY(0);
}

/* Staggered Delays for Cascade Effect */
.c1 { animation-delay: 0.1s; } /* O */
.c2 { animation-delay: 0.2s; } /* d-bowl */
.c3 { animation-delay: 0.3s; } /* a-bowl */
.c4 { animation-delay: 0.4s; } /* c-ring */

/* d-stem grows after its bowl pops */
.d-stem { 
    transform-origin: bottom; 
    animation: growStem 0.5s ease-out 0.7s forwards; 
}

/* a-stem grows after its bowl pops */
.a-stem { 
    transform-origin: top; 
    animation: growStem 0.5s ease-out 0.8s forwards; 
}

/* c-ring opens symmetrically after it pops */
.c-ring {
    stroke-dasharray: 201; /* Circumference of r=32 circle */
    stroke-dashoffset: 0;
    /* Start at 0deg (Right). Gap will form at 0deg. */
    animation: 
        popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.4s forwards,
        openGapSym 0.5s ease-out 0.8s forwards;
}

/* Keyframes */
@keyframes popIn {
    0% { opacity: 0; transform: scale(0) rotate(var(--rot, 0deg)); }
    100% { opacity: 1; transform: scale(1) rotate(var(--rot, 0deg)); }
}

@keyframes growStem {
    to { transform: scaleY(1); }
}

/* Symmetric Gap Opening: Shrink array, Shift offset to center the remaining arc */
@keyframes openGapSym {
    from { stroke-dasharray: 201; stroke-dashoffset: 0; }
    to { stroke-dasharray: 160 250; stroke-dashoffset: -20; }
}

/* LOGO LOADING STATE */
.odac-anim-logo.loading .anim-circle {
    opacity: 1;
}

.odac-anim-logo.loading .d-stem,
.odac-anim-logo.loading .a-stem {
    transform: scaleY(1); /* Prevent reverting to scaleY(0) base style before animation starts */
    animation: shrinkStem 0.3s ease-in forwards;
}

/* Circles Start Bouncing */
.odac-anim-logo.loading .c1 { animation: waveBounce 1.2s ease-in-out infinite 0.3s; }
.odac-anim-logo.loading .c2 { animation: waveBounce 1.2s ease-in-out infinite 0.4s; }
.odac-anim-logo.loading .c3 { animation: waveBounce 1.2s ease-in-out infinite 0.5s; }
.odac-anim-logo.loading .c4 { 
    animation: closeGap 0.3s ease-in forwards, 
               waveBounce 1.2s ease-in-out infinite 0.6s; 
}

@keyframes shrinkStem {
    from { transform: scaleY(1); }
    to { transform: scaleY(0); }
}

@keyframes closeGap {
    from { stroke-dasharray: 160 250; stroke-dashoffset: -20; }
    to { stroke-dasharray: 201; stroke-dashoffset: 0; }
}

@keyframes waveBounce {
    0%, 100% { transform: translateY(0) scale(1) rotate(var(--rot, 0deg)); }
    50% { transform: translateY(-20px) scale(1) rotate(var(--rot, 0deg)); }
}

/* LOGO RESETTING STATE (Smooth Return) */
.odac-anim-logo.resetting .anim-circle {
    opacity: 1;
    animation: stopBounce 0.4s ease-out forwards;
}

.odac-anim-logo.resetting .d-stem,
.odac-anim-logo.resetting .a-stem {
    animation: growStem 0.4s ease-out forwards;
}

.odac-anim-logo.resetting .c-ring {
    animation: openGapSym 0.4s ease-out forwards;
}

@keyframes stopBounce {
    0% { transform: translateY(0) scale(1) rotate(var(--rot, 0deg)); }
    100% { transform: translateY(0) scale(1) rotate(var(--rot, 0deg)); }
}
.odac-anim-logo.idle .anim-circle {
    opacity: 1;
    transform: scale(1) rotate(var(--rot, 0deg));
    animation: none;
}
.odac-anim-logo.idle .d-stem,
.odac-anim-logo.idle .a-stem {
    transform: scaleY(1);
    animation: none;
}
.odac-anim-logo.idle .c-ring {
    stroke-dasharray: 160 250;
    stroke-dashoffset: -20;
    animation: none;
}