/* ============================================
   nfth.ing - Hexagonal Honeycomb Garden
   Colors: #F7FFF7, #588157, #1B4332, #0B1D0E, #9B5DE5, #E76F51, #E9C46A, #D8F3DC, #2D6A4F, #344E41, #FEFAE0
   Fonts: Space Mono, IBM Plex Mono, Inter
   ============================================ */

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: 'IBM Plex Mono', monospace;
    background-color: #0B1D0E;
    color: #F7FFF7;
    overflow-x: hidden;
    cursor: none;
}

/* ---- Cursor Flare ---- */
.cursor-flare {
    position: fixed;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(233, 196, 106, 0.8) 0%, rgba(155, 93, 229, 0.3) 50%, transparent 70%);
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
    transition: width 0.2s, height 0.2s;
    mix-blend-mode: screen;
}

.cursor-flare.hovering {
    width: 48px;
    height: 48px;
}

/* ---- Ambient Overlay ---- */
.ambient-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(11, 29, 14, 0.3) 100%);
}

/* ---- Hexagonal Shape System ---- */
.hex {
    position: absolute;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.6s ease;
}

.hex-small {
    width: 80px;
    height: 92px;
}

.hex-medium {
    width: 160px;
    height: 185px;
}

.hex-large {
    width: 320px;
    height: 370px;
}

.hex-inner {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hex-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 20px;
}

.hex-flare {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.hex:hover .hex-flare {
    opacity: 1;
}

/* ---- Act Sections ---- */
.act {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.act-label {
    position: absolute;
    bottom: 40px;
    left: 40px;
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-family: 'IBM Plex Mono', monospace;
    opacity: 0.4;
    z-index: 10;
}

.act-number {
    font-size: 14px;
    font-weight: 300;
    color: #588157;
    letter-spacing: 0.15em;
}

.act-name {
    font-size: 12px;
    font-weight: 400;
    color: #D8F3DC;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

/* ---- Scroll Indicator ---- */
.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    animation: scrollBounce 2s ease-in-out infinite;
}

.scroll-arrow {
    font-size: 24px;
    color: #588157;
    opacity: 0.6;
}

@keyframes scrollBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(10px); }
}

/* ---- Hex Grid Containers ---- */
.hex-grid {
    position: relative;
    width: 100%;
    height: 100vh;
}

/* ============================================
   ACT 1: SEED
   ============================================ */
.act-seed {
    background: radial-gradient(ellipse at 50% 50%, #1B4332 0%, #0B1D0E 70%);
}

.hex-hero {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
}

.hex-hero .hex-inner {
    background: linear-gradient(135deg, #1B4332 0%, #0B1D0E 100%);
    border: 1px solid rgba(88, 129, 87, 0.3);
}

.hex-hero .hex-flare {
    background: radial-gradient(ellipse at 30% 40%, rgba(233, 196, 106, 0.35) 0%, transparent 60%);
}

.hero-title {
    font-family: 'Space Mono', monospace;
    font-size: clamp(48px, 8vw, 120px);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #F7FFF7;
    line-height: 1;
}

.hero-dot {
    color: #E76F51;
    text-shadow: 0 0 20px rgba(231, 111, 81, 0.6);
}

.hero-tagline {
    font-family: 'Inter', sans-serif;
    font-size: clamp(12px, 1.5vw, 18px);
    font-weight: 300;
    color: #D8F3DC;
    margin-top: 16px;
    letter-spacing: 0.12em;
    opacity: 0.7;
}

/* Orbit hexes for Seed */
.hex-orbit {
    opacity: 0;
    animation: fadeInOrbit 1.5s ease forwards;
}

.hex-orbit .hex-inner {
    background: rgba(27, 67, 50, 0.6);
    border: 1px solid rgba(88, 129, 87, 0.2);
}

.hex-orbit .hex-flare {
    background: radial-gradient(ellipse at 50% 50%, rgba(155, 93, 229, 0.3) 0%, transparent 70%);
}

.hex-orbit-1 { left: calc(50% - 250px); top: calc(50% - 200px); animation-delay: 0.2s; }
.hex-orbit-2 { left: calc(50% + 200px); top: calc(50% - 180px); animation-delay: 0.4s; }
.hex-orbit-3 { left: calc(50% - 300px); top: calc(50% + 50px); animation-delay: 0.6s; }
.hex-orbit-4 { left: calc(50% + 260px); top: calc(50% + 80px); animation-delay: 0.8s; }
.hex-orbit-5 { left: calc(50% - 180px); top: calc(50% + 200px); animation-delay: 1.0s; }
.hex-orbit-6 { left: calc(50% + 140px); top: calc(50% + 220px); animation-delay: 1.2s; }

@keyframes fadeInOrbit {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 0.6; transform: scale(1); }
}

/* ============================================
   ACT 2: SPROUT
   ============================================ */
.act-sprout {
    background: linear-gradient(180deg, #0B1D0E 0%, #1B4332 40%, #2D6A4F 100%);
}

.hex-sprout-1 {
    left: 50%;
    top: 25%;
    transform: translateX(-50%);
}

.hex-sprout-2 {
    left: calc(50% - 180px);
    top: 55%;
}

.hex-sprout-3 {
    left: calc(50% + 60px);
    top: 55%;
}

.hex-sprout-1 .hex-inner,
.hex-sprout-2 .hex-inner,
.hex-sprout-3 .hex-inner {
    background: linear-gradient(135deg, #2D6A4F 0%, #1B4332 100%);
    border: 1px solid rgba(88, 129, 87, 0.4);
}

.hex-sprout-1 .hex-flare { background: radial-gradient(ellipse at 40% 30%, rgba(233, 196, 106, 0.4) 0%, transparent 60%); }
.hex-sprout-2 .hex-flare { background: radial-gradient(ellipse at 60% 40%, rgba(155, 93, 229, 0.3) 0%, transparent 60%); }
.hex-sprout-3 .hex-flare { background: radial-gradient(ellipse at 30% 60%, rgba(231, 111, 81, 0.3) 0%, transparent 60%); }

.hex-label {
    font-family: 'Space Mono', monospace;
    font-size: 24px;
    font-weight: 700;
    color: #E9C46A;
    display: block;
    margin-bottom: 8px;
}

.hex-text {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 300;
    color: #D8F3DC;
    line-height: 1.5;
    opacity: 0.8;
}

/* Sprout accent hexes */
.hex-accent .hex-inner {
    background: rgba(88, 129, 87, 0.25);
}

.hex-accent .hex-flare {
    background: radial-gradient(ellipse at 50% 50%, rgba(216, 243, 220, 0.2) 0%, transparent 70%);
}

.hex-accent-s1 { left: 10%; top: 20%; }
.hex-accent-s2 { right: 10%; top: 30%; }
.hex-accent-s3 { left: 15%; bottom: 25%; }
.hex-accent-s4 { right: 15%; bottom: 20%; }
.hex-accent-s5 { left: 50%; bottom: 10%; transform: translateX(-50%); }

/* Sprout vines */
.sprout-vines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.vine-svg {
    position: absolute;
    width: 100%;
    height: 100%;
}

.vine {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    opacity: 0.3;
}

.vine.animate {
    animation: drawVine 3s ease forwards;
}

@keyframes drawVine {
    to { stroke-dashoffset: 0; }
}

/* ============================================
   ACT 3: BLOOM
   ============================================ */
.act-bloom {
    background: radial-gradient(ellipse at 50% 50%, #2D6A4F 0%, #1B4332 40%, #0B1D0E 100%);
}

.hex-bloom-center {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
}

.hex-bloom-center .hex-inner {
    background: linear-gradient(135deg, #344E41 0%, #1B4332 100%);
    border: 1px solid rgba(233, 196, 106, 0.3);
}

.hex-flare-bloom {
    background: radial-gradient(ellipse at 40% 35%, rgba(233, 196, 106, 0.5) 0%, rgba(231, 111, 81, 0.2) 40%, transparent 70%);
}

.bloom-title {
    font-family: 'Space Mono', monospace;
    font-size: clamp(36px, 5vw, 72px);
    font-weight: 700;
    color: #E9C46A;
    letter-spacing: 0.06em;
}

.bloom-text {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #D8F3DC;
    margin-top: 12px;
    line-height: 1.6;
    opacity: 0.8;
}

/* Bloom petals - positioned in a ring around center */
.hex-bloom-petal {
    z-index: 3;
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.hex-bloom-petal.visible {
    opacity: 1;
}

.hex-bloom-petal .hex-inner {
    background: rgba(45, 106, 79, 0.7);
    border: 1px solid rgba(88, 129, 87, 0.4);
}

.hex-bloom-petal .hex-flare {
    background: radial-gradient(ellipse at 50% 40%, rgba(233, 196, 106, 0.3) 0%, transparent 60%);
}

.hex-bloom-p1 { left: calc(50% - 80px); top: calc(50% - 280px); }
.hex-bloom-p2 { left: calc(50% + 180px); top: calc(50% - 160px); }
.hex-bloom-p3 { left: calc(50% + 180px); top: calc(50% + 60px); }
.hex-bloom-p4 { left: calc(50% - 80px); top: calc(50% + 180px); }
.hex-bloom-p5 { left: calc(50% - 320px); top: calc(50% + 60px); }
.hex-bloom-p6 { left: calc(50% - 320px); top: calc(50% - 160px); }

.petal-icon {
    font-size: 32px;
    display: block;
    margin-bottom: 8px;
    color: #E9C46A;
}

.petal-label {
    font-family: 'Space Mono', monospace;
    font-size: 16px;
    font-weight: 700;
    color: #F7FFF7;
    letter-spacing: 0.05em;
}

/* Bloom particles container */
.bloom-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.bloom-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #E9C46A;
    opacity: 0;
    animation: floatParticle 4s ease-in-out infinite;
}

@keyframes floatParticle {
    0% { opacity: 0; transform: translateY(0) scale(0.5); }
    50% { opacity: 0.8; transform: translateY(-40px) scale(1); }
    100% { opacity: 0; transform: translateY(-80px) scale(0.3); }
}

/* ============================================
   ACT 4: POLLINATE
   ============================================ */
.act-pollinate {
    background: linear-gradient(180deg, #0B1D0E 0%, #1B4332 50%, #344E41 100%);
}

#network-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hex-pollinate {
    z-index: 3;
}

.hex-poll-1 { left: 20%; top: 30%; }
.hex-poll-2 { left: 50%; top: 50%; transform: translateX(-50%); }
.hex-poll-3 { right: 20%; top: 35%; }

.hex-pollinate .hex-inner {
    background: linear-gradient(135deg, #344E41 0%, #1B4332 100%);
    border: 1px solid rgba(155, 93, 229, 0.3);
}

.hex-pollinate .hex-flare {
    background: radial-gradient(ellipse at 40% 50%, rgba(155, 93, 229, 0.4) 0%, transparent 60%);
}

/* Pollen hexes */
.hex-pollen {
    z-index: 2;
    opacity: 0.4;
}

.hex-pollen .hex-inner {
    background: rgba(155, 93, 229, 0.15);
}

.hex-pollen .hex-flare {
    background: radial-gradient(ellipse at 50% 50%, rgba(233, 196, 106, 0.25) 0%, transparent 70%);
}

.hex-pollen-1 { left: 8%; top: 15%; }
.hex-pollen-2 { right: 12%; top: 18%; }
.hex-pollen-3 { left: 35%; top: 10%; }
.hex-pollen-4 { right: 30%; top: 70%; }
.hex-pollen-5 { left: 5%; bottom: 20%; }
.hex-pollen-6 { right: 8%; bottom: 25%; }
.hex-pollen-7 { left: 45%; bottom: 12%; }
.hex-pollen-8 { left: 70%; top: 65%; }

/* ============================================
   ACT 5: SCATTER
   ============================================ */
.act-scatter {
    background: radial-gradient(ellipse at 50% 40%, #1B4332 0%, #0B1D0E 70%);
    min-height: 120vh;
}

.hex-scatter-center {
    left: 50%;
    top: 35%;
    transform: translate(-50%, -50%);
    z-index: 5;
}

.hex-scatter-center .hex-inner {
    background: linear-gradient(135deg, #1B4332 0%, #0B1D0E 100%);
    border: 1px solid rgba(231, 111, 81, 0.3);
}

.hex-flare-scatter {
    background: radial-gradient(ellipse at 50% 40%, rgba(231, 111, 81, 0.4) 0%, rgba(233, 196, 106, 0.2) 40%, transparent 70%);
}

.scatter-title {
    font-family: 'Space Mono', monospace;
    font-size: clamp(36px, 5vw, 72px);
    font-weight: 700;
    color: #E76F51;
    letter-spacing: 0.06em;
}

.scatter-text {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #D8F3DC;
    margin-top: 12px;
    line-height: 1.6;
    opacity: 0.8;
    max-width: 260px;
}

/* Seed particles - scattered from center */
.hex-seed-particle {
    z-index: 2;
    opacity: 0;
    transition: all 1.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.hex-seed-particle.scattered {
    opacity: 0.5;
}

.hex-seed-particle .hex-inner {
    background: rgba(231, 111, 81, 0.2);
}

.hex-seed-particle .hex-flare {
    background: radial-gradient(ellipse at 50% 50%, rgba(231, 111, 81, 0.3) 0%, transparent 70%);
}

.hex-sp-1 { left: 50%; top: 35%; }
.hex-sp-2 { left: 50%; top: 35%; }
.hex-sp-3 { left: 50%; top: 35%; }
.hex-sp-4 { left: 50%; top: 35%; }
.hex-sp-5 { left: 50%; top: 35%; }
.hex-sp-6 { left: 50%; top: 35%; }
.hex-sp-7 { left: 50%; top: 35%; }
.hex-sp-8 { left: 50%; top: 35%; }
.hex-sp-9 { left: 50%; top: 35%; }
.hex-sp-10 { left: 50%; top: 35%; }
.hex-sp-11 { left: 50%; top: 35%; }
.hex-sp-12 { left: 50%; top: 35%; }

/* Scatter destinations */
.hex-sp-1.scattered { left: 5%; top: 10%; }
.hex-sp-2.scattered { left: 85%; top: 8%; }
.hex-sp-3.scattered { left: 15%; top: 60%; }
.hex-sp-4.scattered { left: 75%; top: 55%; }
.hex-sp-5.scattered { left: 40%; top: 80%; }
.hex-sp-6.scattered { left: 60%; top: 75%; }
.hex-sp-7.scattered { left: 25%; top: 25%; }
.hex-sp-8.scattered { left: 90%; top: 40%; }
.hex-sp-9.scattered { left: 3%; top: 45%; }
.hex-sp-10.scattered { left: 70%; top: 20%; }
.hex-sp-11.scattered { left: 50%; top: 5%; }
.hex-sp-12.scattered { left: 30%; top: 85%; }

/* Footer CTA */
.footer-cta {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 10;
}

.cta-text {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: #D8F3DC;
    letter-spacing: 0.1em;
    margin-bottom: 24px;
    opacity: 0.7;
}

.cta-hex {
    display: inline-block;
}

.hex-cta .hex-inner {
    background: linear-gradient(135deg, #E76F51 0%, #E9C46A 100%);
    cursor: pointer;
    transition: transform 0.3s ease;
}

.hex-cta:hover .hex-inner {
    transform: scale(1.05);
}

.hex-cta .hex-flare {
    background: radial-gradient(ellipse at 40% 40%, rgba(255, 255, 255, 0.3) 0%, transparent 60%);
}

.cta-label {
    font-family: 'Space Mono', monospace;
    font-size: 20px;
    font-weight: 700;
    color: #0B1D0E;
    letter-spacing: 0.1em;
}

/* ============================================
   GLOBAL ANIMATIONS
   ============================================ */
.hex.reveal {
    animation: hexReveal 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes hexReveal {
    from { opacity: 0; transform: scale(0.6) rotate(-10deg); }
    to { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* Hex hover glow */
.hex:hover {
    z-index: 100;
}

.hex:hover .hex-inner {
    box-shadow: 0 0 40px rgba(233, 196, 106, 0.2);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .hex-large {
        width: 240px;
        height: 277px;
    }

    .hex-medium {
        width: 120px;
        height: 139px;
    }

    .hex-small {
        width: 60px;
        height: 69px;
    }

    .hex-bloom-p1 { left: calc(50% - 60px); top: calc(50% - 220px); }
    .hex-bloom-p2 { left: calc(50% + 120px); top: calc(50% - 120px); }
    .hex-bloom-p3 { left: calc(50% + 120px); top: calc(50% + 40px); }
    .hex-bloom-p4 { left: calc(50% - 60px); top: calc(50% + 140px); }
    .hex-bloom-p5 { left: calc(50% - 240px); top: calc(50% + 40px); }
    .hex-bloom-p6 { left: calc(50% - 240px); top: calc(50% - 120px); }

    .hex-poll-1 { left: 10%; top: 25%; }
    .hex-poll-3 { right: 10%; top: 30%; }

    .petal-icon { font-size: 22px; }
    .petal-label { font-size: 12px; }
    .hex-label { font-size: 18px; }
    .hex-text { font-size: 11px; }

    .hero-title {
        font-size: clamp(36px, 10vw, 72px);
    }

    .scatter-text {
        max-width: 180px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .hex-large {
        width: 180px;
        height: 208px;
    }

    .hex-medium {
        width: 100px;
        height: 116px;
    }

    .hex-orbit {
        display: none;
    }

    .hex-pollen {
        display: none;
    }
}