/* ===========================================================================
   toron.day - vaporwave nostalgia refracted through a honeycomb prism
   Earthed-vaporwave, creamy-pastel, hexagonal-honeycomb tessellation
   =========================================================================== */

:root {
    --bg-base: #FFF8F0;
    --bg-deep: #F5EBE0;
    --bg-bottom: #FFF0E8;
    --primary-accent: #D4A0C0;
    --secondary-accent: #A8C8B8;
    --tertiary-accent: #C8B8D8;
    --text-primary: #5B4A6B;
    --text-secondary: #6B5E52;
    --warm-shadow: #E8D5C8;
    --bokeh-a: #F0D0B8;
    --bokeh-b: #D8C0E0;
    --bokeh-c: #C0D8D0;
    --cell-border: #E8DDD0;
    --warm-taupe: #B8A090;

    --hex-clip: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    --hex-w: 200px;
    --hex-h: 230px;
    --grain-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.36  0 0 0 0 0.29  0 0 0 0 0.32  0 0 0 0.85 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>");
}

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

html {
    scroll-behavior: smooth;
    background: var(--bg-base);
}

body {
    font-family: 'Karla', 'Inter', system-ui, sans-serif;
    color: var(--text-secondary);
    line-height: 1.65;
    letter-spacing: 0.01em;
    overflow-x: hidden;
    min-height: 100vh;
    background:
        var(--grain-svg),
        linear-gradient(180deg,
            var(--bg-base) 0%,
            var(--bg-deep) 50%,
            var(--bg-bottom) 100%);
    background-attachment: fixed;
    background-blend-mode: multiply, normal;
    background-size: 180px 180px, cover;
    position: relative;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at 20% 10%, rgba(240,208,184,0.18), transparent 55%),
                radial-gradient(ellipse at 80% 90%, rgba(216,192,224,0.15), transparent 60%),
                radial-gradient(ellipse at 50% 50%, rgba(192,216,208,0.10), transparent 65%);
    pointer-events: none;
    z-index: 0;
}

/* =========================
   BOKEH FIELD
   ========================= */
.bokeh-field {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.bokeh {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    will-change: transform, opacity;
    filter: blur(0.5px);
    transition: opacity 0.6s ease;
}

.bokeh.bokeh-a { background: radial-gradient(circle, rgba(240,208,184,0.65) 0%, rgba(240,208,184,0) 70%); }
.bokeh.bokeh-b { background: radial-gradient(circle, rgba(216,192,224,0.55) 0%, rgba(216,192,224,0) 70%); }
.bokeh.bokeh-c { background: radial-gradient(circle, rgba(192,216,208,0.55) 0%, rgba(192,216,208,0) 70%); }

@keyframes bokeh-drift-a {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(40px, -30px) scale(1.06); }
    66%      { transform: translate(-25px, 25px) scale(0.96); }
}
@keyframes bokeh-drift-b {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-50px, -40px) scale(1.08); }
}
@keyframes bokeh-drift-c {
    0%, 100% { transform: translate(0, 0) scale(0.98); }
    25%      { transform: translate(20px, 35px) scale(1.04); }
    75%      { transform: translate(-30px, -20px) scale(1.02); }
}

/* =========================
   STREAM CONTAINER
   ========================= */
.honeycomb-stream {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 4rem 2rem 6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* =========================
   CLUSTER (SECTION)
   ========================= */
.cluster {
    position: relative;
    width: 100%;
    min-height: 90vh;
    padding: 2rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: -28px; /* tessellation overlap, controlled per-row below */
    animation: breathe 9s ease-in-out infinite;
    transform-origin: center center;
}

@keyframes breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.012); }
}

/* =========================
   HEX ROW LAYOUT (true tessellation)
   ========================= */
.hex-row {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* Negative margin pulls subsequent rows up so flat-top hexagons interlock.
       For flat-top hexes with H = 230, the row stacking offset = H * 0.75 = 172.5
       The row should be pulled up by 0.25 * H = 57.5px from default */
    margin-top: -58px;
}

.hex-row:first-child { margin-top: 0; }

/* Offset row: shift horizontally by half a cell width for honeycomb tessellation */
.offset-row {
    transform: translateX(0);
}

.hex-row-queen {
    margin-top: -58px;
    margin-bottom: -58px;
}

/* =========================
   HEX CELL
   ========================= */
.hex {
    position: relative;
    width: var(--hex-w);
    height: var(--hex-h);
    margin: 0 6px;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                filter 0.4s ease;
    will-change: transform;
    opacity: 0;
    transform: translateY(40px) scale(0.92);
}

.hex.is-revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.hex-inner {
    position: absolute;
    inset: 0;
    clip-path: var(--hex-clip);
    -webkit-clip-path: var(--hex-clip);
    background:
        var(--grain-svg),
        linear-gradient(135deg, rgba(255,248,240,0.96) 0%, rgba(245,235,224,0.86) 100%);
    background-size: 120px 120px, cover;
    background-blend-mode: multiply, normal;
    border: 1.5px solid var(--cell-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.4rem 1.6rem;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: filter 0.4s ease, background 0.6s ease;
}

/* Cell color variations */
.hex-color-a .hex-inner {
    background:
        var(--grain-svg),
        linear-gradient(135deg, #FAEAE0 0%, #F0D8C8 100%);
    background-size: 120px 120px, cover;
    background-blend-mode: multiply, normal;
}
.hex-color-b .hex-inner {
    background:
        var(--grain-svg),
        linear-gradient(135deg, #EDE0EA 0%, #E0CCE0 100%);
    background-size: 120px 120px, cover;
    background-blend-mode: multiply, normal;
}
.hex-color-c .hex-inner {
    background:
        var(--grain-svg),
        linear-gradient(135deg, #E4EDE5 0%, #C8D8C8 100%);
    background-size: 120px 120px, cover;
    background-blend-mode: multiply, normal;
}

/* =========================
   HEX SHADOW (rendered as pseudo-element with hex clip)
   ========================= */
.hex::before {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: var(--hex-clip);
    -webkit-clip-path: var(--hex-clip);
    background: rgba(107, 94, 82, 0.08);
    transform: translateY(2px) scale(0.99);
    z-index: -1;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.4s ease;
    filter: blur(8px);
}

.hex:hover {
    transform: translateY(-6px) scale(1.012);
    z-index: 5;
}

.hex:hover::before {
    transform: translateY(8px) scale(0.98);
    background: rgba(107, 94, 82, 0.16);
    filter: blur(14px);
}

.hex.is-rippling {
    animation: ripple-pulse 0.45s ease-out;
}

@keyframes ripple-pulse {
    0%   { transform: translateY(-6px) scale(1.012); }
    50%  { transform: translateY(-9px) scale(1.04); }
    100% { transform: translateY(-6px) scale(1.012); }
}

/* Per-cell micro-breathe (offset by .hex:nth-child) */
.hex:nth-child(1) { animation: cell-micro 7s ease-in-out -0.0s infinite alternate; }
.hex:nth-child(2) { animation: cell-micro 7s ease-in-out -0.6s infinite alternate; }
.hex:nth-child(3) { animation: cell-micro 7s ease-in-out -1.2s infinite alternate; }
.hex:nth-child(4) { animation: cell-micro 7s ease-in-out -1.8s infinite alternate; }

@keyframes cell-micro {
    from { filter: brightness(1) saturate(1); }
    to   { filter: brightness(1.02) saturate(1.04); }
}

/* =========================
   QUEEN CELL
   ========================= */
.hex-queen {
    width: calc(var(--hex-w) * 1.95);
    height: calc(var(--hex-h) * 1.95);
    margin: 0;
    z-index: 3;
}

.hex-queen .hex-inner {
    border-color: var(--warm-shadow);
    background:
        var(--grain-svg),
        radial-gradient(ellipse at center, #FFFAF2 0%, #F5E8D8 100%);
    background-size: 120px 120px, cover;
    background-blend-mode: multiply, normal;
    padding: 3rem 2.4rem;
    gap: 0.8rem;
}

.hex-queen::after {
    content: "";
    position: absolute;
    inset: -10%;
    clip-path: var(--hex-clip);
    -webkit-clip-path: var(--hex-clip);
    border: 1.5px solid var(--primary-accent);
    background: transparent;
    opacity: 0;
    pointer-events: none;
    animation: pulse-ring 6s ease-out infinite;
}

@keyframes pulse-ring {
    0%   { transform: scale(0.85); opacity: 0; border-color: var(--primary-accent); }
    20%  { opacity: 0.55; }
    100% { transform: scale(1.45); opacity: 0; }
}

/* =========================
   NAVIGATION CELLS
   ========================= */
.hex-nav {
    width: calc(var(--hex-w) * 0.9);
    height: calc(var(--hex-h) * 0.9);
}

.hex-nav .hex-inner {
    background:
        var(--grain-svg),
        linear-gradient(135deg, rgba(212,160,192,0.18) 0%, rgba(200,184,216,0.18) 100%),
        #FFF5E8;
    background-size: 120px 120px, cover, cover;
    background-blend-mode: multiply, normal, normal;
}

.nav-label {
    font-family: 'Bellota', 'Karla', system-ui, serif;
    font-weight: 300;
    font-size: 0.78rem;
    text-transform: lowercase;
    letter-spacing: 0.12em;
    color: var(--warm-taupe);
    transition: color 0.4s ease, text-shadow 0.4s ease;
    animation: nav-pulse 3.4s ease-in-out infinite;
}

@keyframes nav-pulse {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1; }
}

.hex-nav:hover .nav-label {
    color: var(--primary-accent);
    text-shadow: 0 0 18px rgba(212, 160, 192, 0.55);
}

/* =========================
   TYPOGRAPHY
   ========================= */
.display-title {
    font-family: 'Anybody', 'Inter', system-ui, sans-serif;
    font-variation-settings: 'wdth' 125, 'wght' 300;
    font-size: clamp(2rem, 6vw, 4.5rem);
    color: var(--text-primary);
    line-height: 0.95;
    letter-spacing: -0.01em;
    margin: 0;
    transition: font-variation-settings 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                letter-spacing 0.6s ease;
    will-change: font-variation-settings;
}

.display-title.is-shy {
    font-variation-settings: 'wdth' 85, 'wght' 300;
    letter-spacing: -0.04em;
}

.display-sub {
    font-family: 'Anybody', 'Inter', system-ui, sans-serif;
    font-variation-settings: 'wdth' 130, 'wght' 250;
    font-size: clamp(1.6rem, 4.4vw, 3rem);
    color: var(--text-primary);
    margin: 0.4rem 0 0.6rem;
    transition: font-variation-settings 0.5s ease;
}

.hex-queen:hover .display-sub,
.hex-queen:hover .display-title {
    font-variation-settings: 'wdth' 92, 'wght' 320;
}

.title-tag {
    font-family: 'Bellota', 'Karla', serif;
    font-weight: 300;
    font-size: 0.82rem;
    color: var(--warm-taupe);
    text-transform: lowercase;
    letter-spacing: 0.08em;
    margin-top: 0.4rem;
    max-width: 80%;
}

.cluster-text {
    font-family: 'Karla', system-ui, sans-serif;
    font-weight: 300;
    font-size: clamp(0.85rem, 1.2vw, 1.05rem);
    color: var(--text-secondary);
    line-height: 1.65;
    letter-spacing: 0.01em;
    max-width: 78%;
    margin: 0.4rem auto 0;
}

.hex-word {
    font-family: 'Anybody', 'Inter', system-ui, sans-serif;
    font-variation-settings: 'wdth' 115, 'wght' 320;
    font-size: 1.05rem;
    color: var(--text-primary);
    text-transform: lowercase;
    letter-spacing: 0.02em;
    transition: font-variation-settings 0.5s ease;
}

.hex:hover .hex-word {
    font-variation-settings: 'wdth' 90, 'wght' 380;
}

.meta-label {
    display: block;
    font-family: 'Bellota', serif;
    font-weight: 300;
    font-size: 0.72rem;
    color: var(--warm-taupe);
    text-transform: lowercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.4rem;
}

.contact-link {
    color: inherit;
    text-decoration: none;
}

.contact-word {
    color: var(--primary-accent);
    font-variation-settings: 'wdth' 110, 'wght' 400;
}

.hex-glow .hex-inner {
    background:
        var(--grain-svg),
        radial-gradient(ellipse at center, #FFEFE5 0%, #F0D0B8 100%);
    background-size: 120px 120px, cover;
    background-blend-mode: multiply, normal;
    border-color: var(--primary-accent);
    box-shadow: inset 0 0 30px rgba(212, 160, 192, 0.25);
    animation: glow-pulse 4.5s ease-in-out infinite;
}

@keyframes glow-pulse {
    0%, 100% { box-shadow: inset 0 0 28px rgba(212, 160, 192, 0.20); }
    50%      { box-shadow: inset 0 0 50px rgba(212, 160, 192, 0.42); }
}

/* =========================
   CURVE DIVIDERS
   ========================= */
.curve-divider {
    width: 100%;
    height: 70px;
    margin: -10px 0;
    display: block;
    position: relative;
    z-index: 2;
}

.curve-divider .curve-stroke {
    fill: none;
    stroke: var(--cell-border);
    stroke-width: 1.5;
    opacity: 0.85;
}

.curve-divider .curve-fill {
    fill: rgba(232, 213, 200, 0.18);
}

/* =========================
   GLYPHS / SVG
   ========================= */
.essence-glyph {
    width: 110px;
    height: 100px;
    margin-bottom: 0.4rem;
}

.essence-glyph .glyph-hex {
    fill: none;
    stroke: var(--secondary-accent);
    stroke-width: 1.5;
    opacity: 0.7;
}
.essence-glyph .glyph-curve {
    fill: none;
    stroke: var(--primary-accent);
    stroke-width: 2;
    stroke-linecap: round;
}
.essence-glyph .glyph-dot {
    fill: var(--tertiary-accent);
}

.vapor-glyph {
    width: 60px;
    height: 60px;
    display: block;
    margin: 0 auto 0.6rem;
}

.glyph-line {
    stroke: var(--secondary-accent);
    stroke-width: 1.6;
    fill: none;
    stroke-linecap: round;
}
.glyph-line-thin {
    stroke: var(--primary-accent);
    stroke-width: 0.8;
    opacity: 0.65;
}
.glyph-shape {
    fill: var(--primary-accent);
    opacity: 0.55;
}
.glyph-shape-inner {
    fill: var(--tertiary-accent);
    opacity: 0.7;
}
.glyph-column-pediment {
    fill: var(--primary-accent);
    opacity: 0.6;
}
.pixel-stars rect {
    fill: var(--tertiary-accent);
    opacity: 0.7;
}
.constellation {
    width: 80%;
    max-width: 200px;
    margin: 0.6rem auto 0;
}
.constellation rect {
    fill: var(--tertiary-accent);
    opacity: 0.55;
}

/* =========================
   FOOTER
   ========================= */
.cluster-footer {
    margin-top: 4rem;
    padding: 2rem 1rem;
    width: 100%;
    text-align: center;
    font-family: 'Bellota', serif;
    font-weight: 300;
    font-size: 0.78rem;
    text-transform: lowercase;
    letter-spacing: 0.18em;
    color: var(--warm-taupe);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: center;
}

.footer-pulse {
    color: var(--primary-accent);
    font-size: 1.4rem;
    animation: footer-bob 4s ease-in-out infinite;
}

@keyframes footer-bob {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50%      { transform: translateY(-4px); opacity: 1; }
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 900px) {
    :root {
        --hex-w: 150px;
        --hex-h: 173px;
    }
    .hex-row { margin-top: -44px; }
    .hex-row-queen { margin-top: -44px; margin-bottom: -44px; }
    .hex-queen { width: calc(var(--hex-w) * 1.7); height: calc(var(--hex-h) * 1.7); }
    .display-title { font-size: clamp(1.6rem, 7vw, 3rem); }
}

@media (max-width: 640px) {
    :root {
        --hex-w: 120px;
        --hex-h: 138px;
    }
    .hex-row { margin-top: -34px; }
    .hex-row-queen { margin-top: -34px; margin-bottom: -34px; }
    .hex-queen {
        width: calc(var(--hex-w) * 1.85);
        height: calc(var(--hex-h) * 1.85);
    }
    .hex { margin: 0 3px; }
    .cluster { min-height: 80vh; gap: 0; }
    .display-title {
        font-variation-settings: 'wdth' 100, 'wght' 320;
    }
    .hex-inner { padding: 1.4rem 0.8rem; }
    .cluster-text { font-size: 0.78rem; max-width: 92%; }
    .hex-word { font-size: 0.85rem; }
}

@media (max-width: 420px) {
    :root {
        --hex-w: 96px;
        --hex-h: 110px;
    }
    .hex-row { margin-top: -27px; }
    .hex-row-queen { margin-top: -27px; margin-bottom: -27px; }
    .hex-inner { padding: 0.7rem 0.4rem; }
    .meta-label { font-size: 0.6rem; margin-bottom: 0.2rem; }
    .hex-word { font-size: 0.7rem; }
    .vapor-glyph { width: 36px; height: 36px; margin-bottom: 0.2rem; }
    .essence-glyph { width: 64px; height: 60px; }
    .title-tag { font-size: 0.68rem; }
}