/* =====================================================
   namu.style - Celestial Arboretum HUD
   Anti-Design Manifesto
   ===================================================== */

/* CSS Custom Properties for Counter Animation */
@property --counter-star {
    syntax: '<integer>';
    initial-value: 0;
    inherits: false;
}
@property --counter-ring {
    syntax: '<integer>';
    initial-value: 0;
    inherits: false;
}
@property --counter-azimuth {
    syntax: '<integer>';
    initial-value: 0;
    inherits: false;
}
@property --counter-growth {
    syntax: '<integer>';
    initial-value: 0;
    inherits: false;
}

/* ---- Reset & Base ---- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    background: #0a0812;
    color: #c8c4d0;
    font-family: 'Playfair Display', serif;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    position: relative;
}

/* ---- Scan Lines (z-index 89) ---- */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 89;
    pointer-events: none;
    background: repeating-linear-gradient(
        transparent 0px,
        transparent 2px,
        rgba(10, 8, 18, 0.12) 2px,
        rgba(10, 8, 18, 0.12) 4px
    );
}

/* ---- Star Field (z-index 1) ---- */
#star-field {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    pointer-events: none;
}

#stars-svg {
    width: 100%;
    height: 100%;
}

.star {
    animation: twinkle var(--duration, 12s) ease-in-out infinite;
    opacity: var(--base-opacity, 0.5);
}

.star-gold {
    fill: #c4a747;
    stroke: none;
}

.star-hollow {
    fill: none;
    stroke: #1a3a6e;
    stroke-width: 0.5;
}

@keyframes twinkle {
    0%, 100% { opacity: var(--base-opacity, 0.5); }
    50% { opacity: 0.05; }
}

/* ---- Central Canopy (z-index 5) ---- */
#canopy {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60vmin;
    height: 60vmin;
    z-index: 5;
    pointer-events: none;
}

#canopy-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px dashed #1a3a6e;
    animation: orbitSlow 120s linear infinite;
}

#canopy-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
}

#growth-rings {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#growth-rings .ring {
    fill: none;
    stroke: #5c3d7a;
    stroke-width: 0.5;
}

#tree-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.tree-branch {
    stroke: #c4a747;
    stroke-width: 0.5;
    fill: none;
}

.tree-branch.tip {
    stroke-width: 0.3;
    opacity: 0.7;
}

.tree-root {
    stroke: #2d6b4f;
    stroke-width: 0.4;
    fill: none;
    opacity: 0.5;
}

@keyframes orbitSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ---- HUD Panels (z-index 13) ---- */
.hud-panel {
    position: fixed;
    z-index: 13;
    background: rgba(18, 16, 42, 0.82) /* #12102a */;
    padding: 2.5vh 2.5vw;
}

/* Panel corner decorations */
.panel-corner {
    position: absolute;
    width: 12px;
    height: 12px;
}

.panel-corner.tl {
    top: -1px;
    left: -1px;
    border-top: 2px solid #c4a747;
    border-left: 2px solid #c4a747;
}

.panel-corner.tr {
    top: -1px;
    right: -1px;
    border-top: 2px solid #c4a747;
    border-right: 2px solid #c4a747;
}

.panel-corner.bl {
    bottom: -1px;
    left: -1px;
    border-bottom: 2px solid #c4a747;
    border-left: 2px solid #c4a747;
}

.panel-corner.br {
    bottom: -1px;
    right: -1px;
    border-bottom: 2px solid #c4a747;
    border-right: 2px solid #c4a747;
}

/* Star Registry - Upper Left */
#star-registry {
    top: 2vh;
    left: 2vw;
    width: 38vw;
    height: 44vh;
    border: 1px solid #2d6b4f;
    overflow: visible;
}

/* Domain Title - bleeds beyond panel */
#domain-title {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: clamp(2.8rem, 7vw, 6rem);
    letter-spacing: 0.4em;
    color: #c8c4d0;
    line-height: 1;
    white-space: nowrap;
    transform: rotate(-2deg);
    margin-bottom: 2vh;
    position: relative;
}

.glitch-title {
    animation: glitchPulse 8s ease-in-out infinite;
}

@keyframes glitchPulse {
    0%, 95% {
        text-shadow: none;
        transform: rotate(-2deg) translate(0, 0);
    }
    96% {
        text-shadow: 2px 0 #8b2252, -2px 0 #1a3a6e;
        transform: rotate(-2deg) translate(3px, -1px);
    }
    97% {
        text-shadow: -3px 0 #2d6b4f, 3px 0 #8b2252, 0 2px #1a3a6e;
        transform: rotate(-2deg) translate(-4px, 2px);
    }
    98% {
        text-shadow: -1px 0 #2d6b4f, 1px 0 #8b2252;
        transform: rotate(-2deg) translate(-2px, 1px);
    }
    99% {
        text-shadow: 1px 1px #1a3a6e, -1px -1px #8b2252;
        transform: rotate(-2deg) translate(1px, -2px);
    }
    100% {
        text-shadow: none;
        transform: rotate(-2deg) translate(0, 0);
    }
}

.panel-meta {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #4a7c59;
    margin-bottom: 3vh;
    display: flex;
    gap: 1em;
    align-items: center;
}

.meta-divider {
    color: #c4a747;
    font-size: 14px;
}

.telemetry-row {
    display: flex;
    gap: 3vw;
    margin-top: 2vh;
}

.counter-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.counter-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #4a7c59;
}

.counter-value {
    font-family: 'Share Tech Mono', monospace;
    font-size: 22px;
    letter-spacing: 0.2em;
    color: #c4a747;
}

#counter-star-mag {
    animation: countUpStar 47s linear infinite;
    counter-reset: star var(--counter-star);
}

#counter-ring-ct {
    animation: countUpRing 61s linear infinite;
    counter-reset: ring var(--counter-ring);
}

#counter-azimuth {
    animation: countUpAzimuth 73s linear infinite;
    counter-reset: azimuth var(--counter-azimuth);
}

#counter-growth {
    animation: countUpGrowth 89s linear infinite;
    counter-reset: growth var(--counter-growth);
}

@keyframes countUpStar {
    from { --counter-star: 0; }
    to { --counter-star: 9999; }
}
@keyframes countUpRing {
    from { --counter-ring: 0; }
    to { --counter-ring: 9999; }
}
@keyframes countUpAzimuth {
    from { --counter-azimuth: 0; }
    to { --counter-azimuth: 9999; }
}
@keyframes countUpGrowth {
    from { --counter-growth: 0; }
    to { --counter-growth: 9999; }
}

.korean-accent {
    font-family: 'Noto Serif KR', serif;
    font-weight: 600;
    font-size: clamp(3rem, 5vw, 5rem);
    color: #c4a747;
    opacity: 0.15;
    position: absolute;
    bottom: 2vh;
    right: -4vw;
    transform: rotate(3deg);
    line-height: 1;
}

/* Root System - Lower Right */
#root-system {
    bottom: 3vh;
    right: 2vw;
    width: 44vw;
    height: 38vh;
    border: 1px solid #8b2252;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.root-statement {
    margin: 0;
    line-height: 1.2;
}

.root-large {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.6rem, 2.8vw, 3.2rem);
    color: #c8c4d0;
    transform: rotate(1deg);
}

.root-data {
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(0.6rem, 0.9vw, 1rem);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #4a7c59;
}

.root-medium {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: clamp(1.2rem, 2vw, 2.4rem);
    color: #c8c4d0;
    transform: rotate(-1.5deg);
}

.root-small {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #8b2252;
}

.root-accent {
    font-family: 'Noto Serif KR', serif;
    font-weight: 600;
    font-size: clamp(1rem, 1.8vw, 1.8rem);
    color: #c4a747;
    opacity: 0.7;
    transform: rotate(2deg);
}

/* ---- Glitch Displacement (z-index 89) ---- */
#glitch-displacement {
    position: fixed;
    top: 11vh;
    left: 55vw;
    z-index: 89;
    pointer-events: none;
    animation: displacementFlicker 12s step-end infinite;
}

.displacement-text {
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #8b2252;
    opacity: 0;
    display: block;
    clip-path: inset(15% 0 70% 0);
    transform: translate(8px, 3px);
}

@keyframes displacementFlicker {
    0%, 90% { opacity: 0; }
    91% { opacity: 1; }
    91.5% { opacity: 0; }
    92% { opacity: 1; }
    93% { opacity: 0; }
    95% { opacity: 0.8; }
    96% { opacity: 0; }
    100% { opacity: 0; }
}

#glitch-displacement .displacement-text {
    animation: displacementShow 12s step-end infinite;
}

@keyframes displacementShow {
    0%, 90% { opacity: 0; }
    91% { opacity: 1; transform: translate(8px, 3px); }
    91.5% { opacity: 0; }
    92% { opacity: 1; transform: translate(-5px, -2px); }
    93% { opacity: 0; }
    95% { opacity: 0.8; transform: translate(3px, 1px); }
    96% { opacity: 0; }
    100% { opacity: 0; }
}

/* ---- Edge Tickers (z-index 34) ---- */
.edge-ticker {
    position: fixed;
    z-index: 34;
    background: #0a0812;
    overflow: hidden;
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #4a7c59;
}

/* Horizontal tickers (top & bottom) */
.ticker-horizontal {
    height: 24px;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
}

#ticker-top {
    top: 0;
}

#ticker-bottom {
    bottom: 0;
}

.ticker-content {
    display: flex;
    white-space: nowrap;
    animation: tickerScroll 40s linear infinite;
}

.ticker-content span {
    flex-shrink: 0;
    padding-right: 2em;
}

.ticker-reverse {
    animation: tickerScrollReverse 45s linear infinite;
}

@keyframes tickerScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@keyframes tickerScrollReverse {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
}

/* Vertical tickers (left & right) */
.ticker-vertical {
    width: 24px;
    top: 24px;
    bottom: 24px;
    writing-mode: vertical-rl;
    display: flex;
    align-items: center;
}

#ticker-left {
    left: 0;
}

#ticker-right {
    right: 0;
}

.ticker-content-vertical {
    display: flex;
    white-space: nowrap;
    animation: tickerScrollV 35s linear infinite;
}

.ticker-content-vertical span {
    flex-shrink: 0;
    padding-bottom: 2em;
}

.ticker-reverse-v {
    animation: tickerScrollReverseV 38s linear infinite;
}

@keyframes tickerScrollV {
    from { transform: translateY(0); }
    to { transform: translateY(-50%); }
}

@keyframes tickerScrollReverseV {
    from { transform: translateY(-50%); }
    to { transform: translateY(0); }
}

/* ---- Root Lines SVG ---- */
#root-lines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2;
    pointer-events: none;
}

.root-line {
    stroke: #2d6b4f;
    stroke-width: 0.5;
    fill: none;
    opacity: 0.3;
}

/* ---- Mobile Responsive ---- */
@media (max-width: 768px) {
    body {
        overflow-y: auto;
        height: auto;
    }

    .hud-panel {
        position: relative;
        width: 94vw !important;
        height: auto !important;
        margin: 2vh auto;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
    }

    #star-registry {
        margin-top: 30px;
    }

    #domain-title {
        font-size: clamp(1.8rem, 8vw, 3rem);
        letter-spacing: 0.2em;
        word-break: break-all;
        white-space: normal;
    }

    #canopy {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 80vw;
        height: 80vw;
        margin: 2vh auto;
    }

    .korean-accent {
        position: relative;
        right: auto;
        bottom: auto;
    }

    .ticker-vertical {
        display: none;
    }

    #root-lines {
        display: none;
    }

    #glitch-displacement {
        display: none;
    }
}