/* ===========================================
   mybadge.id — Styles
   Ethereal Opulence / Layered Depth
   =========================================== */

:root {
    --gold-primary: #d4956b;
    --gold-light: #f0c89a;
    --parchment: #f5ede3;
    --aubergine: #2a1f3d;
    --night: #0d0a14;
    --plum: #6b5a8a;
    --amethyst: #8a7da6;
    --fog: #f8f5f0;
    --warm-neutral: #e8d5c0;
    --text-color: #2a1f3d;
    --accent-color: #d4956b;
}

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

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

body {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    color: var(--text-color);
    background: var(--night);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ===========================================
   Deep Background (z-index: 5)
   =========================================== */
#deep-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    background: linear-gradient(
        180deg,
        #d4956b 0%,
        #f0c89a 8%,
        #f5ede3 20%,
        #f5ede3 35%,
        #8a7da6 55%,
        #6b5a8a 70%,
        #2a1f3d 85%,
        #0d0a14 100%
    );
    background-size: 100% 300vh;
    background-attachment: scroll;
}

#star-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s;
}

/* ===========================================
   Atmosphere (z-index: 10)
   =========================================== */
#atmosphere {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(212, 149, 107, 0.3) 0%,
        rgba(240, 200, 154, 0.2) 10%,
        rgba(245, 237, 227, 0.1) 25%,
        transparent 50%,
        rgba(107, 90, 138, 0.1) 70%,
        rgba(42, 31, 61, 0.2) 85%,
        rgba(13, 10, 20, 0.4) 100%
    );
}

/* ===========================================
   Mountain Ridgelines (z-index: 20)
   =========================================== */
.ridge {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 20;
    pointer-events: none;
    will-change: transform;
}

#ridge-1 { height: 120px; z-index: 25; }
#ridge-2 { height: 100px; z-index: 24; }
#ridge-3 { height: 80px; z-index: 23; }
#ridge-4 { height: 60px; z-index: 22; }
#ridge-5 { height: 40px; z-index: 21; }

/* ===========================================
   Fog Canvas (z-index: 50)
   =========================================== */
#fog-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
    pointer-events: none;
    opacity: 0.6;
}

/* ===========================================
   Main Content (z-index: 30)
   =========================================== */
#content {
    position: relative;
    z-index: 30;
}

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

/* ===========================================
   Summit Opening
   =========================================== */
#summit {
    min-height: 100vh;
    flex-direction: column;
    text-align: center;
    perspective: 1000px;
}

.summit-inner {
    transform: translateZ(40px);
}

.summit-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(4rem, 10vw, 12rem);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--fog);
    text-shadow:
        0 1px 0 rgba(212, 149, 107, 0.4),
        0 2px 4px rgba(42, 31, 61, 0.2),
        0 4px 8px rgba(42, 31, 61, 0.1),
        0 0 60px rgba(212, 149, 107, 0.15);
    background: linear-gradient(135deg, #f8f5f0, #f0c89a, #f8f5f0, #d4956b);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmerTitle 8s ease-in-out infinite;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

@keyframes shimmerTitle {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.summit-subtitle {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 2vw, 1.5rem);
    color: var(--gold-light);
    letter-spacing: 0.2em;
    text-transform: lowercase;
    opacity: 0.7;
    margin-bottom: 1rem;
}

.summit-meta {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 300;
    font-size: 0.75rem;
    color: var(--amethyst);
    letter-spacing: 0.08em;
    opacity: 0.5;
}

/* Gold Leaf Accents */
.gold-leaf {
    position: absolute;
    width: 30px;
    height: 30px;
    opacity: 0.4;
    animation: leafDrift 20s ease-in-out infinite alternate;
}

.leaf-1 { top: 20%; left: 12%; animation-delay: 0s; }
.leaf-2 { top: 35%; right: 15%; animation-delay: -7s; }
.leaf-3 { bottom: 25%; left: 25%; animation-delay: -13s; }

@keyframes leafDrift {
    0% { transform: rotate(0deg) translateY(0); opacity: 0.3; }
    50% { transform: rotate(15deg) translateY(-10px); opacity: 0.5; }
    100% { transform: rotate(-10deg) translateY(5px); opacity: 0.35; }
}

/* ===========================================
   Ascent Sections
   =========================================== */
.ascent-section {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 2rem;
    padding: 4rem 2rem;
    min-height: 80vh;
    align-items: center;
}

.section-text {
    padding: 2rem;
}

.section-heading {
    font-family: 'Anybody', sans-serif;
    font-size: clamp(1.2rem, 3vw, 2.5rem);
    font-weight: 200;
    font-stretch: 75%;
    color: var(--text-color);
    margin-bottom: 1rem;
    letter-spacing: 0.05em;
    transition: font-weight 1.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                font-stretch 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.section-heading.visible {
    font-weight: 600;
    font-stretch: 125%;
}

.body-text {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.2vw, 1.25rem);
    line-height: 1.7;
    letter-spacing: 0.01em;
    color: var(--text-color);
    opacity: 0.85;
}

.mono-text {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 300;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--amethyst);
}

/* ===========================================
   Badge Display
   =========================================== */
.badge-display {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.badge-frame {
    position: relative;
    width: 200px;
    height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    clip-path: circle(0%);
    transition: clip-path 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.badge-frame.visible {
    clip-path: circle(70%);
}

.badge-outer {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
}

.badge-inner {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: radial-gradient(circle, rgba(245, 237, 227, 0.9), #e8d5c0);
    box-shadow: inset 0 0 30px rgba(212, 149, 107, 0.3),
                0 0 40px rgba(212, 149, 107, 0.1);
}

.badge-rays {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg, rgba(212, 149, 107, 0.15) 2deg, transparent 4deg,
        transparent 45deg, rgba(212, 149, 107, 0.15) 47deg, transparent 49deg,
        transparent 90deg, rgba(212, 149, 107, 0.15) 92deg, transparent 94deg,
        transparent 135deg, rgba(212, 149, 107, 0.15) 137deg, transparent 139deg,
        transparent 180deg, rgba(212, 149, 107, 0.15) 182deg, transparent 184deg,
        transparent 225deg, rgba(212, 149, 107, 0.15) 227deg, transparent 229deg,
        transparent 270deg, rgba(212, 149, 107, 0.15) 272deg, transparent 274deg,
        transparent 315deg, rgba(212, 149, 107, 0.15) 317deg, transparent 319deg
    );
    mask: radial-gradient(circle, transparent 55%, black 56%, black 100%);
    -webkit-mask: radial-gradient(circle, transparent 55%, black 56%, black 100%);
}

.badge-icon {
    font-size: 3rem;
    color: var(--gold-primary);
    z-index: 1;
    text-shadow: 0 0 20px rgba(212, 149, 107, 0.4);
}

.badge-ribbon {
    margin-top: 10px;
    background: var(--gold-primary);
    padding: 6px 24px;
    clip-path: polygon(0% 0%, 100% 0%, 95% 50%, 100% 100%, 0% 100%, 5% 50%);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.badge-name {
    font-family: 'Anybody', sans-serif;
    font-weight: 400;
    font-stretch: 75%;
    font-size: 0.9rem;
    color: var(--aubergine);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: font-stretch 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.badge-frame.visible .badge-name {
    font-stretch: 125%;
}

.badge-id {
    font-size: 0.65rem;
    color: var(--aubergine);
    opacity: 0.6;
}

/* ===========================================
   The Valley
   =========================================== */
#valley {
    min-height: 60vh;
    flex-direction: column;
    text-align: center;
    padding: 4rem 2rem;
}

.valley-inner {
    max-width: 700px;
}

.valley-statement {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1.4;
    color: var(--text-color);
    letter-spacing: 0.05em;
    margin-bottom: 2rem;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.2s ease, transform 1.2s ease;
}

.valley-statement.visible {
    opacity: 1;
    transform: translateY(0);
}

.valley-meta {
    opacity: 0.4;
}

/* ===========================================
   The Base
   =========================================== */
#base {
    min-height: 80vh;
    flex-direction: column;
    text-align: center;
    gap: 2rem;
}

.signature-badge {
    position: relative;
    width: 240px;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sig-badge-outer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: rotateSlow 60s linear infinite;
}

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

.sig-badge-inner {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: radial-gradient(circle, rgba(42, 31, 61, 0.8), rgba(13, 10, 20, 0.9));
    box-shadow: inset 0 0 40px rgba(212, 149, 107, 0.2);
}

.sig-badge-rays {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg, rgba(212, 149, 107, 0.1) 2deg, transparent 4deg,
        transparent 45deg, rgba(212, 149, 107, 0.1) 47deg, transparent 49deg,
        transparent 90deg, rgba(212, 149, 107, 0.1) 92deg, transparent 94deg,
        transparent 135deg, rgba(212, 149, 107, 0.1) 137deg, transparent 139deg,
        transparent 180deg, rgba(212, 149, 107, 0.1) 182deg, transparent 184deg,
        transparent 225deg, rgba(212, 149, 107, 0.1) 227deg, transparent 229deg,
        transparent 270deg, rgba(212, 149, 107, 0.1) 272deg, transparent 274deg,
        transparent 315deg, rgba(212, 149, 107, 0.1) 317deg, transparent 319deg
    );
    mask: radial-gradient(circle, transparent 50%, black 51%, black 100%);
    -webkit-mask: radial-gradient(circle, transparent 50%, black 51%, black 100%);
}

.sig-badge-mark {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: 5rem;
    color: var(--gold-primary);
    text-shadow: 0 0 30px rgba(212, 149, 107, 0.5);
    z-index: 1;
}

.sig-badge-glow {
    position: absolute;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 149, 107, 0.15), transparent 70%);
    animation: pulseGlow 4s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.15); opacity: 1; }
}

.base-text {
    color: var(--amethyst);
    opacity: 0.5;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
}

/* ===========================================
   Responsive
   =========================================== */
@media (max-width: 768px) {
    .ascent-section {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .ascent-section .section-text,
    .ascent-section .badge-display {
        grid-column: 1 !important;
        grid-row: auto !important;
    }
    .ridge { display: none; }
}