/* =============================================
   yongzoon.net — Art Deco x Circuit Board
   ============================================= */

:root {
    --void-black: #0a0a0a;
    --obsidian: #1a1a1a;
    --graphite: #2d2d2d;
    --pewter: #4a4a4a;
    --silver-mist: #8a8a8a;
    --burnished-silver: #c0c0c0;
    --platinum: #e8e8e8;
    --ivory-ash: #f5f5f0;
    --gold: #d4af37;

    --font-heading: 'Space Mono', monospace;
    --font-body: 'IBM Plex Mono', monospace;
    --font-accent: 'Orbitron', sans-serif;

    --fs-xs: 13px;
    --fs-sm: 21px;
    --fs-md: 34px;
    --fs-lg: 55px;
    --fs-xl: 89px;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    scroll-behavior: smooth;
}

body {
    background: var(--void-black);
    color: var(--burnished-silver);
    font-family: var(--font-body);
    font-weight: 300;
    line-height: 1.85;
    overflow-x: hidden;
}

/* ---- TIMELINE (Left Edge) ---- */
#timeline {
    position: fixed;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 20px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    pointer-events: none;
}

.timeline-line {
    position: absolute;
    top: 10%;
    bottom: 10%;
    width: 1px;
    background: var(--pewter);
}

.timeline-diamond {
    width: 10px;
    height: 10px;
    background: var(--pewter);
    transform: rotate(45deg);
    position: absolute;
    transition: background 0.5s ease, box-shadow 0.5s ease;
}

.timeline-diamond[data-section="0"] { top: 10%; }
.timeline-diamond[data-section="1"] { top: 30%; }
.timeline-diamond[data-section="2"] { top: 50%; }
.timeline-diamond[data-section="3"] { top: 70%; }
.timeline-diamond[data-section="4"] { top: 90%; }

.timeline-diamond.active {
    background: var(--gold);
    box-shadow: 0 0 12px var(--gold), 0 0 24px rgba(212, 175, 55, 0.3);
}

/* ---- DOT NAV (Right Edge) ---- */
#dot-nav {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dot-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dot {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pewter);
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.dot-btn.active .dot {
    background: var(--gold);
    transform: scale(1.5);
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
}

.dot-btn:hover .dot {
    background: var(--burnished-silver);
}

/* ---- SCROLL CONTAINER ---- */
#scroll-container {
    width: 100%;
}

/* ---- ACT SECTIONS ---- */
.act {
    min-height: 100vh;
    height: 100vh;
    scroll-snap-align: start;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 40px 60px;
}

/* ---- HALFTONE BG ---- */
.halftone-bg {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, var(--pewter) 0.5px, transparent 0.5px);
    background-size: 24px 24px;
    opacity: 0.03;
    pointer-events: none;
}

/* ---- CORNER ORNAMENTS ---- */
.corner-ornament {
    position: absolute;
    width: 40px;
    height: 40px;
}

.corner-ornament::before,
.corner-ornament::after {
    content: '';
    position: absolute;
    background: var(--pewter);
}

.corner-ornament::before {
    width: 100%;
    height: 1px;
}

.corner-ornament::after {
    width: 1px;
    height: 100%;
}

.top-left { top: 20px; left: 40px; }
.top-left::before { top: 0; left: 0; }
.top-left::after { top: 0; left: 0; }

.top-right { top: 20px; right: 40px; }
.top-right::before { top: 0; right: 0; }
.top-right::after { top: 0; right: 0; }

.bottom-left { bottom: 20px; left: 40px; }
.bottom-left::before { bottom: 0; left: 0; }
.bottom-left::after { bottom: 0; left: 0; }

.bottom-right { bottom: 20px; right: 40px; }
.bottom-right::before { bottom: 0; right: 0; }
.bottom-right::after { bottom: 0; right: 0; }

/* small diamond at corner intersection */
.corner-ornament::before {
    width: 8px;
    height: 8px;
    background: var(--gold);
    transform: rotate(45deg);
    top: -3.5px;
    left: -3.5px;
}

.top-right::before { left: auto; right: -3.5px; }
.bottom-left::before { top: auto; bottom: -3.5px; }
.bottom-right::before { top: auto; bottom: -3.5px; left: auto; right: -3.5px; }

/* ---- HERO — ACT ARRIVAL ---- */
#act-arrival {
    background: var(--void-black);
}

.hero-title {
    font-family: var(--font-heading);
    font-size: var(--fs-xl);
    font-weight: 700;
    letter-spacing: 0.25em;
    color: var(--platinum);
    text-transform: uppercase;
    position: relative;
    z-index: 2;
    margin-top: 40px;
}

.hero-subtitle {
    font-family: var(--font-accent);
    font-size: var(--fs-xs);
    letter-spacing: 0.5em;
    color: var(--silver-mist);
    text-transform: uppercase;
    margin-top: 12px;
    position: relative;
    z-index: 2;
}

/* ---- 3D MONOLITH ---- */
.monolith-container {
    perspective: 1200px;
    width: 200px;
    height: 300px;
    position: relative;
    z-index: 2;
}

.monolith {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: monolithRotate 20s linear infinite;
}

@keyframes monolithRotate {
    0% { transform: rotateY(0deg) rotateX(-5deg); }
    100% { transform: rotateY(360deg) rotateX(-5deg); }
}

.monolith-face {
    position: absolute;
    backface-visibility: visible;
}

.monolith-face.front {
    width: 200px;
    height: 300px;
    background: var(--obsidian);
    border: 1px solid var(--pewter);
    transform: translateZ(40px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3), 0 8px 32px rgba(0,0,0,0.5), 0 16px 64px rgba(0,0,0,0.3);
    overflow: hidden;
}

.monolith-face.back {
    width: 200px;
    height: 300px;
    background: var(--obsidian);
    border: 1px solid var(--pewter);
    transform: translateZ(-40px) rotateY(180deg);
    overflow: hidden;
}

.monolith-face.left-face {
    width: 80px;
    height: 300px;
    background: var(--graphite);
    border: 1px solid var(--pewter);
    transform: rotateY(-90deg) translateZ(0px);
    left: -40px;
    overflow: hidden;
}

.monolith-face.right-face {
    width: 80px;
    height: 300px;
    background: var(--graphite);
    border: 1px solid var(--pewter);
    transform: rotateY(90deg) translateZ(160px);
    left: 0;
    overflow: hidden;
}

.monolith-face.top-face {
    width: 200px;
    height: 80px;
    background: var(--graphite);
    border: 1px solid var(--pewter);
    transform: rotateX(90deg) translateZ(0px);
    top: -40px;
}

/* Circuit patterns on monolith face */
.circuit-pattern-face {
    position: absolute;
    inset: 20px;
}

.trace-h {
    position: absolute;
    top: 30%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--pewter);
}

.trace-h.mid { top: 70%; }

.trace-v {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 30%;
    width: 1px;
    background: var(--pewter);
}

.trace-v.mid { left: 70%; }

.node-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    animation: nodePulse 3s ease-in-out infinite;
}

.node-dot.n1 { top: calc(30% - 3px); left: calc(30% - 3px); }
.node-dot.n2 { top: calc(30% - 3px); left: calc(70% - 3px); }
.node-dot.n3 { top: calc(70% - 3px); left: calc(30% - 3px); }
.node-dot.n4 { top: calc(70% - 3px); left: calc(70% - 3px); }

.node-dot.n2 { animation-delay: 0.75s; }
.node-dot.n3 { animation-delay: 1.5s; }
.node-dot.n4 { animation-delay: 2.25s; }

@keyframes nodePulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* Deco chevrons on front face */
.deco-chevron {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 15px solid var(--pewter);
}

.deco-chevron.c2 { bottom: 40px; border-bottom-color: var(--silver-mist); opacity: 0.5; }
.deco-chevron.c3 { bottom: 60px; border-bottom-color: var(--pewter); opacity: 0.3; }

/* Sunburst on back face */
.deco-sunburst-face {
    position: absolute;
    inset: 0;
    background: conic-gradient(
        from 0deg,
        var(--pewter) 0deg, transparent 7.5deg,
        transparent 15deg, var(--pewter) 15deg, transparent 22.5deg,
        transparent 30deg, var(--pewter) 30deg, transparent 37.5deg,
        transparent 45deg, var(--pewter) 45deg, transparent 52.5deg,
        transparent 60deg, var(--pewter) 60deg, transparent 67.5deg,
        transparent 75deg, var(--pewter) 75deg, transparent 82.5deg,
        transparent 90deg, var(--pewter) 90deg, transparent 97.5deg,
        transparent 105deg, var(--pewter) 105deg, transparent 112.5deg,
        transparent 120deg, var(--pewter) 120deg, transparent 127.5deg,
        transparent 135deg, var(--pewter) 135deg, transparent 142.5deg,
        transparent 150deg, var(--pewter) 150deg, transparent 157.5deg,
        transparent 165deg, var(--pewter) 165deg, transparent 172.5deg,
        transparent 180deg, var(--pewter) 180deg, transparent 187.5deg,
        transparent 195deg, var(--pewter) 195deg, transparent 202.5deg,
        transparent 210deg, var(--pewter) 210deg, transparent 217.5deg,
        transparent 225deg, var(--pewter) 225deg, transparent 232.5deg,
        transparent 240deg, var(--pewter) 240deg, transparent 247.5deg,
        transparent 255deg, var(--pewter) 255deg, transparent 262.5deg,
        transparent 270deg, var(--pewter) 270deg, transparent 277.5deg,
        transparent 285deg, var(--pewter) 285deg, transparent 292.5deg,
        transparent 300deg, var(--pewter) 300deg, transparent 307.5deg,
        transparent 315deg, var(--pewter) 315deg, transparent 322.5deg,
        transparent 330deg, var(--pewter) 330deg, transparent 337.5deg,
        transparent 345deg, var(--pewter) 345deg, transparent 352.5deg,
        transparent 360deg
    );
    opacity: 0.15;
}

/* Stripes on side faces */
.deco-stripe {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 18px,
        var(--pewter) 18px,
        var(--pewter) 19px
    );
    opacity: 0.3;
}

/* ---- SECTION PLATES ---- */
.section-plate {
    background: var(--obsidian);
    border: 1px solid var(--pewter);
    padding: 40px 50px;
    max-width: 900px;
    width: 100%;
    position: relative;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3), 0 8px 32px rgba(0,0,0,0.5), 0 20px 60px rgba(0,0,0,0.3);
    overflow: hidden;
    /* Double border effect */
    outline: 1px solid var(--pewter);
    outline-offset: 3px;
}

.plate-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

.section-heading {
    font-family: var(--font-heading);
    font-size: var(--fs-md);
    font-weight: 700;
    letter-spacing: 0.25em;
    color: var(--platinum);
    text-transform: uppercase;
    text-align: center;
}

/* Stepped pyramids flanking headings */
.stepped-pyramid {
    width: 40px;
    height: 24px;
    position: relative;
}

.stepped-pyramid::before,
.stepped-pyramid::after {
    content: '';
    position: absolute;
    background: var(--pewter);
}

.left-pyr::before {
    width: 40px;
    height: 4px;
    bottom: 0;
    right: 0;
}
.left-pyr::after {
    width: 28px;
    height: 4px;
    bottom: 8px;
    right: 0;
}
.left-pyr {
    clip-path: polygon(100% 100%, 0% 100%, 30% 60%, 30% 40%, 60% 40%, 60% 0%, 100% 0%);
    background: var(--pewter);
    opacity: 0.4;
}

.right-pyr {
    clip-path: polygon(0% 100%, 100% 100%, 70% 60%, 70% 40%, 40% 40%, 40% 0%, 0% 0%);
    background: var(--pewter);
    opacity: 0.4;
}

/* ---- CIRCUIT DIVIDERS ---- */
.circuit-divider {
    width: 100%;
    height: 40px;
    margin: 15px 0;
}

.circuit-trace {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    transition: stroke-dashoffset 2s ease-out, stroke 0.5s ease;
}

.circuit-trace.animated {
    stroke-dashoffset: 0;
}

.circuit-trace.active {
    stroke: var(--burnished-silver);
}

.circuit-node {
    opacity: 0;
    transition: opacity 0.5s ease 2s;
}

.circuit-node.visible {
    opacity: 1;
}

/* ---- REVELATION CONTENT ---- */
.revelation-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 20px;
}

.trace-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.trace-svg {
    width: 100%;
    max-width: 350px;
    height: auto;
}

.draw-trace {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 2s ease-out, stroke 0.5s ease;
}

.draw-trace.animated {
    stroke-dashoffset: 0;
    stroke: var(--burnished-silver);
}

.pulse-node {
    animation: nodePulse 3s ease-in-out infinite;
    opacity: 0;
    transition: opacity 0.5s ease 2s;
}

.pulse-node.visible {
    opacity: 1;
}

.trace-text {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 300;
    line-height: 1.85;
    color: var(--silver-mist);
    text-align: center;
    max-width: 320px;
}

/* ---- CARD GRID ---- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.flip-card {
    perspective: 1200px;
    height: 200px;
    cursor: pointer;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
}

.flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border: 1px solid var(--pewter);
    outline: 1px solid var(--pewter);
    outline-offset: 3px;
}

.flip-card-front {
    background: var(--obsidian);
}

.flip-card-back {
    background: var(--graphite);
    transform: rotateY(180deg);
    border-color: var(--gold);
    outline-color: transparent;
}

.flip-card.flipped .flip-card-inner::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1.5px;
    width: 3px;
    background: var(--gold);
    z-index: 10;
}

/* Deco emblems */
.deco-emblem {
    width: 60px;
    height: 60px;
    position: relative;
    margin-bottom: 15px;
}

.emblem-diamond {
    width: 30px;
    height: 30px;
    background: transparent;
    border: 2px solid var(--platinum);
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -15px;
    margin-left: -15px;
}

.emblem-rays {
    position: absolute;
    inset: 0;
    background: conic-gradient(from 0deg, transparent 0deg, var(--pewter) 0deg, transparent 15deg, transparent 45deg, var(--pewter) 45deg, transparent 60deg, transparent 90deg, var(--pewter) 90deg, transparent 105deg, transparent 135deg, var(--pewter) 135deg, transparent 150deg, transparent 180deg, var(--pewter) 180deg, transparent 195deg, transparent 225deg, var(--pewter) 225deg, transparent 240deg, transparent 270deg, var(--pewter) 270deg, transparent 285deg, transparent 315deg, var(--pewter) 315deg, transparent 330deg, transparent 360deg);
    opacity: 0.3;
    border-radius: 50%;
}

.emblem-chevron-set {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.emblem-chev {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 8px solid var(--platinum);
}

.emblem-chev.c2 { opacity: 0.6; border-bottom-color: var(--burnished-silver); }
.emblem-chev.c3 { opacity: 0.3; border-bottom-color: var(--silver-mist); }

.emblem-circle-el {
    width: 40px;
    height: 40px;
    border: 2px solid var(--platinum);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.emblem-cross-el {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
}

.emblem-cross-el::before,
.emblem-cross-el::after {
    content: '';
    position: absolute;
    background: var(--platinum);
}

.emblem-cross-el::before {
    width: 100%;
    height: 2px;
    top: 50%;
    transform: translateY(-1px);
}

.emblem-cross-el::after {
    height: 100%;
    width: 2px;
    left: 50%;
    transform: translateX(-1px);
}

.emblem-zigzag-el {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 30px;
    background: linear-gradient(135deg, transparent 33.33%, var(--platinum) 33.33%, var(--platinum) 34%, transparent 34%, transparent 66.66%, var(--platinum) 66.66%, var(--platinum) 67.33%, transparent 67.33%),
                linear-gradient(-135deg, transparent 33.33%, var(--platinum) 33.33%, var(--platinum) 34%, transparent 34%, transparent 66.66%, var(--platinum) 66.66%, var(--platinum) 67.33%, transparent 67.33%);
    opacity: 0.8;
}

.emblem-fan-el {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 30px;
    background: conic-gradient(from -90deg at 50% 100%, var(--pewter) 0deg, transparent 15deg, transparent 30deg, var(--pewter) 30deg, transparent 45deg, transparent 60deg, var(--pewter) 60deg, transparent 75deg, transparent 90deg, var(--pewter) 90deg, transparent 105deg, transparent 120deg, var(--pewter) 120deg, transparent 135deg, transparent 150deg, var(--pewter) 150deg, transparent 165deg, transparent 180deg);
    clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
    opacity: 0.6;
}

.emblem-tower-el {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 45px;
    background: var(--graphite);
    border: 1px solid var(--platinum);
    clip-path: polygon(30% 100%, 0% 70%, 0% 30%, 20% 15%, 35% 0%, 65% 0%, 80% 15%, 100% 30%, 100% 70%, 70% 100%);
}

.card-label {
    font-family: var(--font-accent);
    font-size: 11px;
    letter-spacing: 0.3em;
    color: var(--silver-mist);
    text-transform: uppercase;
}

.card-title {
    font-family: var(--font-heading);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--platinum);
    text-transform: uppercase;
    margin-bottom: 10px;
}

.card-text {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--burnished-silver);
    text-align: center;
}

.card-trace {
    width: 100%;
    height: 20px;
    margin-top: 10px;
}

/* ---- DEPTH LAYERS ---- */
.depth-layers {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.depth-layer {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.depth-layer.visible {
    opacity: 1;
    transform: translateY(0);
}

.depth-layer.layer-2 { transition-delay: 0.15s; }
.depth-layer.layer-3 { transition-delay: 0.3s; }

.layer-1 {
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.layer-2 {
    box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 8px 32px rgba(0,0,0,0.2);
}

.layer-3 {
    box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 16px 48px rgba(0,0,0,0.3), 0 20px 60px rgba(0,0,0,0.2);
}

.double-border {
    background: var(--graphite);
    border: 1px solid var(--pewter);
    outline: 1px solid var(--pewter);
    outline-offset: 3px;
    padding: 25px 30px;
}

.layer-title {
    font-family: var(--font-heading);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--platinum);
    text-transform: uppercase;
    margin-bottom: 10px;
}

.layer-text {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 300;
    line-height: 1.85;
    color: var(--burnished-silver);
    margin-bottom: 15px;
}

.layer-trace {
    width: 100%;
    max-width: 300px;
    height: 30px;
}

/* ---- RESOLUTION ---- */
#act-resolution {
    background: var(--void-black);
}

.resolution-sunburst {
    position: absolute;
    inset: 0;
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg, rgba(74,74,74,0.08) 0deg, transparent 7.5deg,
        transparent 15deg, rgba(74,74,74,0.08) 15deg, transparent 22.5deg,
        transparent 30deg, rgba(74,74,74,0.08) 30deg, transparent 37.5deg,
        transparent 45deg, rgba(74,74,74,0.08) 45deg, transparent 52.5deg,
        transparent 60deg, rgba(74,74,74,0.08) 60deg, transparent 67.5deg,
        transparent 75deg, rgba(74,74,74,0.08) 75deg, transparent 82.5deg,
        transparent 90deg, rgba(74,74,74,0.08) 90deg, transparent 97.5deg,
        transparent 105deg, rgba(74,74,74,0.08) 105deg, transparent 112.5deg,
        transparent 120deg, rgba(74,74,74,0.08) 120deg, transparent 127.5deg,
        transparent 135deg, rgba(74,74,74,0.08) 135deg, transparent 142.5deg,
        transparent 150deg, rgba(74,74,74,0.08) 150deg, transparent 157.5deg,
        transparent 165deg, rgba(74,74,74,0.08) 165deg, transparent 172.5deg,
        transparent 180deg, rgba(74,74,74,0.08) 180deg, transparent 187.5deg,
        transparent 195deg, rgba(74,74,74,0.08) 195deg, transparent 202.5deg,
        transparent 210deg, rgba(74,74,74,0.08) 210deg, transparent 217.5deg,
        transparent 225deg, rgba(74,74,74,0.08) 225deg, transparent 232.5deg,
        transparent 240deg, rgba(74,74,74,0.08) 240deg, transparent 247.5deg,
        transparent 255deg, rgba(74,74,74,0.08) 255deg, transparent 262.5deg,
        transparent 270deg, rgba(74,74,74,0.08) 270deg, transparent 277.5deg,
        transparent 285deg, rgba(74,74,74,0.08) 285deg, transparent 292.5deg,
        transparent 300deg, rgba(74,74,74,0.08) 300deg, transparent 307.5deg,
        transparent 315deg, rgba(74,74,74,0.08) 315deg, transparent 322.5deg,
        transparent 330deg, rgba(74,74,74,0.08) 330deg, transparent 337.5deg,
        transparent 345deg, rgba(74,74,74,0.08) 345deg, transparent 352.5deg,
        transparent 360deg
    );
    pointer-events: none;
}

.resolution-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 700px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.resolution-heading {
    font-family: var(--font-heading);
    font-size: var(--fs-lg);
    font-weight: 700;
    letter-spacing: 0.25em;
    color: var(--platinum);
    text-transform: uppercase;
    margin: 20px 0;
}

.resolution-text {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 300;
    line-height: 1.85;
    color: var(--burnished-silver);
    margin-bottom: 30px;
}

.gold-flourish {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
}

.flourish-line {
    width: 80px;
    height: 1px;
    background: var(--gold);
}

.flourish-diamond {
    width: 12px;
    height: 12px;
    background: var(--gold);
    transform: rotate(45deg);
    box-shadow: 0 0 12px var(--gold), 0 0 24px rgba(212, 175, 55, 0.3);
    animation: goldGlow 3s ease-in-out infinite;
}

@keyframes goldGlow {
    0%, 100% { box-shadow: 0 0 8px var(--gold), 0 0 16px rgba(212, 175, 55, 0.2); }
    50% { box-shadow: 0 0 16px var(--gold), 0 0 32px rgba(212, 175, 55, 0.4); }
}

.resolution-signature {
    font-family: var(--font-accent);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.5em;
    color: var(--gold);
    margin-bottom: 20px;
}

.final-divider {
    width: 100%;
    max-width: 600px;
}

.gold-node {
    animation: goldGlow 3s ease-in-out infinite;
}

/* ---- ANIMATE IN ---- */
.act-enter .section-plate,
.act-enter .resolution-content {
    animation: layerEnter 0.8s ease-out forwards;
}

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

/* ---- MOBILE ---- */
@media (max-width: 768px) {
    .act {
        padding: 30px 20px;
    }

    .hero-title {
        font-size: var(--fs-lg);
    }

    .section-heading {
        font-size: var(--fs-sm);
    }

    .card-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .flip-card {
        height: 180px;
    }

    .revelation-content {
        grid-template-columns: 1fr;
    }

    .section-plate {
        padding: 25px 20px;
    }

    .monolith-container {
        width: 140px;
        height: 210px;
    }

    #timeline {
        display: none;
    }

    #dot-nav {
        right: 10px;
    }

    .resolution-heading {
        font-size: var(--fs-md);
    }

    .resolution-text {
        font-size: var(--fs-xs);
    }

    .layer-title {
        font-size: var(--fs-xs);
    }

    .double-border {
        padding: 15px 18px;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: var(--fs-md);
        letter-spacing: 0.15em;
    }

    .hero-subtitle {
        font-size: 11px;
        letter-spacing: 0.3em;
    }

    .stepped-pyramid {
        display: none;
    }

    .corner-ornament {
        display: none;
    }
}

/* ---- REDUCED MOTION ---- */
@media (prefers-reduced-motion: reduce) {
    .monolith {
        animation: none;
        transform: rotateY(-25deg) rotateX(-5deg);
    }

    .circuit-trace {
        stroke-dasharray: none;
        stroke-dashoffset: 0;
        transition: none;
    }

    .draw-trace {
        stroke-dasharray: none;
        stroke-dashoffset: 0;
        transition: none;
    }

    .depth-layer {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .node-dot,
    .pulse-node {
        animation: none;
        opacity: 0.7;
    }

    .flourish-diamond,
    .gold-node {
        animation: none;
    }

    html {
        scroll-snap-type: none;
    }
}