/* =============================================
   mybadge.id - Art Deco Badge Identity System
   Colors: #1A5A5A, #D8C098, #C8A038, #F0F5F0, #D87860, #0A2030
   Fonts: Poiret One, Quicksand
   ============================================= */

/* === RESET & BASE === */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: 'Quicksand', sans-serif;
    font-weight: 400;
    font-size: clamp(14px, 1vw, 16px);
    line-height: 1.75;
    color: #F0F5F0;
    background: #0A2030;
    overflow-x: hidden;
}

/* === CREDENTIAL LOBBY (Hero) === */
#credential-lobby {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A5A5A 0%, #0A2030 40%, #D8C098 100%);
    overflow: hidden;
}

/* Art-deco SVG frame */
#deco-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.frame-line {
    fill: none;
    stroke: #C8A038;
    stroke-width: 2;
    stroke-dasharray: 4000;
    stroke-dashoffset: 4000;
    animation: drawFrame 1000ms ease-out forwards;
}

.frame-inner {
    stroke-width: 1;
    animation-delay: 200ms;
}

.frame-corner {
    stroke-width: 1.5;
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: drawFrame 600ms ease-out 400ms forwards;
}

.frame-ray {
    stroke-width: 1;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: drawFrame 400ms ease-out 600ms forwards;
}

@keyframes drawFrame {
    to {
        stroke-dashoffset: 0;
    }
}

/* Sunburst behind title */
#sunburst {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        rgba(200, 160, 56, 0.15) 0deg,
        transparent 10deg,
        transparent 20deg,
        rgba(200, 160, 56, 0.15) 20deg,
        transparent 30deg,
        transparent 40deg,
        rgba(200, 160, 56, 0.15) 40deg,
        transparent 50deg,
        transparent 60deg,
        rgba(200, 160, 56, 0.15) 60deg,
        transparent 70deg,
        transparent 80deg,
        rgba(200, 160, 56, 0.15) 80deg,
        transparent 90deg,
        transparent 100deg,
        rgba(200, 160, 56, 0.15) 100deg,
        transparent 110deg,
        transparent 120deg,
        rgba(200, 160, 56, 0.15) 120deg,
        transparent 130deg,
        transparent 140deg,
        rgba(200, 160, 56, 0.15) 140deg,
        transparent 150deg,
        transparent 160deg,
        rgba(200, 160, 56, 0.15) 160deg,
        transparent 170deg,
        transparent 180deg,
        rgba(200, 160, 56, 0.15) 180deg,
        transparent 190deg,
        transparent 200deg,
        rgba(200, 160, 56, 0.15) 200deg,
        transparent 210deg,
        transparent 220deg,
        rgba(200, 160, 56, 0.15) 220deg,
        transparent 230deg,
        transparent 240deg,
        rgba(200, 160, 56, 0.15) 240deg,
        transparent 250deg,
        transparent 260deg,
        rgba(200, 160, 56, 0.15) 260deg,
        transparent 270deg,
        transparent 280deg,
        rgba(200, 160, 56, 0.15) 280deg,
        transparent 290deg,
        transparent 300deg,
        rgba(200, 160, 56, 0.15) 300deg,
        transparent 310deg,
        transparent 320deg,
        rgba(200, 160, 56, 0.15) 320deg,
        transparent 330deg,
        transparent 340deg,
        rgba(200, 160, 56, 0.15) 340deg,
        transparent 350deg,
        transparent 360deg
    );
    transform: scale(0);
    animation: sunburstBloom 800ms ease-out 1500ms forwards;
    z-index: 1;
}

@keyframes sunburstBloom {
    to {
        transform: scale(1);
    }
}

/* Lobby content */
#lobby-content {
    position: relative;
    z-index: 3;
    text-align: center;
}

#site-title {
    font-family: 'Poiret One', cursive;
    font-weight: 400;
    font-size: clamp(48px, 8vw, 120px);
    letter-spacing: 0.04em;
    color: #F0F5F0;
    margin-bottom: 24px;
}

.letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    animation: letterFadeIn 400ms ease-out forwards;
}

.letter[data-index="0"] { animation-delay: 300ms; }
.letter[data-index="1"] { animation-delay: 500ms; }
.letter[data-index="2"] { animation-delay: 700ms; }
.letter[data-index="3"] { animation-delay: 900ms; }
.letter[data-index="4"] { animation-delay: 1100ms; }
.letter[data-index="5"] { animation-delay: 1300ms; }
.letter[data-index="6"] { animation-delay: 1500ms; }
.letter[data-index="7"] { animation-delay: 1900ms; }
.letter[data-index="8"] { animation-delay: 2100ms; }

.letter-dot {
    display: inline-block;
    color: #C8A038;
    opacity: 0;
    animation: letterFadeIn 400ms ease-out 1700ms forwards;
}

@keyframes letterFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#lobby-tagline {
    font-family: 'Quicksand', sans-serif;
    font-weight: 400;
    font-size: clamp(14px, 1.5vw, 20px);
    color: #D8C098;
    letter-spacing: 0.06em;
    opacity: 0;
    animation: fadeIn 600ms ease-out 2400ms forwards;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

#scroll-hint {
    margin-top: 48px;
    color: #C8A038;
    opacity: 0;
    animation: fadeIn 600ms ease-out 2800ms forwards, bounceDown 2s ease-in-out 3400ms infinite;
}

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

/* === BADGE GALLERY === */
#badge-gallery {
    position: relative;
    padding: 80px 40px;
    background: linear-gradient(180deg, #0A2030 0%, #1A5A5A 50%, #0A2030 100%);
}

.section-heading {
    font-family: 'Poiret One', cursive;
    font-weight: 400;
    font-size: clamp(32px, 4.5vw, 72px);
    letter-spacing: 0.04em;
    color: #F0F5F0;
    text-align: center;
    margin-bottom: 60px;
}

/* Masonry via CSS columns */
#masonry-grid {
    columns: 3;
    column-gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Badge Cards - Glassmorphic */
.badge-card {
    break-inside: avoid;
    margin-bottom: 20px;
    background: rgba(240, 245, 240, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(200, 160, 56, 0.3);
    border-radius: 8px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    cursor: default;
    transition: transform 300ms ease, backdrop-filter 300ms ease, box-shadow 300ms ease;
    opacity: 0;
    transform: translateY(30px);
}

.badge-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.badge-card:hover {
    transform: translateY(-4px);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 12px 40px rgba(200, 160, 56, 0.2);
}

/* Badge sizes */
.badge-small {
    min-height: 200px;
}

.badge-medium {
    min-height: 260px;
}

.badge-large {
    min-height: 300px;
}

/* Badge SVG frame overlay */
.badge-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.frame-outline {
    fill: none;
    stroke: #C8A038;
    stroke-width: 2;
    opacity: 0.7;
    transition: opacity 300ms ease;
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
}

.badge-card.visible .frame-outline {
    animation: drawBadgeFrame 800ms ease-out forwards;
}

.badge-card:hover .frame-outline {
    opacity: 1;
}

.frame-ornament {
    fill: none;
    stroke: #C8A038;
    stroke-width: 1.5;
    opacity: 0;
    transition: opacity 300ms ease;
}

.badge-card.visible .frame-ornament {
    animation: fadeIn 400ms ease-out 600ms forwards;
}

.badge-card:hover .frame-ornament {
    opacity: 1;
}

@keyframes drawBadgeFrame {
    to {
        stroke-dashoffset: 0;
    }
}

/* Badge content */
.badge-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}

.badge-icon {
    margin-bottom: 8px;
    opacity: 0;
}

.badge-card.visible .badge-icon {
    animation: fadeIn 400ms ease-out 300ms forwards;
}

.badge-label {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #0A2030;
    opacity: 0;
}

.badge-card.visible .badge-label {
    animation: fadeIn 400ms ease-out 400ms forwards;
}

.badge-value {
    font-family: 'Poiret One', cursive;
    font-weight: 400;
    font-size: clamp(24px, 3vw, 40px);
    color: #1A5A5A;
    opacity: 0;
}

.badge-card.visible .badge-value {
    animation: fadeIn 400ms ease-out 500ms forwards;
}

.badge-description {
    font-family: 'Quicksand', sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: #0A2030;
    opacity: 0.8;
    line-height: 1.6;
    opacity: 0;
}

.badge-card.visible .badge-description {
    animation: fadeIn 400ms ease-out 600ms forwards;
}

/* Connection lines overlay */
.connection-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

#connection-lines line {
    stroke: rgba(200, 160, 56, 0.3);
    stroke-width: 1;
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    transition: filter 300ms ease;
}

#connection-lines line.drawn {
    animation: drawConnection 600ms ease-out forwards;
}

#connection-lines line.glow {
    filter: drop-shadow(0 0 4px #C8A038);
}

@keyframes drawConnection {
    to {
        stroke-dashoffset: 0;
    }
}

/* === CREATION STUDIO === */
#creation-studio {
    padding: 100px 40px;
    background: linear-gradient(180deg, #0A2030 0%, #1A5A5A 100%);
    text-align: center;
    overflow: hidden;
}

.studio-subtitle {
    font-family: 'Quicksand', sans-serif;
    font-weight: 400;
    font-size: clamp(14px, 1.2vw, 18px);
    color: #D8C098;
    margin-top: -40px;
    margin-bottom: 60px;
    letter-spacing: 0.04em;
}

#assembly-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    max-width: 800px;
    margin: 0 auto;
}

#assembly-badge {
    position: relative;
    width: 300px;
    height: 300px;
}

/* Assembly outline */
#assembly-outline {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.assembly-rect {
    fill: none;
    stroke: #C8A038;
    stroke-width: 2;
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
}

.assembly-zigzag {
    fill: none;
    stroke: #C8A038;
    stroke-width: 1.5;
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
}

.assembly-step1 .assembly-rect,
.assembly-step1 .assembly-zigzag {
    animation: drawAssembly 800ms ease-out forwards;
}

@keyframes drawAssembly {
    to {
        stroke-dashoffset: 0;
    }
}

/* Assembly fill */
#assembly-fill {
    position: absolute;
    top: 24px;
    left: 24px;
    right: 24px;
    bottom: 24px;
    background: linear-gradient(135deg, rgba(26, 90, 90, 0.3), rgba(216, 192, 152, 0.3));
    border-radius: 4px;
    z-index: 2;
    transform: scale(0);
    transform-origin: center;
}

.assembly-step2 #assembly-fill {
    animation: fillExpand 600ms ease-out forwards;
}

@keyframes fillExpand {
    to {
        transform: scale(1);
    }
}

/* Assembly text */
#assembly-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0;
}

.assembly-step3 #assembly-text {
    animation: fadeIn 500ms ease-out forwards;
}

.assembly-label {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #F0F5F0;
}

.assembly-value {
    font-family: 'Poiret One', cursive;
    font-size: 40px;
    color: #C8A038;
}

/* Assembly ornament */
#assembly-ornament {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    opacity: 0;
}

.assembly-step4 #assembly-ornament {
    animation: fadeIn 500ms ease-out forwards;
}

.ornament-circle {
    fill: none;
    stroke: #C8A038;
    stroke-width: 1;
    opacity: 0.5;
}

.ornament-star {
    fill: none;
    stroke: #C8A038;
    stroke-width: 1;
    opacity: 0.3;
}

.ornament-detail {
    stroke: #C8A038;
    stroke-width: 1.5;
    opacity: 0.6;
}

/* Step indicators */
#assembly-steps {
    display: flex;
    gap: 32px;
}

.step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0.3;
    transition: opacity 300ms ease;
}

.step-indicator.active {
    opacity: 1;
}

.step-number {
    font-family: 'Poiret One', cursive;
    font-size: 28px;
    color: #C8A038;
}

.step-name {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #D8C098;
}

/* === CREDENTIAL NETWORK (Footer) === */
#credential-network {
    position: relative;
    background: #0A2030;
    padding: 80px 40px;
    overflow: hidden;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#network-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.4;
}

.grid-line {
    stroke: rgba(200, 160, 56, 0.15);
    stroke-width: 1;
}

.network-node {
    fill: #C8A038;
    opacity: 0;
    transition: opacity 400ms ease, r 300ms ease;
}

.network-node.visible {
    opacity: 0.6;
}

.network-node:hover {
    opacity: 1;
}

.network-connection {
    stroke: rgba(200, 160, 56, 0.3);
    stroke-width: 1;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    transition: filter 300ms ease;
}

.network-connection.drawn {
    animation: drawConnection 800ms ease-out forwards;
}

#footer-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.footer-title {
    font-family: 'Poiret One', cursive;
    font-weight: 400;
    font-size: clamp(28px, 3.5vw, 56px);
    letter-spacing: 0.04em;
    color: #F0F5F0;
    margin-bottom: 16px;
}

.footer-text {
    font-family: 'Quicksand', sans-serif;
    font-weight: 400;
    font-size: clamp(14px, 1vw, 16px);
    color: #D8C098;
    max-width: 500px;
    margin: 0 auto 32px;
    line-height: 1.75;
}

.footer-brand {
    font-family: 'Poiret One', cursive;
    font-size: 24px;
    color: #C8A038;
    letter-spacing: 0.04em;
}

/* === RESPONSIVE === */
@media (max-width: 900px) {
    #masonry-grid {
        columns: 2;
        padding: 0 20px;
    }

    #badge-gallery {
        padding: 60px 20px;
    }

    #creation-studio {
        padding: 60px 20px;
    }

    #assembly-steps {
        gap: 20px;
    }
}

@media (max-width: 600px) {
    #masonry-grid {
        columns: 1;
        max-width: 400px;
    }

    .section-heading {
        margin-bottom: 40px;
    }

    #credential-lobby {
        min-height: 500px;
    }

    #sunburst {
        width: 350px;
        height: 350px;
    }

    #assembly-badge {
        width: 250px;
        height: 250px;
    }

    #assembly-steps {
        gap: 16px;
    }

    .step-number {
        font-size: 22px;
    }

    #credential-network {
        padding: 60px 20px;
        min-height: 400px;
    }
}