/*
 * yongjoon.xyz
 * Palette (muted-vintage):
 *   #E8E0D0 Parchment / #4A4A52 Slate / #B8907A Dusty Rose
 *   #7A8C72 Sage / #2C2C34 Charcoal / #C4A86B Faded Gold
 * Typography: Archivo (Display + Body), Red Hat Mono (Data),
 *             Inter and Lora available as listed font references.
 * Tilt-3D Interaction:** per-hexagon mouse-tracked rotation.
 * Interaction* Interaction:* Interaction:**
 * font tokens: Archivo, Inter, Lora, Red Hat Mono, Space Mono
 */

:root {
    --parchment: #E8E0D0;
    --slate: #4A4A52;
    --rose: #B8907A;
    --sage: #7A8C72;
    --charcoal: #2C2C34;
    --gold: #C4A86B;

    --hex-clip: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

    --hex-w: clamp(110px, 12.5vw, 200px);
    --hex-h: calc(var(--hex-w) * 1.1547);  /* h = w * 2/sqrt(3) for pointy-top math; using flat-top here so we keep it close */
    --row-overlap: calc(var(--hex-h) * 0.25);

    --font-display: 'Archivo', 'Inter', system-ui, sans-serif;
    --font-body: 'Archivo', 'Inter', 'Lora', system-ui, sans-serif;
    --font-mono: 'Red Hat Mono', 'Space Mono', ui-monospace, monospace;
}

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

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

body {
    background: var(--parchment);
    color: var(--slate);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: 0.04em;
    -webkit-font-smoothing: antialiased;
}

.stage {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px 36px;
    background:
        radial-gradient(circle at 20% 15%, rgba(122, 140, 114, 0.07), transparent 45%),
        radial-gradient(circle at 80% 85%, rgba(184, 144, 122, 0.06), transparent 50%),
        var(--parchment);
}

/* Crosshair frame marks at corners */
.frame-marks {
    position: absolute;
    inset: 0;
    pointer-events: none;
    color: var(--slate);
    opacity: 0.45;
    font-family: var(--font-mono);
    font-size: 0.8rem;
}
.mark {
    position: absolute;
    font-weight: 400;
}
.mark-tl { top: 12px; left: 18px; }
.mark-tr { top: 12px; right: 18px; }
.mark-bl { bottom: 12px; left: 18px; }
.mark-br { bottom: 12px; right: 18px; }

.meta-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--slate);
    opacity: 0.7;
    z-index: 5;
}

.meta-line .code {
    padding: 0 10px;
}

.meta-bottom .code.blink {
    color: var(--gold);
    animation: blink 2.4s ease-in-out infinite;
}

@keyframes blink {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* Honeycomb grid */
.honeycomb {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--row-overlap) * -1);
    margin: 8px 0;
    perspective: 1200px;
}

.hex-row {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: calc(var(--row-overlap) * -1);
}

.hex-row.offset {
    transform: translateX(calc(var(--hex-w) / 2 + 2px));
}

.hex {
    position: relative;
    width: var(--hex-w);
    height: var(--hex-h);
    clip-path: var(--hex-clip);
    -webkit-clip-path: var(--hex-clip);
    background: var(--parchment);
    transform: perspective(600px) rotateX(0deg) rotateY(0deg);
    transform-style: preserve-3d;
    transition: transform 0.25s ease-out, filter 0.3s ease, background-color 0.4s ease;
    will-change: transform;
    cursor: default;
    overflow: hidden;
}

.hex::before {
    content: "";
    position: absolute;
    inset: 1px;
    clip-path: var(--hex-clip);
    -webkit-clip-path: var(--hex-clip);
    background: inherit;
    z-index: 0;
    transition: opacity 0.3s ease;
}

.hex.tone-parchment { background: var(--parchment); }
.hex.tone-rose      { background: var(--rose); }
.hex.tone-sage      { background: var(--sage); }
.hex.tone-charcoal  { background: var(--charcoal); }

/* Tilt-3d on hover via JS-driven CSS variables */
.hex {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    --shadow-x: 0px;
    --shadow-y: 0px;
}

.hex.is-hovered {
    transform: perspective(600px) rotateY(var(--tilt-x)) rotateX(var(--tilt-y));
    filter: drop-shadow(var(--shadow-x) var(--shadow-y) 12px rgba(44, 44, 52, 0.25));
    z-index: 4;
}

.hex.is-neighbor {
    filter: drop-shadow(0 0 6px rgba(196, 168, 107, 0.35));
}

/* Content cells */
.hex.content {
    background: var(--parchment);
    border: 1px solid transparent;
}

.hex.content .hex-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 14%;
    opacity: 0.55;
    transition: opacity 0.35s ease;
    z-index: 2;
}

.hex.content.is-hovered .hex-inner {
    opacity: 1;
}

/* Outline/ring for content cells via inset clip */
.hex.content::after {
    content: "";
    position: absolute;
    inset: 2px;
    clip-path: var(--hex-clip);
    -webkit-clip-path: var(--hex-clip);
    background: var(--parchment);
    z-index: 1;
}

.hex.content.dark::after {
    background: var(--charcoal);
}

.hex.content.tone-rose::after {
    background: var(--rose);
}

.hex.content .hex-inner > * {
    position: relative;
}

.name {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1rem, 1.6vw, 1.5rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--slate);
    line-height: 1;
    margin-bottom: 6px;
}

.tag {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sage);
}

.bio {
    font-family: var(--font-body);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    line-height: 1.5;
    color: var(--slate);
    max-width: 18ch;
}

.bio-dark {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--parchment);
    line-height: 1.7;
}

.bio-dark.muted {
    color: var(--gold);
    font-size: 0.6rem;
    opacity: 0.85;
}

.signature {
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 1rem;
    color: var(--slate);
    letter-spacing: 0.06em;
}

.link-label {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--charcoal);
    margin-bottom: 6px;
    opacity: 0.75;
}

.link {
    display: block;
    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: lowercase;
    color: var(--charcoal);
    text-decoration: none;
    line-height: 1.7;
    transition: color 0.2s ease, transform 0.2s ease;
}

.link:hover {
    color: var(--gold);
    transform: translateX(2px);
}

/* Motif cells */
.hex.motif .motif-svg {
    position: absolute;
    inset: 12%;
    width: 76%;
    height: 76%;
    z-index: 2;
    opacity: 0.85;
    transition: opacity 0.3s ease;
}

.hex.motif.is-hovered .motif-svg {
    opacity: 1;
}

.hex.motif .coord {
    position: absolute;
    bottom: 18%;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sage);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 3;
    white-space: nowrap;
}

.hex.motif.tone-charcoal .coord {
    color: var(--gold);
}

.hex.motif.is-hovered .coord {
    opacity: 0.95;
}

/* Empty cells - subtle texture */
.hex.empty {
    position: relative;
}

.hex.empty::after {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: var(--hex-clip);
    -webkit-clip-path: var(--hex-clip);
    background:
        repeating-linear-gradient(
            45deg,
            transparent 0,
            transparent 6px,
            rgba(74, 74, 82, 0.03) 6px,
            rgba(74, 74, 82, 0.03) 7px
        );
    opacity: 0.6;
    pointer-events: none;
}

.hex.empty.tone-charcoal::after {
    background:
        repeating-linear-gradient(
            45deg,
            transparent 0,
            transparent 6px,
            rgba(196, 168, 107, 0.05) 6px,
            rgba(196, 168, 107, 0.05) 7px
        );
}

/* Active selection accent */
.hex.is-selected {
    outline: none;
}

.hex.is-selected::before {
    box-shadow: inset 0 0 0 1.5px var(--gold);
}

/* Responsive: keep single viewport feel down to small screens */
@media (max-width: 900px) {
    :root {
        --hex-w: clamp(74px, 14vw, 130px);
    }
    .meta-line .code:nth-child(2) { display: none; }
    .name { font-size: 0.85rem; }
    .bio { font-size: 0.62rem; }
}

@media (max-width: 600px) {
    :root {
        --hex-w: clamp(58px, 18vw, 110px);
    }
    .stage { padding: 14px 16px; }
    .meta-line { font-size: 0.55rem; }
    .hex.motif .coord { font-size: 0.45rem; }
}