/* ============================================================
   REAPER CALLS — Design System
   Dark / Fierce / Adrenaline. Not a Call. A Death Sentence.
   ============================================================ */

:root{
  --ink:#0a0a0a;          /* near black */
  --coal:#111113;         /* base bg */
  --char:#161618;         /* charcoal surface */
  --char2:#1d1d20;        /* raised surface */
  --line:#2a2a2e;         /* hairline border */
  --blood:#c40016;        /* primary blood red */
  --blood2:#e11021;       /* hotter crimson */
  --ember:#ff2a1a;        /* glow */
  --bone:#efe9db;         /* bone white */
  --ash:#a7a29a;          /* muted text */
  --ash2:#6f6b64;         /* dim text */
  --steel:#7f93a0;        /* cold steel accent */
}

*{ -webkit-tap-highlight-color: transparent; }
html{ scroll-behavior:smooth; }
body{
  background:var(--coal);
  color:var(--bone);
  font-family:'Roboto',system-ui,sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Type ---------- */
.font-display{ font-family:'Anton',sans-serif; letter-spacing:.01em; }
.font-cond{ font-family:'Oswald',sans-serif; }
.stroke-red{ -webkit-text-stroke:1.5px var(--blood2); color:transparent; }
.headline{ line-height:.92; text-transform:uppercase; }

/* ---------- Film grain overlay ---------- */
.grain::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:60;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Accent utilities ---------- */
.text-blood{ color:var(--blood2); }
.bg-blood{ background:var(--blood); }
.glow-red{ box-shadow:0 0 0 1px rgba(225,16,33,.35), 0 0 28px -4px rgba(225,16,33,.55); }
.hair{ border-color:var(--line); }

/* Red laser divider */
.laser{ height:2px; background:linear-gradient(90deg,transparent,var(--blood2),transparent); box-shadow:0 0 14px rgba(225,16,33,.7); }

/* ---------- Diagonal cut sections ---------- */
.cut-b{ clip-path:polygon(0 0,100% 0,100% calc(100% - 46px),0 100%); }
.cut-t{ clip-path:polygon(0 46px,100% 0,100% 100%,0 100%); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase;
  letter-spacing:.14em; font-size:.95rem; padding:.95rem 2rem;
  border:1px solid transparent; cursor:pointer; transition:all .22s cubic-bezier(.2,.7,.2,1);
  position:relative; clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}
.btn-primary{ background:var(--blood); color:#fff; box-shadow:0 0 22px -6px rgba(225,16,33,.7); }
.btn-primary:hover{ background:var(--blood2); transform:translateY(-2px) scale(1.02); box-shadow:0 8px 34px -6px rgba(225,16,33,.85); }
.btn-ghost{ background:transparent; color:var(--bone); border:1px solid var(--line); }
.btn-ghost:hover{ border-color:var(--blood2); color:#fff; transform:translateY(-2px); box-shadow:0 0 22px -8px rgba(225,16,33,.6); }

/* ---------- Cards ---------- */
.card{ background:linear-gradient(180deg,var(--char2),var(--char)); border:1px solid var(--line); }
.card:hover{ border-color:rgba(225,16,33,.5); }

/* red top-corner tick used on section labels */
.tick{ display:inline-flex; align-items:center; gap:.6rem; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.35em; font-size:.72rem; color:var(--blood2); }
.tick::before{ content:""; width:26px; height:2px; background:var(--blood2); box-shadow:0 0 10px var(--ember); }

/* ---------- Header ---------- */
.nav-link{ font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.18em; font-size:.82rem; color:var(--ash); position:relative; padding:.25rem 0; transition:color .2s; }
.nav-link:hover,.nav-link.active{ color:#fff; }
.nav-link::after{ content:""; position:absolute; left:0; bottom:-4px; height:2px; width:0; background:var(--blood2); box-shadow:0 0 8px var(--ember); transition:width .25s; }
.nav-link:hover::after,.nav-link.active::after{ width:100%; }

.site-header{ background:rgba(10,10,10,.72); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }

/* Expanded mobile drawer: a little more breathing room between options */
[data-drawer]{ gap:1.5rem; padding-top:1.25rem; padding-bottom:1.25rem; }
[data-drawer] .nav-link{ padding:.4rem 0; }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }

/* ---------- Hero specifics ---------- */
.hero-vignette{ background:radial-gradient(120% 90% at 50% 15%, rgba(196,0,22,.16), transparent 55%), radial-gradient(80% 60% at 50% 100%, rgba(0,0,0,.9), transparent); }

/* Darkened photo backdrop for the landing hero */
.hero-photo{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.hero-photo img{
  width:100%; height:100%; object-fit:cover;
  object-position:72% 50%;      /* keeps the call + hands in frame on the right */
  filter:saturate(.9) brightness(.92);
}
/* dark scrim: heavy on the left where the copy sits, fading to --coal at the bottom */
.hero-photo::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(8,8,9,.93) 0%, rgba(8,8,9,.80) 30%, rgba(8,8,9,.34) 60%, rgba(8,8,9,.42) 100%),
    linear-gradient(180deg, rgba(8,8,9,.6) 0%, rgba(8,8,9,.05) 24%, rgba(8,8,9,.05) 60%, rgba(8,8,9,.6) 86%, var(--coal) 100%),
    radial-gradient(120% 90% at 50% 12%, rgba(196,0,22,.16), transparent 58%);
}
@media (max-width:1023px){
  /* copy spans the full width on small screens — flatten the scrim and pull the subject in */
  .hero-photo img{ object-position:60% 45%; }
  .hero-photo::after{
    background:
      linear-gradient(180deg, rgba(8,8,9,.8) 0%, rgba(8,8,9,.72) 34%, rgba(8,8,9,.88) 70%, var(--coal) 100%),
      radial-gradient(120% 90% at 50% 12%, rgba(196,0,22,.16), transparent 58%);
  }
}

.skull-float{ animation:float 7s ease-in-out infinite; filter:drop-shadow(0 30px 60px rgba(0,0,0,.8)) drop-shadow(0 0 40px rgba(196,0,22,.25)); }
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-16px) } }

/* floating cut-out product art (transparent PNG — no frame, no plate) */
.art-float{ animation:float 8.5s ease-in-out infinite; filter:drop-shadow(0 34px 44px rgba(0,0,0,.85)) drop-shadow(0 0 46px rgba(196,0,22,.22)); }

/* pulsing ember ring behind hero art */
.ember-ring{ background:radial-gradient(circle, rgba(225,16,33,.28), transparent 62%); animation:pulse 4.5s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:.55; transform:scale(1) } 50%{ opacity:1; transform:scale(1.06) } }

/* marquee */
.marquee{ display:flex; gap:3rem; white-space:nowrap; animation:scrollx 26s linear infinite; }
@keyframes scrollx{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* ---------- Infinite card rail (testimonials) ---------- */
.rail{ position:relative; overflow:hidden; }
/* edge fades so cards enter and leave instead of getting chopped */
.rail::before,.rail::after{
  content:""; position:absolute; top:0; bottom:0; z-index:2; pointer-events:none;
  width:clamp(36px,7vw,140px);
}
.rail::before{ left:0; background:linear-gradient(90deg,var(--coal),rgba(17,17,19,0)); }
.rail::after{ right:0; background:linear-gradient(270deg,var(--coal),rgba(17,17,19,0)); }
/* no flex gap here on purpose — the loop only lands seamlessly if the spacing
   lives inside each card's box (see .rail-card margin-right) */
.rail-track{ display:flex; align-items:stretch; width:max-content; }
.rail-track.is-running{ animation:railx var(--rail-dur,60s) linear infinite; will-change:transform; }
.rail:hover .rail-track.is-running{ animation-play-state:paused; }
@keyframes railx{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(-50%,0,0) } }
.rail-card{ flex:none; width:min(84vw,360px); margin-right:1.5rem; display:flex; flex-direction:column; }
.rail-card blockquote{ flex:1; }

@media (prefers-reduced-motion: reduce){
  /* no auto-scroll — let people swipe the row themselves */
  .rail{ overflow-x:auto; scroll-snap-type:x mandatory; }
  .rail-track.is-running{ animation:none; }
  .rail-card{ scroll-snap-align:center; }
}

/* selectable option chips */
.chip{ border:1px solid var(--line); background:var(--char); font-family:'Oswald',sans-serif; letter-spacing:.06em; transition:all .18s; cursor:pointer; }
.chip:hover{ border-color:rgba(225,16,33,.6); }
.chip.sel{ border-color:var(--blood2); background:rgba(196,0,22,.12); box-shadow:0 0 18px -6px rgba(225,16,33,.7); color:#fff; }
.chip:disabled{ opacity:.35; cursor:not-allowed; border-color:var(--line); box-shadow:none; }
.chip:disabled:hover{ border-color:var(--line); }

/* Quantity field — strip the native spinners so it reads as one of our chips */
.qty-input{ color:#fff; -moz-appearance:textfield; appearance:textfield; }
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.qty-input:focus-visible{ outline:2px solid var(--blood2); outline-offset:2px; }

/* ---------- FAQ accordion ---------- */
.faq{ position:relative; }
.faq + .faq{ margin-top:.75rem; }
.faq > summary{
  list-style:none; cursor:pointer; display:flex; align-items:flex-start; gap:1rem;
  padding:1.15rem 1.35rem; font-family:'Oswald',sans-serif; font-weight:500;
  font-size:1.02rem; letter-spacing:.02em; color:var(--bone);
  transition:color .2s, background .2s;
}
.faq > summary::-webkit-details-marker{ display:none; }
.faq > summary::marker{ content:""; }
.faq > summary:hover{ color:#fff; background:rgba(196,0,22,.06); }
.faq > summary:focus-visible{ outline:2px solid var(--blood2); outline-offset:-2px; }
/* red diamond bullet */
.faq > summary::before{
  content:""; flex:none; width:9px; height:9px; margin-top:.45rem;
  background:var(--blood2); transform:rotate(45deg); box-shadow:0 0 8px var(--ember);
  transition:transform .25s, box-shadow .25s;
}
.faq[open] > summary{ color:#fff; }
.faq[open] > summary::before{ transform:rotate(135deg) scale(1.15); box-shadow:0 0 14px var(--ember); }
.faq[open]{ border-color:rgba(225,16,33,.5); }
/* +/− toggle sign */
.faq-sign{ margin-left:auto; flex:none; position:relative; width:16px; height:16px; margin-top:.28rem; }
.faq-sign::before,.faq-sign::after{
  content:""; position:absolute; inset:auto; background:var(--blood2);
  box-shadow:0 0 8px rgba(225,16,33,.6); transition:transform .28s cubic-bezier(.2,.7,.2,1), opacity .28s;
}
.faq-sign::before{ left:0; top:7px; width:16px; height:2px; }
.faq-sign::after{ left:7px; top:0; width:2px; height:16px; }
.faq[open] .faq-sign::after{ transform:rotate(90deg); opacity:0; }
.faq-body{
  padding:0 1.35rem 1.3rem 3.35rem; color:var(--ash); line-height:1.8; font-size:.95rem;
  animation:faqIn .32s cubic-bezier(.2,.7,.2,1);
}
.faq-body strong{ color:var(--bone); }
@keyframes faqIn{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } }

/* prose (blog) */
.prose-reaper h2{ font-family:'Anton',sans-serif; text-transform:uppercase; font-size:1.9rem; line-height:1.05; margin:2.4rem 0 .9rem; color:#fff; }
.prose-reaper h3{ font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:1.25rem; margin:1.8rem 0 .6rem; color:var(--blood2); }
.prose-reaper p{ color:var(--ash); line-height:1.85; margin:1rem 0; }
.prose-reaper ul{ margin:1rem 0 1.4rem; padding-left:0; list-style:none; }
.prose-reaper li{ color:var(--ash); line-height:1.7; padding:.35rem 0 .35rem 1.6rem; position:relative; }
.prose-reaper li::before{ content:""; position:absolute; left:0; top:1.05rem; width:8px; height:8px; background:var(--blood2); transform:rotate(45deg); box-shadow:0 0 8px var(--ember); }
.prose-reaper strong{ color:var(--bone); }

::selection{ background:var(--blood); color:#fff; }

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .skull-float,.art-float,.ember-ring,.marquee,.faq-body{ animation:none; }
  .reveal{ opacity:1; transform:none; }
}