/* =========================================
   RADIX — Shared Styles
   ========================================= */

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

/* Variables */
:root {
    --white: #ffffff;
    --black: #0a0a0a;
    --charcoal: #1a1a1a;
}

/* Scrollbar */
html {
    scrollbar-color: rgba(255,255,255,0.08) transparent;
    scrollbar-width: thin;
}
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }

/* Selection */
::selection {
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.85);
}

/* Cursor — four-pointed star */
html {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 0C8.5 5.5 10.5 7.5 16 8C10.5 8.5 8.5 10.5 8 16C7.5 10.5 5.5 8.5 0 8C5.5 7.5 7.5 5.5 8 0Z' fill='white' fill-opacity='0.5'/%3E%3C/svg%3E") 8 8, default;
}
a, button, select, input[type="submit"], input[type="checkbox"], .footer-glyph {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 0C8.5 5.5 10.5 7.5 16 8C10.5 8.5 8.5 10.5 8 16C7.5 10.5 5.5 8.5 0 8C5.5 7.5 7.5 5.5 8 0Z' fill='white' fill-opacity='0.5'/%3E%3C/svg%3E") 8 8, pointer;
}

/* Body */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--charcoal);
    color: var(--white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    animation: pageEnter 0.5s ease;
}

/* Page transitions */
@keyframes pageEnter {
    from { opacity: 0; }
    to { opacity: 1; }
}
body.page-exit {
    animation: none !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease !important;
}

/* Vignette — structural only, gradients per-page */
.vignette {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Navigation */
.back-link {
    position: fixed;
    top: 2rem; left: 2rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    text-decoration: none;
    transition: all 0.4s ease;
    z-index: 100;
}
.back-link:hover { color: rgba(255,255,255,0.7); }

/* Page titles — inscribed spacing */
h1 {
    letter-spacing: 0.15em;
}

/* Footer */
footer {
    position: relative;
    z-index: 2;
    text-align: center;
}

/* Breathing footer glyph */
@keyframes breathe {
    0%, 100% { opacity: 0.15; }
    50% { opacity: 0.25; }
}
.footer-glyph {
    width: 35px; height: 35px;
    margin: 0 auto 1rem;
    opacity: 0.15;
    transition: transform 0.4s ease, opacity 0.4s ease;
    animation: breathe 8s ease-in-out infinite;
}
.footer-glyph:hover {
    transform: scale(1.1);
    opacity: 0.3;
    animation-play-state: paused;
}
.footer-glyph svg {
    width: 100%; height: 100%;
    fill: none; stroke: white; stroke-width: 1;
}

/* Responsive */
@media (max-width: 600px) {
    .back-link { top: 1rem; left: 1rem; font-size: 0.7rem; }
}