/* ============================================
   mybadge.page — Memphis Chrome Palace
   ============================================ */

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

:root {
    --chrome: #E8E8E8;
    --gunmetal: #4A4A55;
    --silver: #C0C0CC;
    --highlight: #FFFFFF;
    --pink: #FF6B9D;
    --teal: #00BFA5;
    --yellow: #FFD740;
    --carbon: #1A1A2E;
    --scroll: 0;
    --metallic-gradient: linear-gradient(135deg, #4A4A55 0%, #C0C0CC 25%, #E8E8E8 50%, #C0C0CC 75%, #4A4A55 100%);
}

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

body {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.3vw, 1.15rem);
    color: var(--carbon);
    background: var(--gunmetal);
    overflow-x: hidden;
}

/* --- Parallax Wrapper --- */
.parallax-wrapper {
    perspective: 500px;
    perspective-origin: center center;
    overflow-x: hidden;
    overflow-y: auto;
    height: 100vh;
}

/* --- Section Base --- */
.section {
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
}

/* --- Parallax Layers --- */
.parallax-bg {
    position: absolute;
    inset: -20%;
    transform: translateZ(-150px) scale(1.4);
    will-change: transform;
    z-index: 1;
}

.parallax-mid {
    position: absolute;
    inset: -10%;
    transform: translateZ(-50px) scale(1.15);
    will-change: transform;
    z-index: 2;
    pointer-events: none;
}

.parallax-fg {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: inherit;
    padding: 4rem 2rem;
}

/* ============================================
   SECTION 1: THE LOBBY
   ============================================ */
.section-lobby {
    min-height: 100vh;
    background: linear-gradient(180deg, var(--gunmetal) 0%, #3a3a45 100%);
}

/* Zigzag Pattern Background */
.zigzag-pattern {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(192,192,204,0.12) 25%, transparent 25%) -50px 0,
        linear-gradient(225deg, rgba(192,192,204,0.12) 25%, transparent 25%) -50px 0,
        linear-gradient(315deg, rgba(192,192,204,0.12) 25%, transparent 25%),
        linear-gradient(45deg, rgba(192,192,204,0.12) 25%, transparent 25%);
    background-size: 100px 100px;
    background-color: transparent;
}

/* Memphis Triangles (Lobby) */
.memphis-triangle {
    position: absolute;
    width: 0;
    height: 0;
}

.tri-1 {
    top: 15%;
    left: 10%;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 70px solid rgba(255,107,157,0.25);
    transform: rotate(15deg);
}

.tri-2 {
    top: 60%;
    right: 15%;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 52px solid rgba(0,191,165,0.2);
    transform: rotate(-25deg);
}

.tri-3 {
    bottom: 20%;
    left: 25%;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 86px solid rgba(255,215,64,0.18);
    transform: rotate(35deg);
}

/* Memphis Circles */
.memphis-circle {
    position: absolute;
    border-radius: 50%;
}

.circ-1 {
    width: 100px;
    height: 100px;
    top: 25%;
    right: 20%;
    background: radial-gradient(circle, rgba(232,232,232,0.15) 0%, rgba(192,192,204,0.05) 100%);
    border: 3px solid rgba(192,192,204,0.2);
}

.circ-2 {
    width: 60px;
    height: 60px;
    bottom: 30%;
    left: 15%;
    background: radial-gradient(circle, rgba(255,107,157,0.12) 0%, transparent 100%);
    border: 2px solid rgba(255,107,157,0.2);
}

/* Nature Elements — Ferns */
.nature-fern {
    position: absolute;
    width: 120px;
    height: 200px;
    background: var(--metallic-gradient);
    clip-path: polygon(50% 0%, 65% 15%, 80% 10%, 70% 30%, 90% 25%, 75% 45%, 85% 55%, 65% 55%, 70% 70%, 55% 60%, 50% 80%, 45% 60%, 30% 70%, 35% 55%, 15% 55%, 25% 45%, 10% 25%, 30% 30%, 20% 10%, 35% 15%);
    opacity: 0.5;
}

.fern-left {
    top: 20%;
    left: 5%;
    transform: rotate(-10deg);
}

.fern-right {
    top: 15%;
    right: 8%;
    transform: rotate(12deg) scaleX(-1);
}

/* Monstera Leaf */
.nature-monstera {
    position: absolute;
    width: 150px;
    height: 150px;
    background: linear-gradient(135deg, var(--teal) 0%, var(--yellow) 100%);
    clip-path: polygon(50% 0%, 70% 10%, 85% 5%, 80% 25%, 100% 30%, 85% 45%, 95% 60%, 75% 60%, 80% 80%, 60% 70%, 50% 100%, 40% 70%, 20% 80%, 25% 60%, 5% 60%, 15% 45%, 0% 30%, 20% 25%, 15% 5%, 30% 10%);
    opacity: 0.35;
}

.monstera-1 {
    bottom: 10%;
    right: 15%;
    transform: rotate(20deg);
}

/* Hero Title */
.hero-title {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-align: center;
    background: var(--metallic-gradient);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    line-height: 1.1;
}

.hero-my {
    color: var(--chrome);
}

.hero-badge {
    color: var(--pink);
}

.hero-dot {
    color: var(--yellow);
}

.hero-page {
    color: var(--teal);
}

/* Underline Wave SVGs */
.underline-wave {
    display: block;
    width: 100%;
    height: 12px;
    margin-top: 8px;
    overflow: visible;
}

.underline-wave path {
    stroke-dasharray: 450;
    stroke-dashoffset: 450;
    transition: stroke-dashoffset 800ms ease-out;
}

.underline-wave.drawn path {
    stroke-dashoffset: 0;
}

.hero-underline {
    width: 80%;
    max-width: 500px;
    height: 14px;
    margin-top: 12px;
}

/* ============================================
   SECTION TRANSITIONS
   ============================================ */
.section-transition {
    position: relative;
    z-index: 5;
    height: 30px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--gunmetal);
}

.transition-line {
    width: 100%;
    height: 8px;
}

.transition-line path {
    stroke-dasharray: 1800;
    stroke-dashoffset: 1800;
    transition: stroke-dashoffset 1200ms ease-out;
}

.transition-line.drawn path {
    stroke-dashoffset: 0;
}

/* ============================================
   SECTION 2: THE GALLERY
   ============================================ */
.section-gallery {
    min-height: 120vh;
    background: linear-gradient(180deg, #3a3a45 0%, var(--gunmetal) 50%, #2e2e3a 100%);
}

/* Dots Pattern */
.dots-pattern {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle 6px, rgba(255,107,157,0.15) 100%, transparent 100%) 0 0 / 60px 60px,
        radial-gradient(circle 4px, rgba(0,191,165,0.12) 100%, transparent 100%) 30px 30px / 60px 60px,
        radial-gradient(circle 3px, rgba(255,215,64,0.1) 100%, transparent 100%) 15px 45px / 60px 60px;
}

/* Nature — Palm */
.nature-palm {
    position: absolute;
    width: 160px;
    height: 250px;
    top: 30%;
    left: 3%;
    background: linear-gradient(135deg, var(--gunmetal) 0%, var(--silver) 50%, var(--chrome) 100%);
    clip-path: polygon(50% 0%, 60% 8%, 78% 2%, 72% 18%, 95% 12%, 80% 32%, 100% 35%, 78% 48%, 90% 58%, 68% 58%, 75% 75%, 55% 65%, 50% 100%, 45% 65%, 25% 75%, 32% 58%, 10% 58%, 22% 48%, 0% 35%, 20% 32%, 5% 12%, 28% 18%, 22% 2%, 40% 8%);
    opacity: 0.45;
    transform: rotate(-5deg);
}

/* Nature — Pinecone */
.nature-pinecone {
    position: absolute;
    width: 80px;
    height: 120px;
    top: 40%;
    right: 5%;
    background: linear-gradient(180deg, var(--yellow) 0%, var(--pink) 100%);
    clip-path: polygon(50% 0%, 65% 12%, 75% 8%, 70% 25%, 85% 22%, 78% 38%, 90% 42%, 75% 52%, 82% 62%, 68% 65%, 72% 78%, 58% 75%, 55% 90%, 50% 100%, 45% 90%, 42% 75%, 28% 78%, 32% 65%, 18% 62%, 25% 52%, 10% 42%, 22% 38%, 15% 22%, 30% 25%, 25% 8%, 35% 12%);
    opacity: 0.4;
    transform: rotate(8deg);
}

/* Gallery Panels */
.gallery-panels {
    display: flex;
    gap: 3rem;
    width: 100%;
    max-width: 1100px;
    padding: 4rem 0;
}

.gallery-panel {
    flex: 1;
    min-width: 0;
}

.panel-border {
    padding: 7px;
    background:
        linear-gradient(to right, var(--pink) 0%, var(--pink) 33%, var(--teal) 33%, var(--teal) 66%, var(--yellow) 66%, var(--yellow) 100%) top / 100% 7px no-repeat,
        linear-gradient(to bottom, var(--teal) 0%, var(--teal) 33%, var(--yellow) 33%, var(--yellow) 66%, var(--pink) 66%, var(--pink) 100%) right / 7px 100% no-repeat,
        linear-gradient(to left, var(--yellow) 0%, var(--yellow) 33%, var(--pink) 33%, var(--pink) 66%, var(--teal) 66%, var(--teal) 100%) bottom / 100% 7px no-repeat,
        linear-gradient(to top, var(--pink) 0%, var(--pink) 33%, var(--teal) 33%, var(--teal) 66%, var(--yellow) 66%, var(--yellow) 100%) left / 7px 100% no-repeat;
}

.panel-inner {
    background: rgba(26,26,46,0.85);
    padding: 2.5rem;
}

.section-heading {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--chrome);
    margin-bottom: 1.2rem;
    position: relative;
}

.panel-text {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: clamp(0.95rem, 1.3vw, 1.15rem);
    font-weight: 400;
    color: var(--silver);
    line-height: 1.65;
    margin-bottom: 1.5rem;
}

/* Specimen Case */
.specimen-case {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.15);
    backdrop-filter: blur(3px);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
}

.specimen-leaf {
    width: 80px;
    height: 100px;
    opacity: 0.7;
}

.leaf-gallery-1 {
    background: linear-gradient(135deg, var(--chrome) 0%, var(--gunmetal) 100%);
    clip-path: polygon(50% 0%, 70% 15%, 85% 10%, 75% 35%, 95% 40%, 75% 55%, 80% 75%, 60% 68%, 50% 100%, 40% 68%, 20% 75%, 25% 55%, 5% 40%, 25% 35%, 15% 10%, 30% 15%);
}

.leaf-gallery-2 {
    background: linear-gradient(135deg, var(--teal) 0%, var(--silver) 100%);
    clip-path: polygon(50% 0%, 68% 12%, 82% 5%, 78% 28%, 98% 35%, 80% 50%, 88% 68%, 65% 62%, 50% 100%, 35% 62%, 12% 68%, 20% 50%, 2% 35%, 22% 28%, 18% 5%, 32% 12%);
}

/* ============================================
   SECTION 3: THE COLLECTION
   ============================================ */
.section-collection {
    min-height: 100vh;
    background: linear-gradient(180deg, #2e2e3a 0%, var(--gunmetal) 100%);
}

/* Diagonal Stripes Pattern */
.stripes-pattern {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 30px,
        rgba(192,192,204,0.08) 30px,
        rgba(192,192,204,0.08) 32px,
        transparent 32px,
        transparent 60px,
        rgba(232,232,232,0.06) 60px,
        rgba(232,232,232,0.06) 62px
    );
}

/* Geometric Tree */
.geometric-tree {
    position: absolute;
    left: 8%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tree-crown {
    width: 0;
    height: 0;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-bottom: 100px solid var(--pink);
    opacity: 0.5;
}

.tree-trunk {
    width: 30px;
    height: 60px;
    background: var(--metallic-gradient);
    opacity: 0.6;
}

.tree-base {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--teal);
    opacity: 0.4;
}

/* Collection Title */
.collection-title {
    margin-bottom: 2.5rem;
    text-align: center;
}

/* Badge Grid */
.badge-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 600px;
    width: 100%;
}

.badge-item {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 300ms ease;
}

.badge-item:hover {
    transform: scale(1.08);
}

.badge-interior {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Badge patterns */
.badge-item[data-pattern="zigzag"] .badge-interior::before {
    content: '';
    position: absolute;
    inset: 8%;
    background: repeating-linear-gradient(
        45deg,
        rgba(255,107,157,0.2),
        rgba(255,107,157,0.2) 4px,
        transparent 4px,
        transparent 12px
    );
    border-radius: inherit;
    z-index: 0;
}

.badge-item[data-pattern="dots"] .badge-interior::before {
    content: '';
    position: absolute;
    inset: 8%;
    background:
        radial-gradient(circle 3px, rgba(0,191,165,0.25) 100%, transparent 100%) 0 0 / 16px 16px;
    border-radius: inherit;
    z-index: 0;
}

.badge-item[data-pattern="squiggle"] .badge-interior::before {
    content: '';
    position: absolute;
    inset: 8%;
    background: repeating-linear-gradient(
        -45deg,
        rgba(255,215,64,0.2),
        rgba(255,215,64,0.2) 3px,
        transparent 3px,
        transparent 10px
    );
    border-radius: inherit;
    z-index: 0;
}

.badge-circle .badge-interior {
    border-radius: 50%;
    background: rgba(26,26,46,0.7);
    border: 5px solid var(--silver);
}

.badge-rounded .badge-interior {
    border-radius: 20px;
    background: rgba(26,26,46,0.7);
    border: 5px solid var(--silver);
}

.badge-outline-svg {
    position: absolute;
    inset: -3px;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    z-index: 4;
    pointer-events: none;
}

.badge-outline-svg circle,
.badge-outline-svg rect {
    stroke-dasharray: 400;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0ms;
}

.badge-item:hover .badge-outline-svg circle,
.badge-item:hover .badge-outline-svg rect {
    animation: badge-draw 600ms ease-out forwards;
}

@keyframes badge-draw {
    0% { stroke-dashoffset: 400; stroke: var(--pink); }
    50% { stroke: var(--teal); }
    100% { stroke-dashoffset: 0; stroke: var(--yellow); }
}

.badge-icon {
    position: relative;
    z-index: 2;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    color: var(--chrome);
    text-shadow: 0 0 10px rgba(232,232,232,0.3);
}

/* ============================================
   SECTION 4: THE THRONE ROOM
   ============================================ */
.section-throne {
    min-height: 110vh;
    background: linear-gradient(180deg, var(--gunmetal) 0%, #1e1e30 50%, var(--carbon) 100%);
}

/* Dense Pattern */
.dense-pattern {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle 8px, rgba(192,192,204,0.08) 100%, transparent 100%) 0 0 / 50px 50px,
        radial-gradient(circle 5px, rgba(232,232,232,0.06) 100%, transparent 100%) 25px 25px / 50px 50px,
        repeating-linear-gradient(60deg, transparent, transparent 20px, rgba(192,192,204,0.04) 20px, rgba(192,192,204,0.04) 22px),
        repeating-linear-gradient(-60deg, transparent, transparent 20px, rgba(232,232,232,0.03) 20px, rgba(232,232,232,0.03) 22px);
}

/* Throne Circles & Triangles */
.throne-circ-1 {
    width: 140px;
    height: 140px;
    top: 10%;
    left: 15%;
    background: radial-gradient(circle, rgba(255,107,157,0.1) 0%, transparent 70%);
    border: 2px solid rgba(255,107,157,0.15);
}

.throne-circ-2 {
    width: 90px;
    height: 90px;
    bottom: 15%;
    right: 10%;
    background: radial-gradient(circle, rgba(0,191,165,0.08) 0%, transparent 70%);
    border: 2px solid rgba(0,191,165,0.12);
}

.throne-tri-1 {
    top: 55%;
    left: 8%;
    border-left: 35px solid transparent;
    border-right: 35px solid transparent;
    border-bottom: 60px solid rgba(255,215,64,0.12);
    transform: rotate(20deg);
}

.throne-tri-2 {
    top: 20%;
    right: 12%;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 43px solid rgba(232,232,232,0.1);
    transform: rotate(-15deg);
}

/* Fern Arrangements */
.fern-arrangement {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.fern-arr-left {
    left: 5%;
}

.fern-arr-right {
    right: 5%;
}

.fern-arr-1 {
    width: 100px;
    height: 170px;
    transform: rotate(-20deg);
    opacity: 0.4;
}

.fern-arr-2 {
    width: 80px;
    height: 140px;
    transform: rotate(-40deg) translateX(-20px);
    opacity: 0.3;
}

.fern-arr-3 {
    width: 100px;
    height: 170px;
    transform: rotate(20deg) scaleX(-1);
    opacity: 0.4;
}

.fern-arr-4 {
    width: 80px;
    height: 140px;
    transform: rotate(40deg) scaleX(-1) translateX(-20px);
    opacity: 0.3;
}

/* Throne Title */
.throne-title {
    margin-bottom: 3rem;
    text-align: center;
}

/* Pedestal */
.throne-pedestal {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pedestal-top {
    position: relative;
    z-index: 2;
}

.primary-badge {
    position: relative;
    width: clamp(180px, 30vw, 280px);
    height: clamp(180px, 30vw, 280px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.primary-badge-outline {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.primary-badge-outline circle {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    transition: stroke-dashoffset 1200ms ease-out;
}

.primary-badge-outline.drawn circle {
    stroke-dashoffset: 0;
}

.primary-badge-inner {
    width: 75%;
    height: 75%;
    border-radius: 50%;
    background: rgba(26,26,46,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--silver);
    position: relative;
    overflow: hidden;
}

.primary-badge-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 6px,
            rgba(255,107,157,0.1) 6px,
            rgba(255,107,157,0.1) 8px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 6px,
            rgba(0,191,165,0.08) 6px,
            rgba(0,191,165,0.08) 8px
        );
    border-radius: inherit;
}

.primary-badge-text {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-align: center;
    line-height: 1.1;
    background: var(--metallic-gradient);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    z-index: 1;
}

.pedestal-base {
    width: clamp(200px, 35vw, 350px);
    height: 50px;
    margin-top: -5px;
    clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
    background: var(--metallic-gradient);
    background-size: 200% 100%;
    position: relative;
}

.pedestal-base::before {
    content: '';
    position: absolute;
    inset: 4px;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,107,157,0.15),
            rgba(255,107,157,0.15) 10px,
            rgba(0,191,165,0.12) 10px,
            rgba(0,191,165,0.12) 20px,
            rgba(255,215,64,0.1) 20px,
            rgba(255,215,64,0.1) 30px
        );
    clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
}

/* ============================================
   SECTION 5: THE EXIT
   ============================================ */
.section-exit {
    min-height: 80vh;
    background: linear-gradient(180deg, var(--carbon) 0%, #12121e 100%);
}

/* Sparse Pattern */
.sparse-pattern {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle 3px, rgba(192,192,204,0.06) 100%, transparent 100%) 0 0 / 80px 80px;
}

/* Drifting Leaf */
.drifting-leaf {
    position: absolute;
    width: 60px;
    height: 80px;
    top: 30%;
    right: 25%;
    background: linear-gradient(135deg, var(--silver) 0%, var(--gunmetal) 100%);
    clip-path: polygon(50% 0%, 75% 20%, 85% 15%, 78% 40%, 95% 50%, 75% 60%, 80% 80%, 60% 72%, 50% 100%, 40% 72%, 20% 80%, 25% 60%, 5% 50%, 22% 40%, 15% 15%, 25% 20%);
    opacity: 0.35;
    animation: drift 12s ease-in-out infinite;
}

@keyframes drift {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(30px, 20px) rotate(8deg); }
    50% { transform: translate(-10px, 40px) rotate(-5deg); }
    75% { transform: translate(20px, 10px) rotate(3deg); }
}

/* Exit Column */
.exit-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-bottom: 2rem;
}

.column-segment {
    width: 40px;
}

.seg-1 {
    height: 50px;
    background: var(--metallic-gradient);
    border-radius: 6px 6px 0 0;
}

.seg-2 {
    height: 35px;
    background: var(--pink);
    opacity: 0.7;
}

.seg-3 {
    height: 45px;
    background: var(--metallic-gradient);
}

.seg-4 {
    height: 30px;
    background: var(--teal);
    opacity: 0.6;
}

.seg-5 {
    height: 40px;
    background: var(--yellow);
    opacity: 0.5;
    border-radius: 0 0 6px 6px;
}

/* Exit Domain Text */
.exit-domain {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: clamp(0.8rem, 1.2vw, 1rem);
    font-weight: 400;
    color: var(--silver);
    opacity: 0.5;
    letter-spacing: 0.15em;
    text-transform: lowercase;
    margin-top: 0.5rem;
}

.exit-domain-2 {
    opacity: 0.3;
    font-size: clamp(0.7rem, 1vw, 0.85rem);
}

.exit-domain-3 {
    opacity: 0.15;
    font-size: clamp(0.6rem, 0.8vw, 0.7rem);
}

/* ============================================
   LINK HOVER UNDERLINES
   ============================================ */
a {
    color: var(--chrome);
    text-decoration: none;
    background-image: linear-gradient(var(--pink), var(--pink));
    background-size: 0% 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 400ms ease;
}

a:hover {
    background-size: 100% 2px;
}

/* ============================================
   SCROLL-REVEAL ANIMATIONS
   ============================================ */
.section-heading,
.gallery-panel,
.badge-item,
.throne-pedestal,
.exit-column {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 600ms ease-out, transform 600ms ease-out;
}

.section-heading.revealed,
.gallery-panel.revealed,
.badge-item.revealed,
.throne-pedestal.revealed,
.exit-column.revealed {
    opacity: 1;
    transform: translateY(0);
}

.badge-item:nth-child(1) { transition-delay: 0ms; }
.badge-item:nth-child(2) { transition-delay: 80ms; }
.badge-item:nth-child(3) { transition-delay: 160ms; }
.badge-item:nth-child(4) { transition-delay: 240ms; }
.badge-item:nth-child(5) { transition-delay: 320ms; }
.badge-item:nth-child(6) { transition-delay: 400ms; }

/* ============================================
   METALLIC SHIMMER (scroll-linked)
   ============================================ */
.hero-title,
.primary-badge-text {
    background-position: calc(var(--scroll) * 100%) 50%;
}

.pedestal-base {
    background-position: calc(var(--scroll) * 200%) 50%;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .gallery-panels {
        flex-direction: column;
        gap: 2rem;
        padding: 2rem 0;
    }

    .badge-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        max-width: 350px;
    }

    .fern-arrangement {
        display: none;
    }

    .nature-palm,
    .nature-pinecone {
        display: none;
    }

    .geometric-tree {
        display: none;
    }

    .parallax-bg {
        transform: none;
    }

    .parallax-mid {
        transform: none;
    }
}

@media (max-width: 480px) {
    .badge-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        max-width: 280px;
    }

    .panel-inner {
        padding: 1.5rem;
    }

    .primary-badge {
        width: 160px;
        height: 160px;
    }
}