/* ============================================
   ppuzzl.in — Blobitecture + Sci-Fi HUD
   ============================================ */

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

:root {
    --aurora-green: #6ee7b7;
    --aurora-teal: #14b8a6;
    --aurora-violet: #8b5cf6;
    --aurora-pink: #c084fc;
    --void-black: #0a0f0d;
    --membrane-white: #e0f0e8;
    --scan-line: #5eead4;
    --fog-gray: #1a2420;
    --sage: #b8c4be;
}

html {
    background: var(--void-black);
    color: var(--membrane-white);
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: 0.02em;
    overflow: hidden;
}

body {
    background: var(--void-black);
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

/* --- Scroll Snap Container --- */
#scroll-container {
    width: 100vw;
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
}

.panel {
    min-height: 100vh;
    width: 100%;
    scroll-snap-align: start;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* --- Aurora Gradient Animation --- */
@keyframes auroraShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.blob-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #6ee7b7, #14b8a6, #8b5cf6, #c084fc);
    background-size: 400% 400%;
    animation: auroraShift 20s ease infinite;
    opacity: 0.85;
}

/* --- Blob Morphing Animations --- */
@keyframes blobMorph1 {
    0%   { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
    25%  { border-radius: 58% 42% 55% 45% / 45% 60% 40% 55%; }
    50%  { border-radius: 50% 50% 35% 65% / 55% 40% 60% 45%; }
    75%  { border-radius: 40% 60% 65% 35% / 35% 55% 45% 65%; }
    100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
}

@keyframes blobMorph2 {
    0%   { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    33%  { border-radius: 40% 60% 60% 40% / 40% 50% 50% 60%; }
    66%  { border-radius: 55% 45% 45% 55% / 50% 60% 40% 50%; }
    100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

@keyframes blobMorph3 {
    0%   { border-radius: 45% 55% 60% 40% / 55% 45% 55% 45%; }
    50%  { border-radius: 55% 45% 40% 60% / 40% 55% 45% 55%; }
    100% { border-radius: 45% 55% 60% 40% / 55% 45% 55% 45%; }
}

/* --- Hero Membrane --- */
#membrane {
    flex-direction: column;
}

.membrane-blob {
    width: clamp(300px, 65vw, 700px);
    height: clamp(300px, 65vw, 700px);
    position: relative;
    overflow: hidden;
    animation: blobMorph1 12s ease-in-out infinite;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

.membrane-blob.visible {
    opacity: 1;
    transform: scale(1);
}

.blob-content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.logotype {
    font-family: 'Caveat', cursive;
    font-size: clamp(3rem, 8vw, 7rem);
    font-weight: 700;
    color: var(--membrane-white);
    text-shadow: 0 0 40px rgba(110, 230, 180, 0.3);
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.logotype.visible {
    opacity: 1;
}

/* HUD Ring */
.hud-ring {
    position: absolute;
    width: clamp(380px, 78vw, 820px);
    height: clamp(380px, 78vw, 820px);
    pointer-events: none;
}

.hud-ring circle {
    fill: none;
    stroke: var(--scan-line);
    stroke-width: 0.5;
    opacity: 0.4;
    stroke-dasharray: 1760;
    stroke-dashoffset: 1760;
    transition: stroke-dashoffset 1.5s ease-out;
}

.hud-ring.visible circle {
    stroke-dashoffset: 0;
}

/* Cardinal Labels */
.cardinal-labels {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.cardinal {
    position: absolute;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--scan-line);
    opacity: 0.6;
}

.cardinal-n { top: 6%; left: 50%; transform: translateX(-50%); }
.cardinal-e { top: 50%; right: 6%; transform: translateY(-50%); }
.cardinal-s { bottom: 6%; left: 50%; transform: translateX(-50%); }
.cardinal-w { top: 50%; left: 6%; transform: translateY(-50%); }

/* Enter CTA */
.enter-cta {
    position: absolute;
    bottom: 8vh;
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
    font-size: 0.8rem;
    letter-spacing: 0.35em;
    color: var(--membrane-white);
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.6s ease-out;
}

.enter-cta.visible {
    opacity: 0.6;
}

.enter-cta:hover {
    opacity: 1;
}

/* Pulse Dots */
.pulse-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--scan-line);
    animation: pulseDot 3s ease-in-out infinite;
}

@keyframes pulseDot {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(2); opacity: 0.7; }
}

/* --- HUD Overlay --- */
#hud-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 100;
}

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

.hud-bracket {
    fill: none;
    stroke: var(--scan-line);
    stroke-width: 1;
    opacity: 0.3;
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset 2s ease-out;
}

.hud-bracket.visible {
    stroke-dashoffset: 0;
}

.hud-reticle {
    fill: none;
    stroke: var(--scan-line);
    stroke-width: 0.3;
    opacity: 0.08;
    stroke-dasharray: 40 20;
    animation: rotateReticle 30s linear infinite;
    transform-origin: 960px 540px;
}

.hud-reticle-inner {
    stroke-dasharray: 20 40;
    animation-direction: reverse;
    animation-duration: 25s;
}

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

.hud-readout {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.hud-left { left: 20px; }
.hud-right { right: 20px; text-align: right; }

.hud-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--scan-line);
    opacity: 0.5;
    writing-mode: vertical-lr;
    text-orientation: mixed;
}

.hud-left .hud-label { writing-mode: vertical-lr; }
.hud-right .hud-label { writing-mode: vertical-rl; }

/* --- Blob Containers (content panels) --- */
.blob-container {
    position: relative;
    width: clamp(320px, 55vw, 650px);
    height: clamp(320px, 50vh, 550px);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blob-shape-2 {
    animation: blobMorph2 15s ease-in-out infinite;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    margin-left: -10vw;
}

.blob-shape-3 {
    animation: blobMorph3 22s ease-in-out infinite;
    border-radius: 45% 55% 60% 40% / 55% 45% 55% 45%;
    margin-right: -8vw;
}

.blob-shape-4 {
    animation: blobMorph1 18s ease-in-out infinite;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    margin-left: 5vw;
}

.blob-shape-5 {
    animation: blobMorph2 14s ease-in-out infinite;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

.blob-inner {
    position: relative;
    z-index: 2;
    padding: clamp(2rem, 5vw, 4rem);
    max-width: 500px;
    text-align: center;
}

.section-title {
    font-family: 'Caveat', cursive;
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 700;
    color: var(--membrane-white);
    text-shadow: 0 0 40px rgba(110, 230, 180, 0.3);
    margin-bottom: 1rem;
}

.body-text {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(0.95rem, 1.1vw, 1.1rem);
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.02em;
    color: var(--sage);
}

/* --- Panel Reveal Animation --- */
.panel .blob-container,
.panel .blob-inner > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.panel.in-view .blob-container {
    opacity: 1;
    transform: translateY(0);
}

.panel.in-view .blob-inner > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }
.panel.in-view .blob-inner > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }
.panel.in-view .blob-inner > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.5s; }
.panel.in-view .blob-inner > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.7s; }

/* Pause blob animation when not in view */
.panel:not(.in-view) .blob-container {
    animation-play-state: paused;
}

/* --- Scan Line --- */
.scan-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--scan-line), transparent);
    opacity: 0.15;
    transform: translateY(-100%);
}

.panel.in-view .scan-line {
    animation: scanSweep 3s ease-in-out forwards;
}

@keyframes scanSweep {
    from { transform: translateY(0); }
    to { transform: translateY(100vh); }
}

/* --- Work Grid --- */
.work-grid {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin-top: 1.5rem;
}

.work-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(94, 234, 212, 0.15);
}

.work-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--scan-line);
    opacity: 0.6;
}

.work-name {
    font-family: 'Caveat', cursive;
    font-size: 1.4rem;
    color: var(--membrane-white);
}

/* --- Contact --- */
.contact-link {
    display: inline-block;
    margin-top: 1.5rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    color: var(--scan-line);
    text-decoration: none;
    border-bottom: 1px solid rgba(94, 234, 212, 0.3);
    padding-bottom: 2px;
    transition: border-color 0.3s, color 0.3s;
}

.contact-link:hover {
    color: var(--aurora-pink);
    border-color: var(--aurora-pink);
}

/* --- Collage Panels --- */
.collage-panel {
    background: var(--void-black);
}

.collage-fragment {
    position: absolute;
    pointer-events: none;
}

.frag-1 { top: 10%; left: 8%; width: 180px; opacity: 0.5; mix-blend-mode: screen; animation: driftX 25s ease-in-out infinite alternate; }
.frag-2 { top: 25%; right: 15%; width: 220px; height: 140px; opacity: 0.3; transform: rotate(-8deg); }
.frag-3 { bottom: 30%; left: 20%; opacity: 0.6; transform: rotate(12deg); }
.frag-4 { top: 15%; right: 30%; width: 100px; opacity: 0.35; mix-blend-mode: screen; animation: slowRotate 40s linear infinite; }
.frag-5 { bottom: 15%; right: 10%; opacity: 0.4; }
.frag-6 { top: 55%; left: 45%; width: 80px; height: 80px; opacity: 0.25; }
.frag-7 { top: 60%; right: 25%; opacity: 0.5; transform: rotate(-5deg); }

.frag-8 { top: 5%; right: 10%; width: 250px; opacity: 0.4; mix-blend-mode: screen; }
.frag-9 { bottom: 20%; left: 10%; width: 200px; height: 120px; opacity: 0.25; transform: rotate(6deg); }
.frag-10 { top: 40%; left: 30%; opacity: 0.5; transform: rotate(-15deg); }
.frag-11 { bottom: 30%; right: 20%; width: 90px; opacity: 0.3; mix-blend-mode: screen; animation: slowRotate 35s linear infinite reverse; }
.frag-12 { top: 20%; left: 55%; opacity: 0.35; }

.torn-paper {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a2420 0%, #0a0f0d 100%);
    border: 1px solid rgba(94, 234, 212, 0.08);
    border-radius: 2px;
    position: relative;
}

.torn-paper::before {
    content: '';
    position: absolute;
    inset: 4px;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(94, 234, 212, 0.03) 3px,
        rgba(94, 234, 212, 0.03) 4px
    );
}

.paper-dark {
    background: linear-gradient(135deg, #0a0f0d 0%, #1a2420 100%);
    border-color: rgba(139, 92, 246, 0.1);
}

.collage-text {
    font-family: 'Caveat', cursive;
    font-size: 2.5rem;
    color: var(--aurora-pink);
    opacity: 0.7;
}

.collage-text-sm {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--scan-line);
    opacity: 0.5;
    line-height: 2;
}

.collage-text-kr {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.8rem;
    color: var(--aurora-violet);
    opacity: 0.5;
}

.hex-outline {
    width: 100%;
    height: 100%;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    border: 1px solid var(--aurora-teal);
    background: transparent;
    outline: 1px solid rgba(20, 184, 166, 0.2);
}

@keyframes driftX {
    from { transform: translateX(0); }
    to { transform: translateX(30px); }
}

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

/* --- Radial Navigation --- */
#nav-trigger {
    position: fixed;
    top: 24px;
    right: 24px;
    width: 32px;
    height: 32px;
    border: 1px solid var(--scan-line);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}

#nav-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--scan-line);
    animation: pulseDot 3s ease-in-out infinite;
}

#nav-trigger:hover {
    border-color: var(--aurora-pink);
}

#radial-nav {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 199;
    pointer-events: none;
}

#radial-nav.hidden {
    display: block;
}

.nav-blob {
    position: absolute;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(110, 231, 183, 0.15), rgba(139, 92, 246, 0.15));
    border: 1px solid rgba(94, 234, 212, 0.2);
    border-radius: 50% 40% 60% 50% / 40% 50% 50% 60%;
    font-family: 'Caveat', cursive;
    font-size: 1rem;
    color: var(--membrane-white);
    text-decoration: none;
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease, background 0.3s;
    backdrop-filter: blur(10px);
}

.nav-blob.show {
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;
}

.nav-blob:hover {
    background: linear-gradient(135deg, rgba(110, 231, 183, 0.3), rgba(192, 132, 252, 0.3));
}

/* Nav blob positions (radial from top-right corner) */
.nav-blob[data-index="0"].show { transform: scale(1) translate(-60px, 50px); }
.nav-blob[data-index="1"].show { transform: scale(1) translate(-110px, 10px); }
.nav-blob[data-index="2"].show { transform: scale(1) translate(-130px, 70px); }
.nav-blob[data-index="3"].show { transform: scale(1) translate(-80px, 120px); }
.nav-blob[data-index="4"].show { transform: scale(1) translate(-20px, 100px); }

/* --- Responsive --- */
@media (max-width: 768px) {
    .hud-readout { display: none; }
    .cardinal-labels { display: none; }
    #hud-svg { display: none; }
    
    .blob-container {
        width: 85vw;
        height: 60vh;
    }

    .blob-shape-2,
    .blob-shape-3,
    .blob-shape-4 {
        margin-left: 0;
        margin-right: 0;
    }
}