/* ============================================
   goomimi.com - Glitch Decoration Aesthetic
   ============================================ */

/* --- CSS Custom Properties --- */
:root {
    --midnight-blue: #0A0A2E;
    --glitch-pink: #FF3388;
    --glitch-cyan: #33CCFF;
    --noise-white: #E8E4F0;
    --artifact-yellow: #FFD23F;
    --digital-gray: #4A4A5A;
    --deep-violet: #2A1A3A;

    --font-display: 'Noto Serif Display', serif;
    --font-body: 'Noto Sans KR', sans-serif;
    --font-mono: 'Roboto Mono', monospace;
}

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

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

body {
    background-color: var(--midnight-blue);
    color: var(--noise-white);
    font-family: var(--font-body);
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.75;
    overflow-x: hidden;
    position: relative;
}

/* --- Noise Overlay --- */
#noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

/* --- SVG Filters --- */
#svg-filters {
    position: absolute;
    width: 0;
    height: 0;
}

/* --- Glitch Bands --- */
#glitch-bands {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
}

.glitch-band {
    position: absolute;
    height: 2px;
    width: 100%;
    opacity: 0;
    transition: opacity 0.05s;
}

.glitch-band.active {
    opacity: 1;
}

/* --- Chromatic Aberration / Glitch Text --- */
.glitch-text {
    position: relative;
    text-shadow:
        -2px 0 var(--glitch-pink),
        2px 0 var(--glitch-cyan),
        0 0 transparent;
}

.glitch-text.animating {
    animation: chromaticBurst 0.6s ease-out;
}

@keyframes chromaticBurst {
    0% { text-shadow: 0 0 var(--glitch-pink), 0 0 var(--glitch-cyan), 0 0 transparent; }
    40% { text-shadow: -3px 0 var(--glitch-pink), 3px 0 var(--glitch-cyan), 0 0 transparent; }
    100% { text-shadow: -2px 0 var(--glitch-pink), 2px 0 var(--glitch-cyan), 0 0 transparent; }
}

/* --- Hero Section --- */
#hero {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--midnight-blue);
}

.hero-content {
    text-align: center;
    z-index: 10;
    position: relative;
}

#hero-title {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(48px, 12vw, 140px);
    color: var(--noise-white);
    letter-spacing: 0.05em;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

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

#hero-subtitle {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: clamp(18px, 3vw, 36px);
    color: var(--noise-white);
    letter-spacing: 0.35em;
    margin-top: 0.5em;
    opacity: 0;
    transition: opacity 0.5s ease;
}

#hero-subtitle.visible {
    opacity: 1;
}

.hero-tagline {
    font-family: var(--font-mono);
    font-size: clamp(11px, 1.2vw, 14px);
    color: var(--digital-gray);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-top: 1.5em;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.hero-tagline.visible {
    opacity: 1;
}

/* First retro pattern strip at bottom of hero */
#first-pattern-strip {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: repeating-linear-gradient(
        90deg,
        var(--glitch-pink) 0px,
        var(--glitch-pink) 2px,
        transparent 2px,
        transparent 12px,
        var(--glitch-cyan) 12px,
        var(--glitch-cyan) 14px,
        transparent 14px,
        transparent 24px
    );
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

#first-pattern-strip.visible {
    opacity: 0.15;
    transform: scaleX(1);
}

/* --- Content Sections --- */
.content-section {
    position: relative;
    padding: 80px 40px;
    max-width: 1200px;
    margin: 60px auto;
}

.viewport-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* --- HUD Panel Frame --- */
.hud-panel {
    position: relative;
}

.hud-frame {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 5;
}

.hud-corner {
    position: absolute;
    width: 24px;
    height: 24px;
    border-color: var(--glitch-cyan);
    border-style: solid;
    border-width: 0;
    opacity: 0;
    transition: opacity 0.4s ease, border-width 0.4s ease;
}

.hud-corner-tl {
    top: 0; left: 0;
    border-top-width: 2px;
    border-left-width: 2px;
}
.hud-corner-tr {
    top: 0; right: 0;
    border-top-width: 2px;
    border-right-width: 2px;
}
.hud-corner-bl {
    bottom: 0; left: 0;
    border-bottom-width: 2px;
    border-left-width: 2px;
}
.hud-corner-br {
    bottom: 0; right: 0;
    border-bottom-width: 2px;
    border-right-width: 2px;
}

.hud-panel.in-view .hud-corner {
    opacity: 1;
}

.hud-label {
    position: absolute;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--glitch-cyan);
    opacity: 0;
    transition: opacity 0.4s ease 0.2s;
}

.hud-label-tl {
    top: 8px;
    left: 32px;
}

.hud-label-br {
    bottom: 8px;
    right: 32px;
}

.hud-panel.in-view .hud-label {
    opacity: 0.7;
}

/* --- Panel Inner Content --- */
.panel-inner {
    position: relative;
    z-index: 10;
    padding: 20px 0;
}

.section-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(28px, 5.5vw, 64px);
    color: var(--noise-white);
    margin-bottom: 0.6em;
    line-height: 1.2;
}

.section-body {
    font-family: var(--font-body);
    color: var(--noise-white);
    max-width: 720px;
    margin-bottom: 1.5em;
    opacity: 0.88;
}

/* --- Decorative Stickers --- */
.decorative-sticker {
    position: absolute;
    width: 30px;
    height: 18px;
    opacity: 0;
    transform: scale(0) rotate(-5deg);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
    z-index: 6;
}

.hud-panel.in-view .decorative-sticker {
    opacity: 1;
    transform: scale(1) rotate(-3deg);
}

.sticker-1 {
    top: 20px;
    right: 60px;
    background: var(--glitch-pink);
    transform: rotate(-8deg);
}
.hud-panel.in-view .sticker-1 {
    transform: scale(1) rotate(-8deg);
}

.sticker-2 {
    bottom: 40px;
    left: 20px;
    background: var(--artifact-yellow);
    width: 24px;
    height: 24px;
}
.hud-panel.in-view .sticker-2 {
    transform: scale(1) rotate(4deg);
}

.sticker-3 {
    top: 30px;
    left: 30px;
    background: var(--glitch-cyan);
    width: 20px;
    height: 20px;
}
.hud-panel.in-view .sticker-3 {
    transform: scale(1) rotate(-6deg);
}

.sticker-4 {
    bottom: 20px;
    right: 40px;
    background: var(--glitch-pink);
    width: 36px;
    height: 14px;
}
.hud-panel.in-view .sticker-4 {
    transform: scale(1) rotate(3deg);
}

.sticker-5 {
    top: 50px;
    right: 20px;
    background: var(--artifact-yellow);
    width: 26px;
    height: 26px;
    border-radius: 50%;
}
.hud-panel.in-view .sticker-5 {
    transform: scale(1) rotate(0deg);
}

/* --- Retro Pattern Zones --- */
.retro-zone {
    width: 100%;
    height: 60px;
    position: relative;
    overflow: hidden;
}

.retro-zigzag {
    background: repeating-linear-gradient(
        135deg,
        var(--glitch-pink) 0px,
        var(--glitch-pink) 10px,
        transparent 10px,
        transparent 20px,
        var(--glitch-cyan) 20px,
        var(--glitch-cyan) 30px,
        transparent 30px,
        transparent 40px
    );
    opacity: 0.12;
}

.retro-dots {
    background: radial-gradient(
        circle 4px at 12px 12px,
        var(--artifact-yellow) 3px,
        transparent 4px
    );
    background-size: 24px 24px;
    opacity: 0.15;
}

.retro-chevron {
    background: repeating-linear-gradient(
        45deg,
        var(--glitch-cyan) 0px,
        var(--glitch-cyan) 6px,
        transparent 6px,
        transparent 12px
    ),
    repeating-linear-gradient(
        -45deg,
        var(--glitch-pink) 0px,
        var(--glitch-pink) 6px,
        transparent 6px,
        transparent 12px
    );
    opacity: 0.1;
}

/* --- Zoom-Focus Gallery --- */
.zoom-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
}

.gallery-item {
    position: relative;
    cursor: pointer;
    transition: transform 0.35s ease, filter 0.35s ease;
    will-change: transform, filter;
}

.gallery-item:hover {
    transform: scale(1.15);
    z-index: 20;
}

.gallery-item:hover .gallery-visual {
    animation: galleryGlitch 0.2s ease-out;
}

.gallery-item:not(:hover) {
    transition: transform 0.35s ease, filter 0.35s ease;
}

.zoom-gallery:hover .gallery-item:not(:hover) {
    filter: blur(1px);
}

@keyframes galleryGlitch {
    0% { text-shadow: -2px 0 var(--glitch-pink), 2px 0 var(--glitch-cyan); }
    30% { text-shadow: -5px 0 var(--glitch-pink), 5px 0 var(--glitch-cyan); }
    100% { text-shadow: -2px 0 var(--glitch-pink), 2px 0 var(--glitch-cyan); }
}

.gallery-item-inner {
    background: var(--deep-violet);
    border: 1px solid rgba(51, 204, 255, 0.15);
    padding: 28px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.gallery-item-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        180deg,
        rgba(51, 204, 255, 0.03) 0%,
        transparent 50%
    );
    pointer-events: none;
}

.gallery-visual {
    width: 80px;
    height: 80px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.gallery-glyph {
    font-size: 40px;
    color: var(--noise-white);
    text-shadow:
        -2px 0 var(--glitch-pink),
        2px 0 var(--glitch-cyan);
}

.gallery-visual-1 { background: radial-gradient(circle, rgba(255, 51, 136, 0.15) 0%, transparent 70%); }
.gallery-visual-2 { background: radial-gradient(circle, rgba(51, 204, 255, 0.15) 0%, transparent 70%); }
.gallery-visual-3 { background: radial-gradient(circle, rgba(255, 210, 63, 0.15) 0%, transparent 70%); }
.gallery-visual-4 { background: radial-gradient(circle, rgba(255, 51, 136, 0.12) 0%, transparent 70%); }
.gallery-visual-5 { background: radial-gradient(circle, rgba(51, 204, 255, 0.12) 0%, transparent 70%); }
.gallery-visual-6 { background: radial-gradient(circle, rgba(255, 210, 63, 0.12) 0%, transparent 70%); }

.gallery-label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    color: var(--noise-white);
    margin-bottom: 6px;
}

.gallery-desc {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--digital-gray);
    letter-spacing: 0.04em;
    line-height: 1.5;
}

/* --- Pattern Showcase --- */
.pattern-showcase {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.pattern-card {
    text-align: center;
}

.pattern-swatch {
    width: 100%;
    height: 100px;
    border: 1px solid rgba(51, 204, 255, 0.1);
    margin-bottom: 10px;
}

.pattern-zigzag {
    background: repeating-linear-gradient(
        135deg,
        var(--glitch-pink) 0px,
        var(--glitch-pink) 8px,
        var(--midnight-blue) 8px,
        var(--midnight-blue) 16px,
        var(--glitch-cyan) 16px,
        var(--glitch-cyan) 24px,
        var(--midnight-blue) 24px,
        var(--midnight-blue) 32px
    );
}

.pattern-dots-swatch {
    background: radial-gradient(
        circle 3px,
        var(--artifact-yellow) 2px,
        transparent 3px
    );
    background-size: 16px 16px;
    background-color: var(--deep-violet);
}

.pattern-chevron {
    background: repeating-linear-gradient(
        60deg,
        var(--glitch-cyan) 0px,
        var(--glitch-cyan) 4px,
        var(--deep-violet) 4px,
        var(--deep-violet) 8px
    ),
    repeating-linear-gradient(
        -60deg,
        var(--glitch-pink) 0px,
        var(--glitch-pink) 4px,
        var(--deep-violet) 4px,
        var(--deep-violet) 8px
    );
    background-blend-mode: screen;
}

.pattern-grid {
    background:
        linear-gradient(var(--glitch-cyan) 1px, transparent 1px),
        linear-gradient(90deg, var(--glitch-pink) 1px, transparent 1px);
    background-size: 16px 16px;
    background-color: var(--deep-violet);
}

.pattern-name {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--digital-gray);
    letter-spacing: 0.1em;
}

/* --- Adornment Grid --- */
.adornment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
    text-align: center;
}

.adornment-cell {
    padding: 30px 20px;
    border: 1px solid rgba(51, 204, 255, 0.1);
    background: rgba(42, 26, 58, 0.4);
    transition: border-color 0.3s ease;
}

.adornment-cell:hover {
    border-color: rgba(255, 51, 136, 0.4);
}

.adornment-icon {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 900;
    color: var(--noise-white);
    text-shadow:
        -2px 0 var(--glitch-pink),
        2px 0 var(--glitch-cyan);
    margin-bottom: 12px;
    line-height: 1.2;
}

.adornment-text {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--digital-gray);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* --- Closing Section --- */
.closing-section {
    flex-direction: column;
    text-align: center;
    min-height: 80vh;
}

.closing-content {
    z-index: 10;
    position: relative;
}

.closing-title {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(40px, 10vw, 120px);
    color: var(--noise-white);
    margin-bottom: 0.3em;
}

.closing-sub {
    font-family: var(--font-mono);
    font-size: clamp(12px, 1.5vw, 16px);
    color: var(--digital-gray);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin-bottom: 1em;
}

.closing-domain {
    font-family: var(--font-mono);
    font-size: clamp(14px, 2vw, 20px);
    color: var(--glitch-cyan);
    letter-spacing: 0.15em;
    opacity: 0.7;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .content-section {
        padding: 50px 24px;
        margin: 40px auto;
    }

    .zoom-gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .pattern-showcase {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .adornment-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .hud-corner {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 480px) {
    .zoom-gallery {
        grid-template-columns: 1fr;
    }

    .pattern-showcase {
        grid-template-columns: 1fr;
    }
}