/* =========================================================
   Min Chul Shin — A Slideshow Argument
   12 slides arguing that software is art.
   ========================================================= */

:root {
    --bg:        #0a0805;
    --bg-deep:   #050402;
    --ink:       #f5efe2;
    --ink-soft:  #c8c0ad;
    --ink-quiet: #6a6357;
    --gold:      #c9a35b;
    --gold-warm: #d8b370;
    --gold-deep: #8e7237;

    --serif:    'Cormorant Garamond', 'Noto Serif KR', serif;
    --serif-ko: 'Noto Serif KR', 'Cormorant Garamond', serif;
    --sans:     'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --mono:     'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

    --ease:    cubic-bezier(0.6, 0, 0.4, 1);
    --ease-soft: cubic-bezier(0.32, 0.72, 0.24, 1);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: var(--bg-deep);
    color: var(--ink);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

::selection { background: var(--gold); color: var(--bg-deep); }
a { color: inherit; text-decoration: none; }

/* ================ Background atmosphere ================ */

.grain {
    position: fixed;
    inset: -10%;
    z-index: 90;
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.8 0 0 0 0 0.8 0 0 0 0 0.8 0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    animation: grain 0.9s steps(6) infinite;
}
@keyframes grain {
    0%   { transform: translate(0, 0); }
    20%  { transform: translate(-3%, 2%); }
    40%  { transform: translate(2%, -1%); }
    60%  { transform: translate(-1%, 3%); }
    80%  { transform: translate(3%, 1%); }
    100% { transform: translate(0, 0); }
}

.vignette {
    position: fixed;
    inset: 0;
    z-index: 80;
    pointer-events: none;
    background: radial-gradient(ellipse at center,
        transparent 50%,
        rgba(0,0,0,0.5)  88%,
        rgba(0,0,0,0.85) 100%);
}

/* ================ Deck & slides ================ */

.deck {
    position: fixed;
    inset: 0;
    z-index: 1;
}

.slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8vh 8vw;
    background: var(--bg);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition:
        opacity 1.2s var(--ease),
        transform 1.2s var(--ease);
}

.slide.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.slide.is-leaving {
    opacity: 0;
    transform: translateY(-8px);
    transition:
        opacity 0.6s var(--ease),
        transform 0.6s var(--ease);
}

/* ============================================================
   Slide 1 — TITLE
   ============================================================ */
.slide-title { gap: 1.4em; }

.title-ko {
    margin: 0;
    font-family: var(--serif-ko);
    font-weight: 300;
    font-size: clamp(2rem, 5vw, 4rem);
    letter-spacing: 0.06em;
    color: var(--ink);
    text-align: center;
}

.title-en {
    margin: 0;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.2rem, 2.4vw, 1.8rem);
    letter-spacing: 0.18em;
    color: var(--gold);
    text-align: center;
}

/* Reveal animation: characters drift in from below. */
.slide-title.is-active .title-ko {
    animation: rise 1.8s var(--ease-soft) both;
}
.slide-title.is-active .title-en {
    animation: rise 1.8s var(--ease-soft) 0.5s both;
}
@keyframes rise {
    from { opacity: 0; transform: translateY(18px); letter-spacing: 0.22em; }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Slide 2, 3, 9, 10, 11 — PROSE (general)
   ============================================================ */
.slide-prose,
.slide-recap,
.slide-claim,
.slide-quiet { gap: 0.9em; text-align: center; }

.line-ko {
    margin: 0;
    font-family: var(--serif-ko);
    font-weight: 300;
    font-size: clamp(1.5rem, 3.2vw, 2.4rem);
    letter-spacing: 0.04em;
    color: var(--ink);
    line-height: 1.5;
}
.line-ko em {
    font-style: normal;
    color: var(--gold);
    font-family: var(--serif);
    font-weight: 400;
}
.line-en {
    margin: 0;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(0.85rem, 1.4vw, 1.1rem);
    letter-spacing: 0.18em;
    color: var(--ink-quiet);
    text-transform: lowercase;
}

.slide.is-active .line-ko { animation: rise 1.6s var(--ease-soft) 0.2s both; }
.slide.is-active .line-en { animation: rise 1.6s var(--ease-soft) 0.6s both; }

/* Slide 3 — promise dots */
.promise-dots {
    margin-top: 2em;
    display: flex;
    gap: 1.2em;
    opacity: 0;
}
.slide-prose.is-active .promise-dots {
    animation: rise 1.4s var(--ease-soft) 1s both;
}
.promise-dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gold);
    opacity: 0.7;
}

/* Slide 11 — quieter, smaller */
.slide-quiet .line-ko {
    font-size: clamp(1.3rem, 2.6vw, 2rem);
    color: var(--ink-soft);
}
.line-ko-2 { color: var(--ink) !important; }

/* Slide 10 — claim is louder, italic emphasis */
.slide-claim .line-ko {
    font-size: clamp(1.7rem, 3.6vw, 2.7rem);
}
.slide-claim .line-ko em { font-style: italic; }

/* ============================================================
   Slide 4 — UI = NEGATIVE SPACE
   The invisible (whitespace) becomes the picture.
   ============================================================ */
.slide-negative {
    padding: 0;
    flex-direction: column;
}

.negative-stage {
    flex: 1;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
#negative-canvas {
    width: min(560px, 78vw);
    height: min(720px, 80vh);
    display: block;
}

/* ============================================================
   Slide 5 — UI = DIMENSION
   The flat interface revealed as sculpture.
   ============================================================ */
.slide-dimension {
    padding: 0;
    flex-direction: column;
    perspective: 1400px;
    perspective-origin: 50% 35%;
}

.dim-stage {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
}

.dim-scene {
    position: relative;
    width: min(420px, 70vw);
    height: min(640px, 72vh);
    transform-style: preserve-3d;
    transform: rotateX(0deg) rotateY(0deg);
    transition: transform 3s var(--ease-soft);
}

.slide-dimension.is-active .dim-scene {
    transform: rotateX(56deg) rotateY(-22deg) rotateZ(8deg);
    transition-delay: 0.5s;
}

.dim-layer {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(245, 239, 226, 0.18);
    background: rgba(245, 239, 226, 0.04);
    transform: translateZ(0);
    transition: transform 2.4s var(--ease-soft);
}

/* layered like an actual app screen */
.dim-bg     { width: 100%; height: 100%; }
.dim-card   { top: 12%; left: 8%; right: 8%; bottom: 32%; height: auto; }
.dim-bar    { top: 18%; left: 14%; right: 14%; height: 3%; }
.dim-button { top: 60%; left: 22%; right: 22%; height: 7%; background: rgba(201, 163, 91, 0.35); border-color: var(--gold); }
.dim-icon   { top: 80%; left: 44%; right: 44%; height: 5%; }

.slide-dimension.is-active .dim-bg     { transition-delay: 0.7s; transform: translateZ(0); }
.slide-dimension.is-active .dim-card   { transition-delay: 0.9s; transform: translateZ(40px); }
.slide-dimension.is-active .dim-bar    { transition-delay: 1.1s; transform: translateZ(60px); }
.slide-dimension.is-active .dim-button { transition-delay: 1.3s; transform: translateZ(110px); }
.slide-dimension.is-active .dim-icon   { transition-delay: 1.5s; transform: translateZ(150px); }

/* ============================================================
   Slide 6 — OBSERVABILITY = MUSIC
   ============================================================ */
.slide-music { padding: 0; flex-direction: column; }
#music-canvas {
    flex: 1;
    width: 100%;
    height: 100%;
    display: block;
}

/* ============================================================
   Slide 7 — CODE = SCULPTURE
   ============================================================ */
.slide-sculpture {
    padding: 6vh 6vw;
    flex-direction: column;
}

.sculpture-stage {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1200px;
    perspective-origin: 50% 50%;
}

.sculpture-code {
    margin: 0;
    font-family: var(--mono);
    font-size: clamp(11px, 1.05vw, 14px);
    line-height: 1.85;
    color: var(--ink);
    white-space: pre;
    text-align: left;
    transform-style: preserve-3d;
    transform: rotateX(0deg) rotateY(0deg);
    transition: transform 2.6s var(--ease-soft);
    text-shadow: 0 0 22px rgba(201, 163, 91, 0.0);
    transition: transform 2.6s var(--ease-soft), text-shadow 2.6s var(--ease-soft);
}

.slide-sculpture.is-active .sculpture-code {
    transform: rotateX(34deg) rotateY(-10deg);
    transition-delay: 0.6s;
    text-shadow: 0 0 28px rgba(201, 163, 91, 0.18);
}

.sculpture-code .tk-kw   { color: var(--gold); }
.sculpture-code .tk-fn   { color: var(--gold-warm); }
.sculpture-code .tk-str  { color: #b9c5a5; font-style: italic; }
.sculpture-code .tk-num  { color: #d4b070; }
.sculpture-code .tk-cmt  { color: var(--ink-quiet); font-style: italic; }
.sculpture-code .tk-pun  { color: var(--gold); opacity: 0.7; text-shadow: 0 0 8px rgba(201, 163, 91, 0.55); }
.sculpture-code .tk-id   { color: var(--ink); }
.sculpture-code .tk-prop { color: #c0d0e0; }

/* ============================================================
   Slide 8 — AI = THE NEW BRUSH
   ============================================================ */
.slide-brush {
    padding: 0;
    flex-direction: column;
}

.brush-stage {
    flex: 1;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.brush-prompt {
    position: absolute;
    top: 12%;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--mono);
    font-size: clamp(11px, 1.0vw, 14px);
    color: var(--ink-soft);
    border: 1px solid rgba(201, 163, 91, 0.35);
    padding: 0.7em 1.2em;
    background: rgba(10, 8, 5, 0.6);
    min-width: min(420px, 60vw);
    text-align: left;
    letter-spacing: 0.02em;
    z-index: 2;
}

.brush-cursor {
    color: var(--gold);
    animation: cursor-blink 1s steps(2) infinite;
}
@keyframes cursor-blink {
    0%, 50% { opacity: 1; }
    50.01%, 100% { opacity: 0; }
}

#brush-canvas {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}

/* ============================================================
   Captions (slides 4, 5, 6, 7, 8)
   ============================================================ */
.caption {
    position: absolute;
    bottom: 6vh;
    left: 0;
    right: 0;
    padding: 0 8vw;
    text-align: center;
    z-index: 3;
}
.cap-ko {
    margin: 0;
    font-family: var(--serif-ko);
    font-weight: 300;
    font-size: clamp(1rem, 1.6vw, 1.3rem);
    letter-spacing: 0.04em;
    color: var(--ink);
}
.cap-ko em {
    font-style: normal;
    color: var(--gold);
    font-family: var(--serif);
    font-weight: 400;
}
.cap-en {
    margin: 0.5em 0 0;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(0.8rem, 1.1vw, 0.95rem);
    letter-spacing: 0.18em;
    color: var(--ink-quiet);
    text-transform: lowercase;
}

.slide.is-active .caption {
    animation: rise 1.8s var(--ease-soft) 1.4s both;
}

/* ============================================================
   Slide 18 — SIGNATURE / ABOUT (the comprehensive intro card)
   The slide scrolls vertically if its contents exceed the viewport.
   ============================================================ */

.slide-sign {
    align-items: stretch;
    justify-content: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    -webkit-overflow-scrolling: touch;
}

.sign-scroll {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 12vh 6vw 12vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4.5vh;
}

.sign-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45em;
    margin: 0;
}

.sign-divider {
    width: 60px;
    height: 1px;
    background: var(--gold);
    opacity: 0.35;
}

.sign-section {
    width: 100%;
    max-width: 620px;
    margin: 0;
}

.sign-label {
    margin: 0 0 1.2em;
    font-family: var(--sans);
    font-weight: 400;
    font-size: 0.66rem;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--gold-deep);
}

.sign-line {
    margin: 0.5em 0;
    font-family: var(--serif-ko);
    font-weight: 300;
    font-size: clamp(0.98rem, 1.4vw, 1.15rem);
    line-height: 1.95;
    letter-spacing: 0.02em;
    color: var(--ink);
}

.sign-line em {
    font-style: normal;
    color: var(--gold);
    font-family: var(--serif);
    font-weight: 400;
}

.sign-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9em;
    margin: 0;
}

/* Reveal everything as a single soft fade — many children would
   otherwise stagger awkwardly. */
.slide-sign.is-active .sign-scroll > * {
    animation: rise 1.4s var(--ease-soft) both;
}
.slide-sign.is-active .sign-scroll > *:nth-child(1) { animation-delay: 0.20s; }
.slide-sign.is-active .sign-scroll > *:nth-child(2) { animation-delay: 0.45s; }
.slide-sign.is-active .sign-scroll > *:nth-child(3) { animation-delay: 0.65s; }
.slide-sign.is-active .sign-scroll > *:nth-child(4) { animation-delay: 0.85s; }
.slide-sign.is-active .sign-scroll > *:nth-child(5) { animation-delay: 1.05s; }
.slide-sign.is-active .sign-scroll > *:nth-child(6) { animation-delay: 1.25s; }
.slide-sign.is-active .sign-scroll > *:nth-child(7) { animation-delay: 1.45s; }

/* ============================================================
   Python stack card (rendered inside the signature slide)
   ============================================================ */
.stack-card {
    max-width: 780px;
    width: 100%;
    text-align: left;
    padding: clamp(2.4em, 4vw, 3.6em) clamp(2em, 4vw, 3.6em);
    background: rgba(20, 16, 8, 0.55);
    border: 1px solid rgba(201, 163, 91, 0.22);
    border-left: 2px solid var(--gold);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.4),
        0 30px 80px -20px rgba(0, 0, 0, 0.85);
}

.stack-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6em;
    margin-bottom: 1.8em;
}

.stack-mark {
    font-family: var(--mono);
    font-weight: 500;
    font-size: 0.65rem;
    letter-spacing: 0.4em;
    color: var(--gold);
    border: 1px solid var(--gold);
    padding: 0.3em 0.9em 0.25em;
    text-transform: uppercase;
    line-height: 1;
}

.stack-name {
    margin: 0;
    font-family: var(--mono);
    font-weight: 500;
    font-size: clamp(2.2rem, 5.5vw, 3.6rem);
    letter-spacing: 0.02em;
    color: var(--ink);
    line-height: 1;
}

.stack-tagline {
    margin: 0;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(0.95rem, 1.4vw, 1.15rem);
    letter-spacing: 0.08em;
    color: var(--gold-deep);
}

.stack-body {
    margin: 0;
    font-family: var(--serif-ko);
    font-weight: 300;
    font-size: clamp(0.95rem, 1.15vw, 1.05rem);
    line-height: 1.95;
    letter-spacing: 0.02em;
    color: var(--ink-soft);
}

.stack-body em {
    font-style: normal;
    color: var(--gold);
    font-family: var(--serif-ko);
    font-weight: 400;
}

.slide.is-active .stack-card {
    animation: rise 1.6s var(--ease-soft) 0.3s both;
}

@media (max-width: 768px) {
    .stack-card { padding: 2em 1.6em; }
    .bio-line { font-size: 1rem; line-height: 1.75; }
    .stack-body { font-size: 0.92rem; line-height: 1.8; }
}

/* ============================================================
   Signature inner element styles
   (scroll layout + animations are above; this section just
   styles the individual pieces inside the sign-scroll wrapper)
   ============================================================ */

.sig-presents {
    margin: 0 0 1.6em;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(0.78rem, 1vw, 0.95rem);
    letter-spacing: 0.32em;
    color: var(--ink-quiet);
    text-transform: lowercase;
}

.sig-name {
    margin: 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.7rem, 3.4vw, 2.8rem);
    letter-spacing: 0.18em;
    color: var(--ink);
}

.sig-name-ko {
    margin: 0.4em 0 0;
    font-family: var(--serif-ko);
    font-weight: 300;
    font-size: clamp(0.85rem, 1.1vw, 1rem);
    letter-spacing: 0.4em;
    color: var(--ink-soft);
}

.sig-role {
    margin: 0.5em 0 0;
    font-family: var(--sans);
    font-weight: 300;
    font-size: 0.78rem;
    letter-spacing: 0.28em;
    color: var(--ink-soft);
    text-transform: uppercase;
}
.sig-role-quiet {
    color: var(--ink-quiet);
    font-size: 0.7rem;
    text-transform: none;
    letter-spacing: 0.22em;
    margin-top: 0.3em;
    font-family: var(--serif-ko);
}

.sig-mail {
    margin: 0;
    font-family: var(--mono);
    font-size: clamp(0.9rem, 1.1vw, 1.05rem);
    color: var(--gold);
    letter-spacing: 0.04em;
    transition: color 0.3s ease;
}
.sig-mail:hover { color: var(--ink); }

.sig-links {
    margin: 0;
    display: flex;
    gap: 0.55em;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
.sig-links a {
    font-family: var(--sans);
    font-size: 0.7rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-soft);
    transition: color 0.3s ease;
}
.sig-links a:hover { color: var(--gold); }
.sig-dot { color: var(--ink-quiet); opacity: 0.6; }

.sig-replay {
    margin: 3.5em 0 0;
    font-family: var(--sans);
    font-weight: 300;
    font-size: 0.66rem;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--ink-quiet);
    animation: replay-pulse 3.4s ease-in-out infinite;
}
@keyframes replay-pulse {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 1; }
}

/* ============================================================
   HUD
   ============================================================ */
.hud {
    position: fixed;
    top: 2.6vh;
    right: 2.6vw;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 1.4em;
    pointer-events: none;
}

.hud-counter { display: none; } /* slide index hidden by request */

.hud-audio {
    pointer-events: auto;
    background: none;
    border: none;
    padding: 0.4em 0.6em;
    cursor: pointer;
    font-family: var(--sans);
    font-weight: 300;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    color: var(--ink-quiet);
    text-transform: lowercase;
    transition: color 0.3s ease;
}
.hud-audio:hover { color: var(--gold); }

.hud-audio .hud-audio-on  { display: inline; }
.hud-audio .hud-audio-off { display: none; }
.hud-audio[aria-pressed="false"] .hud-audio-on  { display: none; }
.hud-audio[aria-pressed="false"] .hud-audio-off { display: inline; }

/* ============================================================
   Progress bar
   ============================================================ */
.progress-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(245, 239, 226, 0.06);
    z-index: 100;
    pointer-events: none;
}
.progress-fill {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--gold);
    transition: width 0.8s var(--ease-soft);
}

/* ============================================================
   Hint
   ============================================================ */
.hint {
    position: fixed;
    bottom: 3.4vh;
    right: 3vw;
    z-index: 95;
    display: flex;
    align-items: center;
    gap: 0.6em;
    font-family: var(--sans);
    font-weight: 300;
    font-size: 0.66rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--ink-quiet);
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease;
}
.hint.is-visible { opacity: 0.8; }
.hint-arrow { color: var(--gold); transform: translateY(-1px); }

/* Revisit mode: hide hint and progress bar — the show is done. */
body.is-revisit .hint,
body.is-revisit .progress-bar { display: none; }

/* ============================================================
   Click flash
   ============================================================ */
.flash {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gold);
    z-index: 110;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%);
}
.flash.is-flashing {
    animation: flash-burst 0.7s ease-out;
}
@keyframes flash-burst {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
    25%  { opacity: 0.9; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(7); }
}

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 768px) {
    .slide { padding: 8vh 6vw; }
    .title-ko { font-size: clamp(1.6rem, 7vw, 2.4rem); }
    .line-ko  { font-size: clamp(1.2rem, 5vw, 1.7rem); }
    .cap-ko   { font-size: 1rem; }
    .cap-en   { font-size: 0.75rem; }

    #negative-canvas { width: 86vw; height: 70vh; }
    .dim-scene       { width: 78vw; height: 60vh; }

    .sculpture-code { font-size: 9.5px; }

    .hud { top: 1.6vh; right: 3vw; gap: 1em; }
    .hud-counter { font-size: 0.62rem; }
    .hud-audio   { font-size: 0.62rem; }
}

@media (prefers-reduced-motion: reduce) {
    .slide, .dim-scene, .dim-layer, .sculpture-code {
        transition-duration: 0.4s;
    }
    .grain { animation: none; opacity: 0.03; }
    .brush-cursor, .sig-replay { animation: none; }
}