/* ============================================================
   saram.quest — Fairycore Honeycomb Design System
   Colors: #c9a84c, #7a5c3e, #4a3b2a, #f5edd6, #ede2c4,
           #8fa65e, #e8c44a, #3d2e1e, #f0d78c
   Fonts: Cormorant Garamond, Lora, Nanum Myeongjo
   ============================================================ */

/* === RESET & BASE === */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.8vw, 1.15rem);
    line-height: 1.72;
    letter-spacing: 0.005em;
    color: #4a3b2a;
    background: linear-gradient(180deg, #f5edd6 0%, #ede2c4 100%);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

/* Dappled sunlight spots on body */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(232, 196, 74, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 70% 10%, rgba(232, 196, 74, 0.06) 0%, transparent 35%),
        radial-gradient(circle at 40% 60%, rgba(232, 196, 74, 0.07) 0%, transparent 45%),
        radial-gradient(circle at 85% 50%, rgba(232, 196, 74, 0.05) 0%, transparent 30%),
        radial-gradient(circle at 25% 80%, rgba(232, 196, 74, 0.06) 0%, transparent 40%),
        radial-gradient(circle at 60% 90%, rgba(232, 196, 74, 0.08) 0%, transparent 35%);
}

/* === DARK OVERLAY (Entry Choreography) === */
#dark-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #3d2e1e;
    z-index: 9999;
    pointer-events: none;
    animation: eyesAdjust 1.5s ease-out forwards;
}

@keyframes eyesAdjust {
    0% { opacity: 1; }
    60% { opacity: 0.3; }
    100% { opacity: 0; }
}

/* === POLLEN PARTICLES === */
#pollen-field {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
    opacity: 0;
    animation: pollenAppear 0.5s ease-out 2s forwards;
}

@keyframes pollenAppear {
    to { opacity: 1; }
}

.pollen {
    position: absolute;
    bottom: -10px;
    border-radius: 50%;
    background: #e8c44a;
    opacity: 0;
    animation: pollenRise linear infinite;
}

@keyframes pollenRise {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    90% {
        opacity: 0.4;
    }
    100% {
        transform: translateY(calc(-100vh - 50px)) translateX(30px);
        opacity: 0;
    }
}

/* === HEXAGONAL CELL BASE === */
.hex-cell {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: #ede2c4;
    border: none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

/* Hex border using pseudo-element */
.hex-cell::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: rgba(201, 168, 76, 0.4);
    z-index: -1;
}

.hex-cell:hover {
    box-shadow: 0 0 20px rgba(232, 196, 74, 0.3), inset 0 0 15px rgba(240, 215, 140, 0.15);
}

.hex-content {
    padding: clamp(15px, 3vw, 30px);
    text-align: center;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.hex-content p {
    font-family: 'Lora', serif;
    font-size: clamp(0.8rem, 1.5vw, 1rem);
    line-height: 1.65;
    color: #4a3b2a;
    max-width: 90%;
}

/* === LENS FLARE SYSTEM === */
.lens-flare {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.4;
    background:
        radial-gradient(circle at center, rgba(232, 196, 74, 0.5) 0%, rgba(201, 168, 76, 0.15) 35%, transparent 70%),
        radial-gradient(circle at center, rgba(245, 237, 214, 0.9) 0%, transparent 20%);
    animation: lensBreath 8s ease-in-out infinite;
}

.lens-flare.small-flare {
    width: 80%;
    height: 80%;
    opacity: 0.3;
}

@keyframes lensBreath {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.4; }
    50% { transform: translate(-50%, -50%) scale(1.08); opacity: 0.6; }
}

/* Hexagonal lens artifacts */
.lens-flare::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: rgba(240, 215, 140, 0.2);
    top: 25%;
    right: 20%;
    animation: artifactDrift 12s ease-in-out infinite;
}

@keyframes artifactDrift {
    0%, 100% { transform: translate(0, 0); opacity: 0.2; }
    33% { transform: translate(8px, -5px); opacity: 0.35; }
    66% { transform: translate(-5px, 8px); opacity: 0.15; }
}

/* === NAVIGATION === */
#hex-nav {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1000;
}

.nav-trigger {
    width: 50px;
    height: 58px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: #ede2c4;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    position: relative;
}

.nav-trigger::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: rgba(201, 168, 76, 0.5);
    z-index: -1;
}

.nav-trigger:hover {
    background: #f0d78c;
}

.nav-char {
    font-family: 'Nanum Myeongjo', serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #4a3b2a;
}

.nav-cluster {
    display: none;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.nav-cluster.active {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

.nav-hex {
    width: 56px;
    height: 64px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: #ede2c4;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-family: 'Nanum Myeongjo', serif;
    font-size: 0.75rem;
    font-weight: 400;
    color: #4a3b2a;
    transition: all 0.3s ease;
    position: relative;
}

.nav-hex::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: rgba(201, 168, 76, 0.35);
    z-index: -1;
}

.nav-hex:hover {
    background: #f0d78c;
    color: #3d2e1e;
}

.nav-hex::after {
    content: attr(data-label);
    position: absolute;
    left: 65px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: 0.75rem;
    color: #7a5c3e;
    opacity: 0;
    transition: opacity 0.2s ease;
    white-space: nowrap;
}

.nav-hex:hover::after {
    opacity: 0.7;
}

/* === COLONY SECTIONS === */
.colony {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5vh 5vw;
}

.colony-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: clamp(1.8rem, 5vw, 4.2rem);
    letter-spacing: 0.01em;
    color: #c9a84c;
    text-align: center;
    margin-bottom: clamp(30px, 5vh, 60px);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.colony-title.visible {
    opacity: 1;
    transform: translateY(0);
}

/* === HERO SECTION === */
#hero {
    min-height: 100vh;
    justify-content: center;
    padding-top: 0;
}

.hero-hex-container {
    position: relative;
    width: clamp(280px, 50vw, 500px);
    height: clamp(323px, 57.7vw, 577px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-hex {
    width: clamp(250px, 45vw, 420px);
    height: clamp(289px, 52vw, 485px);
    opacity: 0;
    animation: heroFadeIn 0.8s ease-out 0.3s forwards;
}

.hero-hex .lens-flare {
    opacity: 0;
    animation: heroFlareBoom 0.8s ease-out 0.8s forwards;
}

@keyframes heroFadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes heroFlareBoom {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
    to { opacity: 0.5; transform: translate(-50%, -50%) scale(1.1); }
}

.site-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: clamp(2.2rem, 6vw, 4.5rem);
    letter-spacing: 0.01em;
    color: #3d2e1e;
    position: relative;
    z-index: 3;
}

.site-subtitle {
    font-family: 'Nanum Myeongjo', serif;
    font-weight: 400;
    font-size: clamp(0.9rem, 2vw, 1.2rem);
    color: #7a5c3e;
    margin-top: 8px;
    letter-spacing: 0.02em;
}

/* Satellite hexagons */
.satellite {
    position: absolute;
    width: clamp(40px, 6vw, 65px);
    height: clamp(46px, 7vw, 75px);
    background: rgba(237, 226, 196, 0.6);
    opacity: 0;
}

.sat-1 { top: -5%; left: 15%; animation: satDrift 0.6s ease-out 1.3s forwards, satBreathe 6s ease-in-out 2s infinite; }
.sat-2 { top: 10%; right: 5%; animation: satDrift 0.6s ease-out 1.4s forwards, satBreathe 6s ease-in-out 2.1s infinite; }
.sat-3 { top: 45%; left: -8%; animation: satDrift 0.6s ease-out 1.5s forwards, satBreathe 6s ease-in-out 2.2s infinite; }
.sat-4 { top: 45%; right: -8%; animation: satDrift 0.6s ease-out 1.6s forwards, satBreathe 6s ease-in-out 2.3s infinite; }
.sat-5 { bottom: 10%; left: 10%; animation: satDrift 0.6s ease-out 1.7s forwards, satBreathe 6s ease-in-out 2.4s infinite; }
.sat-6 { bottom: -2%; right: 15%; animation: satDrift 0.6s ease-out 1.8s forwards, satBreathe 6s ease-in-out 2.5s infinite; }

@keyframes satDrift {
    from { opacity: 0; transform: scale(0.4) translate(0, 0); }
    to { opacity: 0.7; transform: scale(1) translate(0, 0); }
}

@keyframes satBreathe {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(5px, -3px); }
    50% { transform: translate(-3px, 5px); }
    75% { transform: translate(4px, 2px); }
}

/* === FLOWER-5 CLUSTER (Colony 1) === */
#colony-1 {
    margin-top: 15vh;
    min-height: 80vh;
}

.flower-5 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
}

.flower-5 .center-hex {
    width: clamp(180px, 22vw, 320px);
    height: clamp(208px, 25.4vw, 369px);
    z-index: 2;
}

.flower-5 .petal {
    width: clamp(150px, 18vw, 260px);
    height: clamp(173px, 20.8vw, 300px);
    position: absolute;
}

.petal-1 { top: -35%; left: -45%; transform: rotate(0.3deg); }
.petal-2 { top: -35%; right: -45%; transform: rotate(-0.4deg); }
.petal-3 { bottom: -35%; left: -45%; transform: rotate(-0.3deg); }
.petal-4 { bottom: -35%; right: -45%; transform: rotate(0.5deg); }

.korean-large {
    font-family: 'Nanum Myeongjo', serif;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    color: #4a3b2a;
    mix-blend-mode: multiply;
}

.korean-accent {
    font-family: 'Nanum Myeongjo', serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: #7a5c3e;
    mix-blend-mode: multiply;
}

/* Leaf vein SVGs */
.leaf-vein {
    width: 80%;
    height: 80%;
}

.leaf-vein path {
    fill: none;
    stroke: rgba(143, 166, 94, 0.12);
    stroke-width: 1;
    stroke-linecap: round;
}

/* === BAND-7 CLUSTER (Colony 2) === */
#colony-2 {
    margin-top: 25vh;
    min-height: 70vh;
    position: relative;
}

.band-7 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.hex-row {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
}

.hex-row .hex-cell {
    width: clamp(140px, 18vw, 260px);
    height: clamp(162px, 20.8vw, 300px);
}

.row-b {
    margin-left: calc(clamp(140px, 18vw, 260px) / 2 + 3px);
}

/* Filament decoration */
.filament {
    width: 2px;
    height: 60%;
    background: linear-gradient(to bottom, transparent, #c9a84c, transparent);
    position: relative;
    animation: filamentGlow 4s ease-in-out infinite;
}

.filament::before,
.filament::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 40%;
    background: linear-gradient(to bottom, transparent, #8fa65e, transparent);
}

.filament::before {
    left: -12px;
    top: 10%;
    transform: rotate(-15deg);
}

.filament::after {
    right: -12px;
    top: 30%;
    transform: rotate(15deg);
}

.filament-2 {
    transform: rotate(45deg);
}

@keyframes filamentGlow {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Mycelium threads */
.mycelium-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.mycelium-thread {
    position: absolute;
    height: 0.3px;
    background: linear-gradient(90deg, transparent, #c9a84c, transparent);
    opacity: 0;
    animation: myceliumPulse 12s ease-in-out infinite;
}

.mycelium-thread.t1 {
    width: 200px;
    top: 40%;
    left: 20%;
    transform: rotate(-10deg);
    animation-delay: 0s;
}

.mycelium-thread.t2 {
    width: 160px;
    top: 55%;
    right: 25%;
    transform: rotate(8deg);
    animation-delay: 4s;
}

.mycelium-thread.t3 {
    width: 180px;
    top: 70%;
    left: 35%;
    transform: rotate(-5deg);
    animation-delay: 8s;
}

@keyframes myceliumPulse {
    0%, 100% { opacity: 0; }
    15% { opacity: 0.4; }
    50% { opacity: 0.6; }
    85% { opacity: 0.3; }
}

/* === DIAMOND-4 CLUSTER (Colony 3 — Card Flip) === */
#colony-3 {
    margin-top: 25vh;
    min-height: 80vh;
}

.diamond-4 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.diamond-4 .hex-row {
    justify-content: center;
}

.diamond-4 .row-b {
    margin-left: 0;
}

/* Card flip mechanics */
.flip-hex {
    perspective: 1200px;
    background: transparent;
    clip-path: none;
    cursor: pointer;
}

.flip-hex::before {
    display: none;
}

.hex-flipper {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.flip-hex.flipped .hex-flipper {
    transform: rotateY(180deg);
}

.hex-front,
.hex-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 2.5vw, 25px);
    text-align: center;
}

.hex-front {
    background: #ede2c4;
    position: relative;
}

.hex-front::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: rgba(201, 168, 76, 0.4);
    z-index: -1;
}

.hex-back {
    background: #ddd0b0;
    transform: rotateY(180deg);
}

.hex-back::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: rgba(122, 92, 62, 0.3);
    z-index: -1;
}

.hex-back p {
    font-family: 'Lora', serif;
    font-size: clamp(0.75rem, 1.3vw, 0.9rem);
    color: #4a3b2a;
    line-height: 1.6;
}

/* === TRIANGLE-3 CLUSTER (Colony 4) === */
#colony-4 {
    margin-top: 25vh;
    min-height: 70vh;
}

.triangle-3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* Root network visual */
.root-network-visual {
    width: clamp(200px, 40vw, 400px);
    margin-top: 40px;
}

.root-network-svg {
    width: 100%;
    height: auto;
}

.root-network-svg .network-root {
    fill: none;
    stroke: #8fa65e;
    stroke-width: 1;
    stroke-linecap: round;
}

/* === ROOT CONNECTORS === */
.root-connector {
    width: 100%;
    height: clamp(150px, 25vh, 300px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.root-svg {
    width: clamp(80px, 15vw, 160px);
    height: 100%;
}

.root-path {
    fill: none;
    stroke: #8fa65e;
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    transition: stroke-dashoffset 2s ease;
}

.root-path.drawn {
    stroke-dashoffset: 0;
}

.root-branch {
    stroke-width: 0.8;
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
}

.root-branch.drawn {
    stroke-dashoffset: 0;
}

/* === FINALE SECTION === */
#finale {
    margin-top: 20vh;
    min-height: 80vh;
    justify-content: center;
}

.finale-container {
    width: clamp(250px, 40vw, 400px);
    height: clamp(289px, 46.2vw, 462px);
}

.finale-hex {
    width: 100%;
    height: 100%;
}

.finale-flare {
    width: 160%;
    height: 160%;
    opacity: 0.3;
}

.korean-finale {
    font-family: 'Nanum Myeongjo', serif;
    font-size: clamp(3rem, 7vw, 6rem);
    font-weight: 700;
    color: #3d2e1e;
    mix-blend-mode: multiply;
    display: block;
    margin-bottom: 10px;
}

.finale-text {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: clamp(1.2rem, 3vw, 2rem);
    color: #7a5c3e;
    font-style: italic;
}

/* === WATERMARK LEAF VEINS === */
.watermark {
    position: fixed;
    pointer-events: none;
    z-index: 0;
    opacity: 0.06;
}

.wm-1 {
    width: clamp(150px, 20vw, 280px);
    right: 5%;
    top: 30%;
    transform: rotate(15deg);
}

.wm-2 {
    width: clamp(120px, 16vw, 220px);
    left: 3%;
    top: 55%;
    transform: rotate(-20deg);
}

.leaf-vein-watermark {
    width: 100%;
    height: auto;
}

.leaf-vein-watermark path {
    fill: none;
    stroke: #8fa65e;
    stroke-width: 1.5;
    stroke-linecap: round;
}

/* === SCROLL REVEAL ANIMATION === */
.colony {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.colony.visible {
    opacity: 1;
    transform: translateY(0);
}

#hero {
    opacity: 1;
    transform: none;
}

/* === LENS FLARE SCROLL INTENSITY === */
.lens-flare.intensified {
    opacity: 0.8;
    transition: opacity 0.5s ease;
}

/* === RESPONSIVE === */
@media (max-width: 900px) {
    .petal-1 { top: -30%; left: -35%; }
    .petal-2 { top: -30%; right: -35%; }
    .petal-3 { bottom: -30%; left: -35%; }
    .petal-4 { bottom: -30%; right: -35%; }

    .row-b {
        margin-left: calc(clamp(140px, 18vw, 260px) / 4);
    }

    .hex-row .hex-cell {
        width: clamp(110px, 25vw, 200px);
        height: clamp(127px, 28.9vw, 231px);
    }
}

@media (max-width: 600px) {
    .flower-5 .petal {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
    }

    .flower-5 {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .hex-row {
        flex-direction: column;
        align-items: center;
    }

    .row-b {
        margin-left: 0;
    }

    .hex-row .hex-cell {
        width: clamp(150px, 55vw, 250px);
        height: clamp(173px, 63.5vw, 289px);
    }

    .flower-5 .center-hex {
        width: clamp(160px, 55vw, 270px);
        height: clamp(185px, 63.5vw, 312px);
    }

    .flower-5 .petal {
        width: clamp(140px, 50vw, 230px);
        height: clamp(162px, 57.7vw, 266px);
    }

    .satellite {
        display: none;
    }

    #hex-nav {
        top: 10px;
        left: 10px;
    }

    .nav-trigger {
        width: 40px;
        height: 46px;
    }

    .nav-hex {
        width: 46px;
        height: 53px;
        font-size: 0.65rem;
    }
}

/* === MICRO TEXT === */
.micro-text {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: 0.75rem;
    opacity: 0.7;
    color: #7a5c3e;
}