/* ================================================
   gabs.quest — Cartographic Dreamscape Styles
   ================================================ */

/* --- Color Reference (from DESIGN.md) ---
   Parchment Cream: #F5ECD7
   Sepia Ink:       #3D2B1F
   Aged Gold:       #8B6914
   Cartouche Gold:  #C9A84C
   Deep Umber:      #4A3728
   Rose Dust:       #B88B7A
   Ink Black:       #1A1008
   Fog Blue:        #7A8B99
   Warm Parchment:  #E8D5A3
   Dusk Parchment:  #D4B8A0
   ------------------------------------------- */

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

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

body {
    font-family: 'Crimson Text', Georgia, serif;
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    line-height: 1.7;
    color: #4A3728;
    background: linear-gradient(
        to bottom,
        #F5ECD7 0%,
        #F5ECD7 10%,
        #E8D5A3 45%,
        #D4B8A0 85%,
        #D4B8A0 100%
    );
    background-attachment: fixed;
    min-height: 800vh;
    position: relative;
    overflow-x: hidden;
}

/* --- Aged Paper Grain Overlay --- */
#paper-grain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    opacity: 0.04;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* --- Route Path SVG --- */
#route-path-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* --- Compass Rose Base --- */
.compass-rose {
    display: flex;
    align-items: center;
    justify-content: center;
}

.compass-rose svg {
    width: 160px;
    height: 160px;
}

.compass-label {
    font-family: 'IM Fell English', serif;
    font-size: 8px;
    fill: #8B6914;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.7;
}

/* ================================================
   HERO SECTION
   ================================================ */
#hero {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    text-align: center;
    overflow: hidden;
}

/* Hero Korean character 값 — appears ABOVE compass rose */
#hero-character {
    font-family: 'Noto Serif KR', serif;
    font-weight: 900;
    font-size: clamp(6rem, 15vw, 12rem);
    line-height: 1;
    background: linear-gradient(135deg, #8B6914, #C9A84C, #8B6914);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0;
    animation: heroTextFade 800ms cubic-bezier(0.25, 0.1, 0.25, 1) 2600ms forwards;
    margin-bottom: 0.5rem;
}

#hero-compass {
    opacity: 0;
    animation: heroCompassFade 1500ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms forwards;
}

#hero-compass svg {
    width: 180px;
    height: 180px;
    animation: compassSpin 60s linear infinite;
}

@keyframes heroCompassFade {
    from { opacity: 0; }
    to { opacity: 0.25; }
}

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

/* Hero horizontal lines */
#hero-lines {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 2px;
    position: relative;
    margin: 1.5rem 0;
}

.hero-line {
    height: 1px;
    background: #8B6914;
    opacity: 0;
}

.hero-line-left {
    width: 0;
    animation: heroLineExpand 600ms cubic-bezier(0.25, 0.1, 0.25, 1) 2000ms forwards;
    transform-origin: right center;
    margin-right: 20px;
}

.hero-line-right {
    width: 0;
    animation: heroLineExpand 600ms cubic-bezier(0.25, 0.1, 0.25, 1) 2000ms forwards;
    transform-origin: left center;
    margin-left: 20px;
}

@keyframes heroLineExpand {
    from {
        width: 0;
        opacity: 0;
    }
    to {
        width: 120px;
        opacity: 0.5;
    }
}

/* Hero domain */
#hero-domain {
    font-family: 'IM Fell English', serif;
    font-size: clamp(0.9rem, 1.5vw, 1.1rem);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #3D2B1F;
    opacity: 0;
    animation: heroTextFade 600ms cubic-bezier(0.25, 0.1, 0.25, 1) 3400ms forwards;
}

/* Hero subtitle */
#hero-subtitle {
    font-family: 'Crimson Text', serif;
    font-style: italic;
    font-size: clamp(0.85rem, 1.4vw, 1rem);
    color: #4A3728;
    opacity: 0;
    animation: heroTextFadeSub 600ms cubic-bezier(0.25, 0.1, 0.25, 1) 4000ms forwards;
    margin-top: 0.5rem;
}

@keyframes heroTextFade {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes heroTextFadeSub {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 0.6; transform: translateY(0); }
}

/* ================================================
   STICKY COMPASS (scroll indicator)
   ================================================ */
#sticky-compass {
    position: fixed;
    top: 30px;
    left: 30px;
    width: 60px;
    height: 60px;
    z-index: 100;
    opacity: 0;
    transition: opacity 800ms cubic-bezier(0.25, 0.1, 0.25, 1);
    pointer-events: none;
}

#sticky-compass.visible {
    opacity: 0.2;
}

#sticky-compass svg {
    width: 60px;
    height: 60px;
    animation: compassSpin 45s linear infinite;
}

/* ================================================
   COMPASS WAYPOINTS
   ================================================ */
.compass-waypoint {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 600ms ease-out, transform 600ms ease-out;
}

.compass-waypoint.visible {
    opacity: 1;
    transform: scale(1);
}

.compass-waypoint svg {
    width: 140px;
    height: 140px;
    opacity: 0.2;
}

.waypoint-1 svg { animation: compassSpin 55s linear infinite; }
.waypoint-2 svg { animation: compassSpin 70s linear infinite reverse; }
.waypoint-3 svg { animation: compassSpin 50s linear infinite; }
.waypoint-4 svg { animation: compassSpin 80s linear infinite reverse; }
.waypoint-5 svg { animation: compassSpin 65s linear infinite; }
.waypoint-6 svg { animation: compassSpin 90s linear infinite reverse; }

/* ================================================
   LANDMASS SECTIONS
   ================================================ */
.landmass {
    position: relative;
    z-index: 10;
    max-width: 600px;
    margin: 2rem auto;
    padding: 0;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 800ms cubic-bezier(0.25, 0.1, 0.25, 1), transform 800ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

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

/* Odd landmasses offset left, even offset right */
.landmass-odd {
    margin-left: 8%;
    margin-right: auto;
}

.landmass-even {
    margin-left: auto;
    margin-right: 8%;
}

.landmass-inner {
    position: relative;
    padding: 2.5rem 2rem;
    border: 1px solid rgba(61, 43, 31, 0.4);
    box-shadow: 4px 4px 0 rgba(61, 43, 31, 0.08);
}

/* Irregular landmass clip paths */
.landmass-1 .landmass-inner {
    clip-path: polygon(2% 4%, 15% 1%, 35% 3%, 55% 0%, 78% 2%, 95% 5%, 99% 18%, 98% 38%, 100% 58%, 97% 78%, 99% 92%, 95% 98%, 80% 100%, 60% 97%, 40% 100%, 22% 98%, 5% 96%, 1% 82%, 0% 60%, 2% 40%, 0% 20%);
    background: rgba(245, 236, 215, 0.6);
}

.landmass-2 .landmass-inner {
    clip-path: polygon(3% 2%, 20% 0%, 42% 3%, 65% 1%, 85% 4%, 98% 8%, 100% 25%, 97% 45%, 99% 65%, 100% 82%, 97% 95%, 90% 100%, 70% 98%, 48% 100%, 28% 97%, 10% 100%, 2% 95%, 0% 75%, 1% 55%, 0% 35%, 2% 15%);
    background: rgba(232, 213, 163, 0.5);
}

.landmass-3 .landmass-inner {
    clip-path: polygon(4% 3%, 18% 0%, 38% 4%, 58% 1%, 80% 3%, 96% 6%, 100% 22%, 98% 42%, 97% 62%, 100% 80%, 96% 96%, 82% 100%, 62% 97%, 42% 100%, 20% 98%, 6% 95%, 0% 78%, 2% 55%, 0% 35%, 3% 18%);
    background: rgba(245, 236, 215, 0.55);
}

.landmass-4 .landmass-inner {
    clip-path: polygon(1% 5%, 16% 2%, 40% 0%, 60% 3%, 82% 1%, 97% 4%, 100% 20%, 98% 40%, 100% 60%, 97% 80%, 100% 94%, 92% 100%, 72% 98%, 50% 100%, 30% 97%, 12% 100%, 3% 94%, 0% 72%, 2% 48%, 0% 25%);
    background: rgba(232, 213, 163, 0.45);
}

.landmass-5 .landmass-inner {
    clip-path: polygon(3% 6%, 22% 2%, 44% 0%, 62% 4%, 84% 1%, 98% 3%, 100% 18%, 97% 38%, 99% 58%, 100% 78%, 98% 93%, 88% 100%, 68% 98%, 46% 100%, 24% 97%, 8% 100%, 1% 90%, 0% 68%, 2% 45%, 0% 22%);
    background: rgba(245, 236, 215, 0.5);
}

/* Ink splatter texture on landmasses */
.landmass-1 .landmass-inner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(61, 43, 31, 0.05) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 60%, rgba(61, 43, 31, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 45% 80%, rgba(61, 43, 31, 0.03) 0%, transparent 55%);
}

.landmass-2 .landmass-inner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 80% 20%, rgba(61, 43, 31, 0.04) 0%, transparent 55%),
        radial-gradient(ellipse at 30% 50%, rgba(61, 43, 31, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 60% 90%, rgba(61, 43, 31, 0.03) 0%, transparent 60%);
}

.landmass-3 .landmass-inner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 15% 70%, rgba(61, 43, 31, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 55% 25%, rgba(61, 43, 31, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse at 85% 85%, rgba(61, 43, 31, 0.03) 0%, transparent 55%);
}

.landmass-4 .landmass-inner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 40% 15%, rgba(61, 43, 31, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 75% 55%, rgba(61, 43, 31, 0.04) 0%, transparent 55%),
        radial-gradient(ellipse at 20% 80%, rgba(61, 43, 31, 0.03) 0%, transparent 60%);
}

.landmass-5 .landmass-inner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 65% 35%, rgba(61, 43, 31, 0.05) 0%, transparent 55%),
        radial-gradient(ellipse at 25% 65%, rgba(61, 43, 31, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 90%, rgba(61, 43, 31, 0.03) 0%, transparent 60%);
}

/* ================================================
   CARTOUCHE (Section Title Frames)
   ================================================ */
.cartouche {
    position: relative;
    text-align: center;
    margin-bottom: 1.5rem;
    padding: 0.8rem 1.5rem;
}

.cartouche-frame {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
}

.cartouche h2 {
    position: relative;
    font-family: 'Cormorant Garamond', Garamond, serif;
    font-weight: 700;
    font-size: clamp(1.6rem, 4vw, 2.8rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.1;
    color: #3D2B1F;
    display: inline-block;
    padding-bottom: 0.3em;
    border-bottom: 1px solid #8B6914;
}

/* ================================================
   BODY TEXT in Landmasses
   ================================================ */
.landmass-inner p {
    position: relative;
    margin-bottom: 1rem;
    color: #4A3728;
    text-align: justify;
    hyphens: auto;
}

.landmass-inner p em {
    font-style: italic;
    color: #3D2B1F;
}

.landmass-inner p:last-child {
    margin-bottom: 0;
}

/* ================================================
   MARGIN ANNOTATIONS
   ================================================ */
.margin-annotation {
    position: relative;
    z-index: 10;
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: clamp(0.7rem, 1.2vw, 0.85rem);
    letter-spacing: 0.08em;
    color: #8B6914;
    opacity: 0;
    transition: opacity 800ms cubic-bezier(0.25, 0.1, 0.25, 1);
    padding: 0.5rem 1rem;
    line-height: 1.5;
    max-width: 200px;
}

.margin-annotation.visible {
    opacity: 0.7;
}

.annotation-translate {
    font-size: 0.8em;
    opacity: 0.8;
}

.annotation-left {
    margin-left: 5%;
    transform: rotate(-2deg);
}

.annotation-right {
    margin-left: auto;
    margin-right: 5%;
    text-align: right;
    transform: rotate(2deg);
}

/* Individual annotation word stagger handled by JS */
.margin-annotation .word-reveal {
    display: inline-block;
    opacity: 0;
    transition: opacity 200ms ease;
}

.margin-annotation .word-reveal.shown {
    opacity: 1;
}

/* ================================================
   SEA MONSTERS
   ================================================ */
.sea-monster {
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

.sea-monster svg {
    opacity: 0.06;
}

.sea-monster-1 {
    top: 22%;
    right: 3%;
    width: 250px;
    animation: seaMonsterDrift1 18s ease-in-out infinite;
}

.sea-monster-2 {
    top: 38%;
    left: 2%;
    width: 180px;
    animation: seaMonsterDrift2 15s ease-in-out infinite;
}

.sea-monster-3 {
    top: 55%;
    right: 5%;
    width: 220px;
    animation: seaMonsterDrift3 20s ease-in-out infinite;
}

.sea-monster-4 {
    top: 72%;
    left: 4%;
    width: 160px;
    animation: seaMonsterDrift4 17s ease-in-out infinite;
}

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

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

@keyframes seaMonsterDrift3 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes seaMonsterDrift4 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

/* ================================================
   TREASURE SECTION (Final)
   ================================================ */
#treasure {
    max-width: 500px;
    margin: 6rem auto;
    text-align: center;
    padding-bottom: 6rem;
}

#treasure .treasure-inner {
    position: relative;
    padding: 3rem 2rem;
    background: radial-gradient(ellipse at center, rgba(184, 139, 122, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.treasure-x {
    margin-bottom: 2rem;
    animation: treasurePulse 3s ease-in-out infinite;
}

.treasure-x svg {
    width: 60px;
    height: 60px;
}

@keyframes treasurePulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.05); opacity: 1; }
}

.cartouche-final {
    padding: 1.5rem 2rem;
}

.cartouche-frame-final {
    width: 100%;
    max-width: 450px;
    height: auto;
}

#treasure-character {
    font-family: 'Noto Serif KR', serif;
    font-weight: 900;
    font-size: clamp(3rem, 8vw, 4rem);
    line-height: 1.2;
    background: linear-gradient(135deg, #8B6914, #C9A84C, #8B6914);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.5rem;
}

#treasure-message {
    font-family: 'Crimson Text', serif;
    font-style: italic;
    font-size: clamp(1rem, 2vw, 1.3rem);
    color: #4A3728;
    opacity: 0.8;
}

/* ================================================
   PARCHMENT SPINE (Central dashed line)
   ================================================ */
body::before {
    content: '';
    position: absolute;
    top: 100vh;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: calc(100% - 100vh);
    border-left: 2px dashed rgba(139, 105, 20, 0.3);
    z-index: 0;
    pointer-events: none;
}

/* ================================================
   FOG BLUE OCEAN AREAS between landmasses
   ================================================ */
.compass-waypoint::before {
    content: '';
    position: absolute;
    top: -40px;
    left: 10%;
    right: 10%;
    bottom: -40px;
    background: radial-gradient(ellipse at center, rgba(122, 139, 153, 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}

/* ================================================
   MOBILE RESPONSIVE
   ================================================ */
@media (max-width: 768px) {
    .landmass-odd,
    .landmass-even {
        margin-left: auto;
        margin-right: auto;
        max-width: 90%;
    }

    .landmass-inner {
        padding: 2rem 1.5rem;
    }

    .annotation-left,
    .annotation-right {
        position: relative;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        transform: rotate(0deg);
        max-width: 90%;
    }

    #sticky-compass {
        top: 15px;
        left: 15px;
        width: 40px;
        height: 40px;
    }

    #sticky-compass svg {
        width: 40px;
        height: 40px;
    }

    .compass-waypoint svg {
        width: 100px;
        height: 100px;
    }

    #hero-compass svg {
        width: 140px;
        height: 140px;
    }

    .sea-monster {
        display: none;
    }
}

@media (max-width: 480px) {
    .landmass-inner {
        padding: 1.5rem 1rem;
    }

    .cartouche h2 {
        font-size: clamp(1.2rem, 5vw, 1.8rem);
    }
}