/* css/wicked-site.css
   PERFORMANCE REBUILD
   - Keeps dark cinematic identity
   - Removes global FX overlays, cursor, blend-heavy layers, and costly motion
   - Keeps gallery, hero, banner, lightbox, and general site styling stable
*/

:root{
  --bg0:#070a0f;
  --bg1:#0b0f14;
  --steel:#8aa0b5;
  --ice:#cfe6ff;
  --line:rgba(207,230,255,.14);
  --glow:rgba(120,190,255,.18);
  --panel:rgba(8,10,14,.55);
  --panel-strong:rgba(8,10,14,.72);
  --text:rgba(207,230,255,.88);
  /* Global type — Inter (body), Outfit (nav/UI labels), Cinzel (h1–h6: Trajan / “Trojan Pro”–style roman) */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Outfit", system-ui, sans-serif;
  --font-heading: "Cinzel", "Trajan Pro", "Times New Roman", Georgia, serif;
}

html,
body{
  margin:0;
  padding:0;
  min-height:100%;
  background-color:var(--bg1);
}

html{
  scroll-behavior:auto;
  background:
    radial-gradient(1400px 900px at 20% 10%, var(--glow), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  background-repeat:no-repeat;
  background-size:cover;
  background-attachment:scroll;
}

body{
  font-family:var(--font-sans);
  color:var(--text);
  letter-spacing:.2px;
  background:transparent;
}

body.page{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

body.page > main{
  flex:1 0 auto;
}

body.page > footer,
body.page > .site-footer{
  flex-shrink:0;
}

/* Discourage casual image drag/select (JS blocks context menu & image-only copy) */
img{
  -webkit-user-drag:none;
  user-select:none;
}

/* =========================
   TYPE
========================= */
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6{
  font-family:var(--font-heading);
  letter-spacing:.04em;
  font-weight:700;
}

h1,
.display-4{
  text-transform:uppercase;
}

h1, h2{
  text-shadow:
    0 1px 0 rgba(255,255,255,.05),
    0 4px 14px rgba(0,0,0,.45);
}

.wicked-nav__item.is-active > .wicked-nav__link{
  opacity:1;
  border-bottom:1px solid rgba(140,200,255,.35);
  text-shadow:0 0 18px rgba(140,200,255,.18);
}

/* =========================
   WORLD THEMES
========================= */
.world-wasteland{
  --bg0:#0a0705;
  --bg1:#120c08;
  --line:rgba(243,231,215,.14);
  --accent:#d2a26b;
  --accent2:#a86a3a;
  --glow:rgba(210,162,107,.18);
  color:rgba(243,231,215,.92);
}

.world-wasteland .opacity-75{
  opacity:.78 !important;
}

/* =========================
   BUTTONS
========================= */
.btn-primary{
  background:color-mix(in srgb, var(--accent, #78beff) 22%, transparent);
  border:1px solid color-mix(in srgb, var(--accent, #78beff) 40%, transparent);
  box-shadow:0 0 20px color-mix(in srgb, var(--accent, #78beff) 12%, transparent);
}

.btn-primary:hover{
  background:color-mix(in srgb, var(--accent, #78beff) 30%, transparent);
  border-color:color-mix(in srgb, var(--accent, #78beff) 60%, transparent);
}


/* =========================
   REVEAL
========================= */
.wicked-reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .55s ease, transform .55s ease;
}

.wicked-reveal.is-in{
  opacity:1;
  transform:translateY(0);
}

/* =========================
   SAFE EDGE PANEL
========================= */
.wicked-edge{
  position:relative;
  border:1px solid rgba(207,230,255,.14);
  background:var(--panel);
  box-shadow:0 10px 30px rgba(0,0,0,.30);
  border-radius:18px;
  overflow:hidden;
  margin:1.25rem 0;
  max-width:none;
}

/* =========================
   COLLECT BADGE
========================= */
.tile-collect{
  position:absolute;
  top:14px;
  right:14px;
  z-index:6;
  width:46px;
  height:46px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(145deg, #1a1f27, #0c1015);
  border:1px solid color-mix(in srgb, var(--accent, #78beff) 60%, rgba(255,255,255,.2));
  color:color-mix(in srgb, var(--accent, #78beff) 80%, #ffffff);
  font-size:18px;
  box-shadow:
    inset 0 0 12px rgba(255,150,50,.06),
    0 10px 24px rgba(0,0,0,.55);
  opacity:0;
  transform:translateY(-6px) scale(.90);
  transition:all .22s ease;
  cursor:pointer;
}

.gallery-item:hover .tile-collect{
  opacity:1;
  transform:translateY(0) scale(1);
}

.tile-collect:hover{
  transform:scale(1.08);
}



/* =========================
   BACK TO TOP
========================= */
.wicked-backtotop{
  position:fixed;
  right:28px;
  bottom:28px;
  width:52px;
  height:52px;
  border-radius:16px;
  border:1px solid rgba(207,230,255,.18);
  background:linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,.55));
  color:rgba(220,235,255,.85);
  font-size:18px;
  font-weight:800;
  cursor:pointer;
  box-shadow:
    0 18px 45px rgba(0,0,0,.45),
    0 0 20px rgba(120,190,255,.08);
  opacity:0;
  transform:translateY(20px);
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease, border-color .22s ease;
  z-index:9999;
}

.wicked-backtotop.is-visible{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.wicked-backtotop:hover{
  border-color:rgba(255,120,40,.35);
  box-shadow:
    0 22px 55px rgba(0,0,0,.55),
    0 0 24px rgba(255,120,40,.12);
}

/* =========================
   ABOUT LOGO
========================= */
.about-logo{
  max-width:420px;
  width:100%;
  height:auto;
  opacity:.95;
  transition:transform .25s ease, filter .25s ease;
  filter:
    brightness(1.15)
    contrast(1.08)
    drop-shadow(0 0 12px rgba(160, 190, 255, 0.18));
}

.about-logo:hover{
  filter:
    brightness(1.22)
    contrast(1.12)
    drop-shadow(0 0 14px rgba(160, 190, 255, 0.24));
  transform:translateY(-2px);
}

/* =========================
   COLLECTOR AGREEMENT PAGE
========================= */
.page-collector-agreement{
  background:
    radial-gradient(1200px 600px at 70% 10%, rgba(120,120,120,.10), transparent 60%),
    radial-gradient(1000px 800px at 20% 90%, rgba(60,60,60,.14), transparent 70%),
    #0b0d10;
}

.page-collector-agreement .agreement-hero{
  position:relative;
  overflow:hidden;
  background:linear-gradient(145deg, #2a2d31, #1c1f23);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    inset 0 2px 6px rgba(255,255,255,.04),
    inset 0 -8px 20px rgba(0,0,0,.45),
    0 20px 46px rgba(0,0,0,.45);
}

.page-collector-agreement .agreement-hero > *{
  position:relative;
  z-index:1;
}

.page-collector-agreement .agreement-kicker{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.18);
  padding:.45rem .75rem;
  border-radius:999px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.72rem;
  color:rgba(255,255,255,.70);
}

.page-collector-agreement .agreement-dot{
  width:8px;
  height:8px;
  border-radius:99px;
  background:rgba(122,167,255,1);
  box-shadow:0 0 0 6px rgba(122,167,255,.08);
}

.page-collector-agreement .agreement-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}

.page-collector-agreement .agreement-pill{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  padding:.45rem .65rem;
  border-radius:999px;
  font-size:.78rem;
  color:rgba(255,255,255,.62);
}

.page-collector-agreement .agreement-btn{
  border-radius:999px;
  padding:.6rem .85rem;
}

.page-collector-agreement .agreement-card{
  height:100%;
  background:linear-gradient(145deg, #24272b, #181b1f);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:
    inset 0 1px 3px rgba(255,255,255,.03),
    inset 0 -8px 18px rgba(0,0,0,.45),
    0 14px 34px rgba(0,0,0,.45);
  position:relative;
}

.page-collector-agreement .agreement-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
}

.page-collector-agreement .agreement-num{
  background:linear-gradient(145deg, #1e2125, #14161a);
  border:1px solid rgba(255,255,255,.05);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.04),
    inset 0 -4px 10px rgba(0,0,0,.45);
  border-radius:999px;
  padding:.4rem .6rem;
  font-size:.78rem;
  color:rgba(255,255,255,.55);
  white-space:nowrap;
}

.page-collector-agreement .agreement-subhead{
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:.78rem;
  color:rgba(255,255,255,.74);
}

.page-collector-agreement .agreement-list{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:.65rem;
}

.page-collector-agreement .agreement-list li{
  display:flex;
  gap:.8rem;
  align-items:flex-start;
  padding:.85rem .85rem;
  background:linear-gradient(145deg, #202327, #14161a);
  border:1px solid rgba(255,255,255,.05);
  border-radius:16px;
  box-shadow:
    inset 0 2px 6px rgba(255,255,255,.03),
    inset 0 -6px 18px rgba(0,0,0,.45);
}

.page-collector-agreement .agreement-ico{
  width:22px;
  height:22px;
  border-radius:10px;
  border:1px solid rgba(122,167,255,.45);
  background:
    radial-gradient(14px 14px at 35% 35%, rgba(154,215,255,.24), transparent 60%),
    linear-gradient(180deg, rgba(122,167,255,.12), rgba(255,255,255,.03));
  box-shadow:0 0 0 6px rgba(122,167,255,.05);
  flex:0 0 auto;
  margin-top:2px;
}

.page-collector-agreement .agreement-list strong{
  display:block;
  font-weight:700;
  font-size:.95rem;
  color:rgba(255,255,255,.86);
}

.page-collector-agreement .agreement-note{
  display:flex;
  gap:.75rem;
  align-items:flex-start;
  border-top:1px solid rgba(255,255,255,.12);
  padding-top:1rem;
}

.page-collector-agreement .agreement-badge{
  background:linear-gradient(145deg, #2d3238, #1a1d21);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.04),
    inset 0 -5px 12px rgba(0,0,0,.45);
  color:rgba(200,200,200,.9);
  border-radius:999px;
  padding:.25rem .55rem;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  margin-top:2px;
}

.tier-icon-lg{
  max-width:220px;
  width:100%;
  height:auto;
  filter:drop-shadow(0 0 12px rgba(120,190,255,.12));
  transition:transform .25s ease, filter .25s ease;
}

.tier-icon-lg:hover{
  transform:translateY(-2px) scale(1.02);
  filter:drop-shadow(0 0 16px rgba(120,190,255,.18));
}



/* =========================
   REDUCED MOTION
========================= */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
}

/* =========================
   PRINT
========================= */
@media print{
  .agreement-btn,
  nav,
  .topbar,
  .site-footer,
  .btn,
  .ws-btn,
  .wicked-backtotop{
    display:none !important;
  }

  body{
    background:#fff !important;
    color:#000 !important;
  }

  .wicked-edge{
    box-shadow:none !important;
  }
}