/* karmabadge.com -- holographic foil badge collector */

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

:root{
    --void:#0B0B1A;
    --abyss:#141432;
    --magenta:#E040A0;
    --cyan:#40E0D0;
    --gold:#F0C040;
    --silver:#D0D0E0;
    --pearl:#F0F0FF;
    --violet:#6A4C93;
}

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

body{
    background:var(--void);
    color:var(--silver);
    font-family:'Philosopher',serif;
    font-weight:400;
    font-size:1.15rem;
    line-height:1.75;
    overflow-x:hidden;
}

/* Mandala background */
.mandala-bg{
    position:fixed;inset:0;
    pointer-events:none;
    z-index:0;
    opacity:0.05;
    background:radial-gradient(circle 100px at 50% 50%,var(--gold),transparent 70%),
               radial-gradient(circle 80px at 30% 30%,var(--gold),transparent 70%),
               radial-gradient(circle 80px at 70% 70%,var(--gold),transparent 70%);
    background-size:200px 200px;
}

/* Ring nav */
.ring-nav{
    position:fixed;
    right:1.5rem;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    gap:1rem;
    z-index:100;
}

.ring-indicator{
    width:12px;height:12px;
    border-radius:50%;
    border:2px solid var(--violet);
    background:transparent;
    cursor:pointer;
    transition:background 0.3s,border-color 0.3s;
}

.ring-indicator.active{
    background:var(--gold);
    border-color:var(--gold);
    box-shadow:0 0 8px rgba(240,192,64,0.5);
}

/* Rings (sections) */
.ring{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:clamp(2rem,4vw,4rem);
    position:relative;
    z-index:1;
}

.ring-heading{
    font-family:'Cinzel',serif;
    font-weight:700;
    font-size:clamp(1.5rem,3vw,2.8rem);
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--pearl);
    margin-bottom:2.5rem;
    text-align:center;
}

/* Hero badge */
.hero-badge{
    position:relative;
    width:clamp(200px,40vmin,320px);
    height:clamp(200px,40vmin,320px);
}

.badge-disc{
    width:100%;height:100%;
    border-radius:50%;
    background:conic-gradient(from 180deg,var(--magenta),var(--gold),var(--cyan),var(--violet),var(--magenta));
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    animation:foilShift 8s linear infinite;
}

@keyframes foilShift{
    from{filter:hue-rotate(0deg)}
    to{filter:hue-rotate(360deg)}
}

.badge-inner-ring{
    position:absolute;
    inset:12%;
    border-radius:50%;
    background:radial-gradient(circle at center,var(--abyss),transparent 80%);
}

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

.badge-emblem{
    position:relative;
    z-index:2;
    font-family:'Cinzel',serif;
    font-weight:700;
    font-size:clamp(2.5rem,6vw,4rem);
    color:var(--pearl);
    text-shadow:0 0 20px rgba(240,192,64,0.5);
}

.badge-foil-border{
    position:absolute;
    inset:-4px;
    border-radius:50%;
    border:2px solid transparent;
    background:conic-gradient(from 0deg,var(--magenta),var(--gold),var(--cyan),var(--violet),var(--magenta)) border-box;
    -webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
    mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    animation:foilShift 6s linear infinite reverse;
}

.hero-whisper{
    font-family:'Share Tech Mono',monospace;
    font-size:0.75rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--violet);
    margin-top:2rem;
    opacity:0.6;
}

/* Hex cards (origin) */
.hex-arc{
    display:flex;
    gap:1.5rem;
    flex-wrap:wrap;
    justify-content:center;
    max-width:900px;
}

.hex-card{
    background:linear-gradient(135deg,rgba(224,64,160,0.08),rgba(64,224,208,0.08),rgba(240,192,64,0.05));
    background-color:var(--abyss);
    border:1px solid rgba(240,192,64,0.2);
    backdrop-filter:blur(8px);
    padding:clamp(1.5rem,2.5vw,2rem);
    flex:1;
    min-width:240px;
    max-width:300px;
    clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
    text-align:center;
    padding-top:3rem;
    padding-bottom:3rem;
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.6s ease,transform 0.6s ease;
}

.hex-card.revealed{opacity:1;transform:translateY(0)}

.hex-title{
    font-family:'Cinzel',serif;
    font-weight:700;
    font-size:1.2rem;
    color:var(--pearl);
    letter-spacing:0.08em;
    margin-bottom:0.75rem;
}

.hex-text{
    font-size:0.95rem;
    color:var(--silver);
    line-height:1.65;
}

.hex-serial{
    font-family:'Share Tech Mono',monospace;
    font-size:0.7rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--violet);
    display:block;
    margin-top:1rem;
}

/* Badge marquee */
.badge-marquee{
    width:100%;
    overflow:hidden;
    padding:2rem 0;
}

.marquee-track{
    display:flex;
    gap:2rem;
    animation:marqueeScroll 20s linear infinite;
    width:max-content;
}

@keyframes marqueeScroll{
    from{transform:translateX(0)}
    to{transform:translateX(-50%)}
}

.mini-badge{
    width:100px;height:100px;
    border-radius:50%;
    background:conic-gradient(from var(--hue,0deg),var(--magenta),var(--gold),var(--cyan),var(--violet),var(--magenta));
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
    animation:foilShift 6s linear infinite;
}

.mini-badge span{
    font-family:'Cinzel',serif;
    font-size:0.65rem;
    letter-spacing:0.06em;
    color:var(--pearl);
    text-shadow:0 0 8px rgba(0,0,0,0.8);
}

/* Bento grid */
.bento-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:repeat(2,auto);
    gap:1rem;
    max-width:700px;
    width:100%;
}

.bento-cell{
    background:var(--abyss);
    border:3px inset rgba(240,192,64,0.15);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:2rem 1rem;
    opacity:0;
    transform:scale(0.95);
    transition:opacity 0.5s ease,transform 0.5s ease;
}

.bento-cell.revealed{opacity:1;transform:scale(1)}

.cell-1{aspect-ratio:1}
.cell-2{aspect-ratio:3/2}
.cell-3{aspect-ratio:2/3}
.cell-4{aspect-ratio:3/2}
.cell-5{aspect-ratio:1}
.cell-6{aspect-ratio:2/3}

.cell-badge-icon{
    width:48px;height:48px;
    border-radius:50%;
    background:conic-gradient(from 0deg,var(--magenta),var(--gold),var(--cyan),var(--magenta));
    margin-bottom:0.75rem;
}

.cell-label{
    font-family:'Share Tech Mono',monospace;
    font-size:0.7rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--gold);
}

/* Pledge */
.pledge-badge{
    position:relative;
    width:clamp(180px,35vmin,280px);
    height:clamp(180px,35vmin,280px);
    opacity:0;
    transform:scale(0.5);
    transition:opacity 0.8s ease,transform 0.8s cubic-bezier(0.34,1.56,0.64,1);
}

.pledge-badge.assembled{
    opacity:1;
    transform:scale(1);
}

.large-disc{
    background:conic-gradient(from 180deg,var(--magenta),var(--gold),var(--cyan),var(--violet),var(--magenta));
}

.pledge-text{
    font-family:'Philosopher',serif;
    font-size:clamp(1rem,1.5vw,1.3rem);
    color:var(--silver);
    text-align:center;
    max-width:38ch;
    margin-top:2rem;
}

.pledge-domain{
    font-family:'Cinzel',serif;
    font-weight:700;
    font-size:clamp(1rem,2vw,1.5rem);
    letter-spacing:0.18em;
    color:var(--pearl);
    margin-top:1.5rem;
}

/* Responsive */
@media(max-width:768px){
    .ring-nav{display:none}
    .hex-card{clip-path:none;border-radius:12px;padding:1.5rem}
    .bento-grid{grid-template-columns:1fr 1fr}
    .bento-cell{aspect-ratio:auto}
}

@media(prefers-reduced-motion:reduce){
    .badge-disc,.badge-foil-border,.mini-badge{animation:none;filter:none}
    .marquee-track{animation:none}
    .hex-card,.bento-cell{opacity:1;transform:none;transition:none}
    .pledge-badge{opacity:1;transform:none;transition:none}
}