/* Hand-written companion to the generated guns.css (scripts/port-guns.js):
   reveal states their scripts used to set, and the live hero mockups that replace their screenshots. */

/* ---------- reveals ---------- */
.ga8dc35.in { opacity: 1; transform: none; bottom: 0; }
.g-rv { opacity: 0; transform: translateY(-80px) scale(.8); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.g-rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ga8dc35, .g-rv { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* FAQ answers open with a height animation (their JS set max-height inline) */
.g7ff8ad { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .3s ease, opacity .25s ease; }
[data-active=true] > .g7ff8ad { opacity: 1; }

/* header gets a solid backdrop after scrolling, like on guns */
.g385d3f.scrolled .gafa106 { background-color: #0f0f0fcc; }
/* their hero has the header's z-index (99999) and comes later in the page, so on phones, where its top padding runs
   under the header, it covered the menu button and the open menu: keep the header on top */
.g385d3f { z-index: 100000; }
/* their headerWrapperActive: the open phone menu fills the screen (the bar is 100% - 60px of the header) */
.g385d3f.g1039bb { height: 100%; }

/* claim box */
[data-claim-input]::placeholder { color: #5a5a5a; }

/* ---------- hero mockups (sizes copied from their img rules) ---------- */
.hx { position: relative; flex: 1 1 48%; min-width: 360px; transition: transform .35s ease; }
.hx-dash { max-width: 980px; width: clamp(360px, 48vw, 1100px); aspect-ratio: 1162 / 701; }
.hx-fan { max-width: 780px; width: clamp(360px, 48vw, 1000px); aspect-ratio: 740 / 616; }
@media (max-width: 1100px) {
  .hx-dash { display: none; }
  .hx-fan { min-width: unset; width: clamp(260px, 70vw, 600px); }
}
.hx-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: scale(var(--s, .5)); pointer-events: none; }
.hx-dash .hx-stage { width: 1162px; height: 701px; perspective: 2200px; }
.hx-fan .hx-stage { width: 740px; height: 616px; }
/* the fanned cards' 3D edge pokes past phone screens; don't let it scroll the page sideways */
body { overflow-x: clip; }
/* ...but phones still widen the page to fit it (375px screen -> 385px page), so the page wobbled sideways and the fixed
   top bar slid and resized with it: clip at the mockups' own row, which is full width on phones */
@media (max-width: 1100px) { .g8ba1bf { overflow-x: clip; } }

/* dashboard */
.md { position: absolute; left: 20px; top: 20px; width: 1100px; height: 640px; display: flex; gap: 18px; padding: 20px; box-sizing: border-box;
  border-radius: 46px; background: #0b0b0b; border: 3px solid #b0517f; color: #fafafa; font-family: Satoshi, sans-serif;
  transform: rotateY(-16deg) rotateX(9deg) rotateZ(2deg); transform-origin: 30% 50%;
  -webkit-mask-image: linear-gradient(168deg, #000 52%, transparent 80%); mask-image: linear-gradient(168deg, #000 52%, transparent 80%); }
.md i { width: 18px; text-align: center; }
.md-side { width: 230px; display: flex; flex-direction: column; gap: 22px; }
.md-me { display: flex; gap: 12px; align-items: center; }
.md-me b { display: block; font-size: 16px; }
.md-me small, .md small { color: #8f8f8f; font-size: 12px; }
.md-av { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: linear-gradient(135deg, #f27db3, #7d2a55); }
.md-side nav { display: flex; flex-direction: column; gap: 6px; }
.md-side nav span { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 12px; font-size: 16px; font-weight: 500; color: #dcdcdc; }
.md-side nav .on { background: #f27db32e; color: #fff; }
.md-help { margin-top: auto; padding: 18px; border-radius: 22px; background: #141414; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.md-help p { margin: 0; color: #dcdcdc; }
.md-btn { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-radius: 12px; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.md-btn.soft { background: #5661f64b; border: 2px solid #5661f659; }
.md-btn.pink { background: #f27db35c; border: 2px solid #f27db36e; }
.md-main { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.md-main h4 { margin: 6px 0 0; font-size: 17px; font-weight: 500; }
.md-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.md-cards div { display: flex; flex-direction: column; gap: 2px; padding: 16px; border-radius: 18px; background: #2a1621; }
.md-cards i { width: 30px; height: 30px; line-height: 30px; border-radius: 9px; background: #ffffff14; margin-bottom: 14px; font-size: 13px; }
.md-cards b { font-size: 16px; }
.md-row { display: flex; gap: 12px; flex: 1; min-height: 0; }
.md-chart { flex: 1; padding: 16px; border-radius: 18px; background: #121212; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.md-chart em { font-style: normal; color: #f7a3cb; }
.md-chart svg { flex: 1; width: 100%; }
.md-manage { width: 230px; padding: 16px; border-radius: 18px; background: #121212; display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.md-manage > span { display: flex; gap: 8px; align-items: center; padding: 9px 12px; border-radius: 10px; background: #1d1d1d; font-size: 12.5px; }
.md-manage .md-sub { margin-top: 10px; }
.md-manage .md-discord { background: #5865f2; }

/* profiles: the 3D fan of example profiles from the old home page */
.hx-fan .hx-stage { -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 96%); mask-image: linear-gradient(180deg, #000 62%, transparent 96%); }
.fan { position: relative; height: 600px; margin-top: 40px; perspective: 1400px; pointer-events: auto; }
.fan-card { position: absolute; top: 0; left: 50%; width: 300px; height: 500px; border-radius: 30px; overflow: hidden; border: 3px solid #b0517f;
  box-shadow: 0 40px 100px rgba(0,0,0,.6), 0 0 70px color-mix(in srgb, var(--fa) 25%, transparent); transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2,.7,.2,1); font-family: Satoshi, sans-serif; }
.fan-card.f1 { transform: translateX(-125%) rotateY(28deg) rotateX(12deg) translateZ(-60px); }
.fan-card.f2 { transform: translateX(-50%) rotateX(14deg) translateY(-14px); z-index: 2; }
.fan-card.f3 { transform: translateX(25%) rotateY(-28deg) rotateX(12deg) translateZ(-60px); }
.hx-fan:hover .f1 { transform: translateX(-135%) rotateY(18deg) rotateX(6deg) translateZ(-40px); }
.hx-fan:hover .f2 { transform: translateX(-50%) rotateX(4deg) translateY(-24px); }
.hx-fan:hover .f3 { transform: translateX(35%) rotateY(-18deg) rotateX(6deg) translateZ(-40px); }
.fan-bg { position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--fa) 60%, transparent), transparent 55%), radial-gradient(circle at 80% 90%, var(--fa2), transparent 60%), #070505; }
.fan-inner { position: relative; padding: 52px 24px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fan-av { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 32px; color: #fff; background: linear-gradient(135deg, var(--fa), var(--fa2)); box-shadow: 0 0 0 3px rgba(0,0,0,.6), 0 0 0 6px color-mix(in srgb, var(--fa) 55%, transparent), 0 0 30px var(--fa); margin-bottom: 8px; }
.fan-inner > b { font-size: 23px; color: #fff; text-shadow: 0 0 16px var(--fa); }
.fan-inner > small { font-size: 13px; color: #cfc6c6; }
.fan-badges { display: flex; gap: 5px; margin: 6px 0 10px; }
.fan-badges img { width: 17px; height: 17px; filter: drop-shadow(0 0 4px rgba(255,255,255,.5)); }
.fan-pill { font-size: 12px; color: #e6dddd; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); }
.fan-pill .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #23a55a; margin-right: 4px; }
.fan-pres { display: flex; gap: 10px; align-items: center; text-align: left; padding: 9px 11px; border-radius: 12px; background: rgba(255,255,255,.07); width: 100%; box-sizing: border-box; }
.fan-pres > i { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(135deg, #ff4655, #8a0f1f); color: #fff; flex: none; }
.fan-pres b { display: block; font-size: 12px; color: #fff; }
.fan-pres span { font-size: 11px; color: #86efac; }
.fan-icons { display: flex; gap: 14px; font-size: 18px; color: #fff; margin: 14px 0 10px; }
.fan-ln { width: 100%; height: 40px; border-radius: 12px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.06); margin-top: 8px; }
.fan-ln.short { opacity: .7; }

/* pricing table: text values (e.g. "All 5") in the check/cross cells */
.g50fe40.g-txt { font-size: 14px; font-weight: 500; color: #fafafa; white-space: nowrap; }
[data-gift] { cursor: pointer; }

/* pages that still load /assets/site.css: keep its global h1 / section rules off the guns header + footer */
.g385d3f h1, .g8a55f3 h1, .g8a55f3 h3 { letter-spacing: normal; line-height: normal; max-width: none; }

/* "Coming soon" popup (g/site.js SOON) */
.soon-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.6); backdrop-filter: blur(6px); animation: soonIn .2s ease; }
.soon-card { width: min(420px, 100%); display: grid; justify-items: start; gap: 10px; padding: 24px; border-radius: 22px; border: 2px solid rgba(255,255,255,.08); background: #121212; box-shadow: 0 20px 60px rgba(0,0,0,.5); font-family: Satoshi, sans-serif; }
.soon-card h3 { margin: 4px 0 0; color: #f6f3f3; font-size: 22px; font-weight: 600; }
.soon-card p { margin: 0 0 6px; color: #8f8787; font-size: 15.5px; line-height: 1.5; }
.soon-card button { width: 100%; height: 44px; border-radius: 9999px; border: 2px solid rgba(242,125,179,.37); background: rgba(242,125,179,.3); color: #fff; font: 500 16px Satoshi, sans-serif; cursor: pointer; transition: background .2s; }
.soon-card button:hover { background: rgba(242,125,179,.42); }
.soon-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; border: 2px solid rgba(242,125,179,.35); background: rgba(242,125,179,.14); color: #f27db3; font-size: 13px; font-weight: 500; }
@keyframes soonIn { from { opacity: 0; } }