/* =========================================================
   CryptiCrew — Color Explosion · Clean CSS v2
   Focus: dedupe, structure, safe trims (scope: index/home)
   ========================================================= */

/* ------------------ Tokens ------------------ */
:root{
  --ink:#0e0e10;
  --paper:#fffefa;
  --glass:rgba(255,255,255,.65);
  --gradA:#ff6dae; --gradB:#ffd34a; --gradC:#6ee7ff; --gradD:#7cf27c; --gradE:#b084ff;
  --radius:20px;
  --popShadow:0 12px 28px rgba(0,0,0,.22);
  /* fallback if --Unie isn’t defined elsewhere */
  --Unie: linear-gradient(45deg,#ff0000,#ff7f00,#ffff00,#00ff00,#0000ff,#4b0082,#8f00ff);
}

/* === Mobile-lite mode (auto-added on phones) === */
html.mode-mobile-lite .burst,
html.mode-mobile-lite .burst__rings::before,
html.mode-mobile-lite .burst__rings::after,
html.mode-mobile-lite .burst__sparkles::before { animation:none !important; }
html.mode-mobile-lite .hero__confetti { display:none !important; }
/* stop tap/click sparkles */
html.mode-mobile-lite .spark-burst,
html.mode-mobile-lite .spark-trail { display:none !important; }
/* calm UI on tiny touch screens */
html.mode-mobile-lite .btn, html.mode-mobile-lite .chip {
  transition:none !important; transform:none !important; filter:none !important;
}
/* fixed backgrounds are costly on mobile GPUs */
html.mode-mobile-lite .runes-overlay { background-attachment:scroll !important; }

/* ------------------ Base ------------------ */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
  font-size:16px; line-height:1.4;
  overflow-x:hidden;
}

/* ========================================================
   BACKDROPS
   ======================================================== */
.burst{
  position:fixed; inset:-55vmax; z-index:-1;
  background:
    radial-gradient(50% 50% at 20% 30%, rgba(255,255,255,.6), transparent 45%),
    radial-gradient(60% 60% at 80% 10%, rgba(255,255,255,.4), transparent 55%),
    conic-gradient(from 0turn,#ff6dae,#ffd34a,#7cf27c,#6ee7ff,#b084ff,#ff6dae);
  filter:saturate(1.2) contrast(1.05);
  animation:burst-spin 28s linear infinite;
}
@keyframes burst-spin{ to{ transform:rotate(1turn); } }

.burst__rings::before,
.burst__rings::after{
  content:""; position:absolute; inset:0;
  background:repeating-conic-gradient(from 0deg, rgba(255,255,255,.16) 0 6deg, transparent 6deg 12deg);
  mask: radial-gradient(circle at center, #000 40%, transparent 70%);
  animation:burst-pulse 6s ease-in-out infinite alternate;
}
@keyframes burst-pulse{ to{ transform:scale(1.06); } }

.burst__sparkles::before{
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(circle, rgba(255,255,255,.9) 0 2px, transparent 3px);
  background-size:12px 12px; mix-blend-mode:overlay; opacity:.35;
  animation:burst-twinkle 14s linear infinite;
}
@keyframes burst-twinkle{ to{ background-position:800px 400px; } }

/* Stationary runes overlay */
.runes-overlay{
  position:fixed; inset:0; z-index:0;
  background-image:url('../assets/svg/patterns-runes2.svg');
  background-repeat:no-repeat; background-position:center; background-size:cover;
  /* background-attachment:fixed;  (removed per comment to stabilize size) */
  mix-blend-mode:multiply; opacity:.35;
}

/* ========================================================
   HEADER + BRAND + CHIPS
   ======================================================== */
.site-head{
  position:sticky; top:env(safe-area-inset-top,0); z-index:100;
  display:flex; align-items:flex-start; gap:14px;
  padding:12px 16px;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  background:rgba(255,255,255,.35);
  border-bottom:1px solid rgba(0,0,0,.06);
  overflow:visible;
  transform:translateZ(0); /* iOS sticky quirk */
}

.brand{
  position:relative; display:flex; align-items:flex-start; gap:10px;
  text-decoration:none; color:var(--ink); font-weight:800; letter-spacing:.5px; overflow:visible;
}
.brand__logo,.brand__word{
  position:relative; top:0; display:block; height:auto; transform-origin:top left;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));
}
.brand__logo{ width:clamp(100px,7vw,145px); margin-bottom:-62px; }
.brand__word{ width:clamp(250px,20vw,350px); margin-bottom:-40px; filter:drop-shadow(0 3px 6px rgba(0,0,0,.25)); }

.chip-nav{
  margin-left:auto;
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:flex-end;
}
.chip{
  display:inline-block; padding:10px 14px; border-radius:999px;
  font-weight:700; text-decoration:none; color:#fff;
  background:linear-gradient(120deg,var(--gradA),var(--gradB));
  box-shadow:0 6px 12px rgba(0,0,0,.18);
  transform:translateY(0);
  transition:.25s transform,.25s box-shadow,.25s filter;
}
.chip:hover{ transform:translateY(-2px); box-shadow:0 10px 20px rgba(0,0,0,.22); filter:saturate(130%) brightness(1.02); }
.chip[aria-current="page"]{ outline:2px solid rgba(0,0,0,.25); filter:brightness(1.1); }

/* Thread-themed chips */
.site-head .chip[data-thread="home"]{ background:#fff; color:#111; box-shadow:inset 0 0 0 2px #000, 0 6px 12px rgba(0,0,0,.18); }
.site-head .chip[data-thread="books"]{ background:#FFE8A3; color:#3B2A00; box-shadow:inset 0 0 0 2px #FFB300, 0 6px 12px rgba(0,0,0,.18); }
.site-head .chip[data-thread="characters"]{ background:#CFF2FF; color:#003844; box-shadow:inset 0 0 0 2px #00B7D8, 0 6px 12px rgba(0,0,0,.18); }
.site-head .chip[data-thread="blog"]{ background:#FFD3C2; color:#3B1000; box-shadow:inset 0 0 0 2px #FF642E, 0 6px 12px rgba(0,0,0,.18); }
.site-head .chip[data-thread="merch"]{ background:#FFD4F4; color:#3E0030; box-shadow:inset 0 0 0 2px #FF4FC7, 0 6px 12px rgba(0,0,0,.18); }
.site-head .chip[data-thread="games"]{ background:#D9FFD1; color:#113800; box-shadow:inset 0 0 0 2px #43C000, 0 6px 12px rgba(0,0,0,.18); }
.site-head .chip[data-thread="about"]{ background:#E2D9FF; color:#1C0E4A; box-shadow:inset 0 0 0 2px #7A54FF, 0 6px 12px rgba(0,0,0,.18); }

/* --- hamburger button --- */
.nav-toggle{
  display:none; margin-left:auto; width:42px; height:42px; border-radius:10px;
  border:1px solid rgba(0,0,0,.15); background:rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 6px 12px rgba(0,0,0,.12); cursor:pointer; position:relative;
}
.nav-toggle .bar{
  position:absolute; left:8px; right:8px; height:3px; border-radius:3px;
  background:#111; transition:transform .2s, opacity .2s, top .2s;
}
.nav-toggle .bar:nth-child(1){ top:12px; }
.nav-toggle .bar:nth-child(2){ top:20px; }
.nav-toggle .bar:nth-child(3){ top:28px; }
.nav-open .nav-toggle .bar:nth-child(1){ top:20px; transform:rotate(45deg); }
.nav-open .nav-toggle .bar:nth-child(2){ opacity:0; }
.nav-open .nav-toggle .bar:nth-child(3){ top:20px; transform:rotate(-45deg); }

/* --- phone dropdown behavior --- */
@media (max-width:640px){
  .nav-toggle{ display:block; }
  .site-head{ align-items:center; }
  .chip-nav{
    position:absolute; left:0; right:0; top:calc(100% + 6px);
    display:grid; grid-template-columns:1fr 1fr; gap:10px;
    padding:10px 12px 14px; margin:0; background:rgba(255,255,255,.85);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(0,0,0,.06); box-shadow:0 8px 20px rgba(0,0,0,.18);
    border-radius:0 0 14px 14px; z-index:90;
    max-height:0; overflow:hidden; opacity:0; pointer-events:none;
    transition:max-height .25s ease, opacity .2s ease;
  }
  .nav-open .chip-nav{ max-height:60vh; opacity:1; pointer-events:auto; }
  .chip{ display:block; text-align:center; }
}

/* ========================================================
   HERO
   ======================================================== */
.hero{ position:relative; min-height:78vh; display:grid; place-items:center; padding:8vmin 4vmin; }
.hero__art{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.hero__content{ position:relative; z-index:1; padding:28px 28px 32px; max-width:980px; }
.card{ border-radius:var(--radius); box-shadow:var(--popShadow); }
.glass{ background-color:var(--glass); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.55); }

h1{ font-size:clamp(40px,7vw,84px); line-height:.95; margin:0 0 12px; text-shadow:0 3px 0 rgba(0,0,0,.08); }
h1 .pop{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  display:block; letter-spacing:2px;
  background:linear-gradient(90deg,var(--gradA),var(--gradB),var(--gradC),var(--gradD),var(--gradE));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
h1 .sub{ display:block; font-size:.42em; letter-spacing:1px; opacity:.9; }
.lede{ font-size:clamp(16px,2.4vw,22px); margin:0 0 16px; }
.hero__cta{ display:flex; gap:12px; flex-wrap:wrap; }

.btn{
  --bg:linear-gradient(120deg,var(--gradA),var(--gradB));
  display:inline-block; text-decoration:none; color:#fff; font-weight:800;
  padding:14px 18px; border-radius:16px; border:0; cursor:pointer;
  background:var(--bg); box-shadow:var(--popShadow);
  transition:transform .2s, box-shadow .2s;
}
.btn.small{ padding:10px 14px; font-weight:700; }
.btn:hover{ transform:translateY(-1px) scale(1.02); box-shadow:0 14px 28px rgba(0,0,0,.24); }
.btn--primary{ --bg:linear-gradient(120deg,#ff6dae,#b084ff); }
.btn--ghost{ --bg:linear-gradient(120deg,#6ee7ff,#7cf27c); color:#0f1020; }

.hero__confetti{
  position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle, rgba(255,255,255,.8) 0 3px, transparent 3px);
  background-size:22px 22px; mix-blend-mode:overlay;
  animation:confetti 18s linear infinite;
}
@keyframes confetti{ to{ background-position:1200px 600px; } }

/* ========================================================
   SECTIONS
   ======================================================== */
.section{ padding:6vmin 4vmin; z-index:10; position:relative; }
.section__head{ text-align:center; margin-bottom:16px; }
.section__head h2{ font-size:clamp(28px,5vw,56px); margin:0 0 6px; }

/* ========================================================
   HERO CAROUSEL (Featured Characters)
   ======================================================== */
.hero-carousel{
  position:relative;
  margin:clamp(18px,3vw,28px) auto 0;
  max-width:1200px;
  padding:0 clamp(8px,2vw,16px);
}
.hc-viewport{ overflow:hidden; border-radius:22px; padding-top:0; transform:translateZ(0); }
.hc-track{
  display:flex; gap:clamp(12px,1.6vw,16px);
  will-change:transform; transition:transform .6s cubic-bezier(.22,1,.36,1);
  padding:clamp(10px,2vw,14px);
}
.hc-track > li{
  list-style:none;
  flex:0 0 calc((100% - 4 * clamp(12px,1.6vw,16px))/5);
  position:relative;
}
@media (max-width:1024px){ .hc-track > li{ flex-basis:calc((100% - 2 * clamp(12px,1.6vw,16px))/3); } }
@media (max-width:640px){ .hc-track > li{ flex-basis:80%; } }

/* Card */
.hc-card{
  --hc-radius:24px;
  position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  overflow:visible; background:#fff; border:4px solid #000; border-radius:var(--hc-radius);
  box-shadow:0 14px 30px rgba(0,0,0,.18), inset 0 10px 18px rgba(255,255,255,.5);
  padding:clamp(14px,2.2vw,18px); min-height:clamp(180px,26vw,260px);
}
/* Rainbow ring variant (Unie) */
.hero-carousel .hc-card[data-rainbow="true"]{
  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.85)) padding-box,
    conic-gradient(#ff3e3e,#ff7a00,#ffd400,#49ff00,#00ffd1,#0080ff,#7a00ff,#ff00d0,#ff3e3e) border-box;
  border:4px solid transparent; border-radius:24px;
}
/* Art + text positions use the same overhang constant as the viewport */
.hc-art{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:calc(100% - clamp(90px,14vw,180px));
  height:clamp(120px,18vw,220px); width:auto;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.35)); pointer-events:none;
}
.hc-name{
  margin:calc(clamp(90px,14vw,180px) - 20px) 0 .35rem;
  font-weight:900; font-size:clamp(18px,2.2vw,22px);
}
.hc-sub{ font-size:13px; opacity:.75; }

/* Nav */
.hc-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:50%; z-index:2;
  border:3px solid #000; background:#fff; cursor:pointer;
  box-shadow:0 8px 16px rgba(0,0,0,.22);
  display:grid; place-items:center;
  font-size:22px; font-weight:900;
}
.hc-nav.prev{ left:8px; }
.hc-nav.next{ right:8px; }
.hc-nav:active{ transform:translateY(-50%) scale(.96); }

/* ========================================================
   SPLIT PANEL
   ======================================================== */
.split{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.pane{ padding:18px; }

/* ========================================================
   MERCH GRID + GLOSSY CARDS
   ======================================================== */
.shop__grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.merch{ padding:12px; }
.merch__art{ height:150px; border-radius:14px; margin-bottom:16px; position:relative; overflow:visible; background:#eee; }
.merch .price{ font-weight:900; }

.gloss{ position:relative; overflow:hidden; background:rgba(255,255,255,.9); }
.gloss::before{
  content:""; position:absolute; left:0; right:0; top:0; height:56%;
  border-radius:inherit;
  background:radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.85), rgba(255,255,255,0) 60%);
  filter:blur(8px); pointer-events:none; mix-blend-mode:screen; z-index:0;
}

/* Sticker floats above gloss */
.merch.sticker-card{ position:relative; overflow:visible; }
.merch.sticker-card.gloss::before{ z-index:1; }
.merch__art .sticker{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-58%);
  width:clamp(180px,70%,200px); height:auto; z-index:2; pointer-events:none;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.28));
}

/* Background variants */
.dotbg{
  background-image:
    radial-gradient(circle at 14px 14px, rgba(255,255,255,.9) 0 6px, transparent 7px),
    url('../svg/patterns-runes2.svg');
  background-size:cover; background-blend-mode:overlay;
}
.raybg{ background-image:conic-gradient(from 0turn,#ff6dae,#ffd34a,#7cf27c,#6ee7ff,#b084ff,#ff6dae); }
.wavebg{
  background-image:
    repeating-conic-gradient(from .2turn, rgba(255,255,255,.3) 0 10deg, transparent 10deg 20deg),
    linear-gradient(90deg,var(--gradC),var(--gradE));
}

/* ========================================================
   FOOTER
   ======================================================== */
.site-foot{ text-align:center; padding:20px 12px 40px; position:relative; z-index:10; }
.runes-band{
  display:block; height:clamp(40px,6vw,80px); margin-bottom:0;
  background:url('../svg/patterns-runes2.svg?v=2025100') repeat;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.2));
  animation:runes-slide 30s linear infinite;
}
@keyframes runes-slide{ to{ background-position:1000px 0; } }

/* Reduce gap before footer specifically after #shop */
#shop.section{ padding-bottom:0 !important; margin-bottom:0 !important; }
#shop + .site-foot{ margin-top:0 !important; padding-top:clamp(16px,3vw,28px); }

/* ========================================================
   HELPERS & ACCESSIBILITY
   ======================================================== */
.pop-shadow{ text-shadow:0 3px 0 rgba(0,0,0,.12); }

/* Tap/click sparkles */
.spark-burst, .spark-trail{
  position:fixed; left:var(--x); top:var(--y); transform:translate(-50%,-50%);
  width:8px; height:8px; border-radius:50%;
  pointer-events:none; z-index:99999; will-change:transform,opacity,filter;
}
.spark-burst{
  background:#fff; box-shadow:0 0 12px rgba(255,255,255,.95);
  animation:spark-burst-move .7s ease forwards;
}
@keyframes spark-burst-move{
  to{ transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0); opacity:0; filter:blur(1px); }
}
.spark-trail{
  background:radial-gradient(circle,#fff 0 40%, rgba(255,255,255,0) 41% 100%);
  opacity:.95; animation:spark-trail-fade .45s ease-out forwards;
}
@keyframes spark-trail-fade{
  to{ transform:translate(calc(-50% + calc(var(--dx)*.4)), calc(-50% + calc(var(--dy)*.4))) scale(.2); opacity:0; filter:blur(1px); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  .spark-burst,.spark-trail,.hero__confetti,.burst,.runes-band{ animation:none !important; }
}

/* Marquee (single, de-duped) */
.marquee{ display:flex; gap:18px; overflow:auto; padding:8px; }

/* Pill (single, de-duped) */
.pill{
  --bg:linear-gradient(120deg,#ff6dae,#b084ff);
  color:#fff; font-weight:700; padding:10px 14px; border-radius:999px;
  background:var(--bg); border:1px solid rgba(0,0,0,.08);
  white-space:nowrap;
  /* use same shadow var for consistent depth */
  box-shadow:var(--popShadow);
  transition:transform .2s, box-shadow .2s;
}

/* Header height + anchor offset helpers */
:root{ --headH:72px; }
.section:first-of-type{ padding-top:max(6vmin, calc(var(--headH) + 12px)); }
[id], .section__head, h2, h3{ scroll-margin-top:calc(var(--headH) + 12px); }

/* =========================================================
   CryptiCrew · Blog Pagination (Cute Candy Style)
   ========================================================= */
.section.blog .pager{
  margin:clamp(24px,3vw,40px) 0; text-align:center;
  display:flex; justify-content:center; align-items:center;
}
.section.blog .pager ul{
  list-style:none; margin:0; padding:0;
  display:inline-flex; gap:10px; flex-wrap:wrap; justify-content:center;
}
.section.blog .pager__link{
  display:inline-block; padding:10px 16px; border-radius:999px;
  font-weight:800; font-family:inherit; font-size:.9rem; text-decoration:none; color:#111; position:relative;
  background:linear-gradient(145deg,#fff,#f2f2f2);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 6px 14px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.7);
  transition:all .18s ease;
}
.section.blog .pager__link:hover:not(.is-disabled){
  transform:translateY(-2px);
  background:linear-gradient(135deg,#ffe7ff,#d7f0ff,#fff1d7);
  box-shadow:0 10px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.8);
}
.section.blog .pager__link.is-active{
  background:linear-gradient(120deg,#ff99f0,#ffde6b,#8effff);
  color:#111; border-color:transparent; box-shadow:0 6px 18px rgba(0,0,0,.22);
  animation:pagerFloat 3s ease-in-out infinite;
}
.section.blog .pager__link.is-disabled{
  opacity:.45; pointer-events:none;
  background:linear-gradient(145deg,#f8f8f8,#eee);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.section.blog .pager__dots{ color:rgba(0,0,0,.4); font-weight:700; align-self:center; }
@keyframes pagerFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-2px); } }
.section.blog .pager__link.is-active:hover{
  background:linear-gradient(90deg,#ff3e3e,#ff7a00,#ffd400,#49ff00,#00ffd1,#0080ff,#7a00ff,#ff00d0,#ff3e3e);
  background-size:200% 200%; animation:rainbowPulse 3s linear infinite;
}
@keyframes rainbowPulse{ 0%{ background-position:0% 50%; } 100%{ background-position:100% 50%; } }