/* ============================================================
   Provocations Cards — microsite + access gate.

   The layout is carried by the inline styles in the markup (ported
   verbatim from the Claude Design prototypes so the composition stays
   pixel-identical). This file holds everything inline styles can't do:
   @font-face, keyframes, hover/focus states, and the few responsive
   rules that were driven by a JS "narrow" flag in the prototype.
   ============================================================ */

@font-face {
  font-family: "Apercu";
  src: url("../assets/apercu-bold.otf") format("opentype");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

body {
  margin: 0;
  font-family: "Apercu", "Source Sans Pro", Arial, sans-serif;
}

/* Default link colours. The `:where()` keeps the page class out of the
   specificity sum, so a button class below still wins over these. */

/* Microsite */
html.page-site { scroll-behavior: smooth; }
body.page-site { background: #fff; color: #141414; }
:where(body.page-site) a { color: #C63A1E; text-decoration: none; }
:where(body.page-site) a:hover { color: #AF2B11; text-decoration: underline; }

/* Access gate */
body.page-gate { background: #0F0F0F; color: #fff; }
:where(body.page-gate) a { color: #F6DDCB; text-decoration: none; }
:where(body.page-gate) a:hover { color: #fff; text-decoration: underline; }

/* ---------- keyframes ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes fanIn { from { opacity: 0; transform: translateY(120%) rotate(8deg) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes gateFanIn { from { opacity: 0; transform: translateY(90%) rotate(6deg) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes cardInA { from { opacity: 0; transform: translateY(44px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes cardInB { from { opacity: 0; transform: translateY(44px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes flipA { from { opacity: .3; transform: perspective(1100px) rotateY(88deg); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes flipB { from { opacity: .3; transform: perspective(1100px) rotateY(88deg); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes pxWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes timerFlash { 0%,100% { color: #fff; } 50% { color: #E64626; } }
@keyframes shakeX { 10%,90% { transform: translateX(-2px); } 30%,70% { transform: translateX(4px); } 50% { transform: translateX(-6px); } }
@keyframes botLegA { 0%,49% { transform: translateY(0); } 50%,100% { transform: translateY(-16px); } }
@keyframes botLegB { 0%,49% { transform: translateY(-16px); } 50%,100% { transform: translateY(0); } }
@keyframes botBob { 0%,49% { transform: translateY(0); } 50%,100% { transform: translateY(-8px); } }
@keyframes botJump { 0% { transform: translateY(0); } 28% { transform: translateY(-52px); } 52% { transform: translateY(0); } 66% { transform: translateY(-16px); } 100% { transform: translateY(0); } }
@keyframes botTip { 0%,100% { opacity: 1; } 50% { opacity: .2; } }
@keyframes botBubble { from { opacity: 0; transform: translateY(8px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes drawerIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes deckFlyA { 0% { transform: translate(58px,-24px) rotate(4.5deg) scale(.97); opacity: .25; } 55% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes deckFlyB { 0% { transform: translate(-52px,-22px) rotate(-4.5deg) scale(.97); opacity: .25; } 55% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes deckStepA { from { transform: translate(9px,9px) scale(.99); } to { transform: none; } }
@keyframes deckStepB { from { transform: translate(-7px,9px) scale(.99); } to { transform: none; } }
@keyframes deckShuffleA { 0% { transform: none; } 14% { transform: translate(-62px,-20px) rotate(-14deg); } 34% { transform: translate(54px,-34px) rotate(12deg); } 56% { transform: translate(-30px,-10px) rotate(-7deg); } 76% { transform: translate(16px,-4px) rotate(3deg); } 90% { transform: translate(-5px,0) rotate(-1deg); } 100% { transform: none; } }
@keyframes deckShuffleB { 0% { transform: none; } 14% { transform: translate(58px,-22px) rotate(13deg); } 34% { transform: translate(-50px,-32px) rotate(-11deg); } 56% { transform: translate(28px,-9px) rotate(6.5deg); } 76% { transform: translate(-14px,-4px) rotate(-3deg); } 90% { transform: translate(4px,0) rotate(1deg); } 100% { transform: none; } }

/* ---------- focus ---------- */
.focus-ring:focus-visible { outline: 2px solid #005FCC; outline-offset: 2px; }
.focus-ring-3:focus-visible { outline: 2px solid #005FCC; outline-offset: 3px; }
.focus-ring-4:focus-visible { outline: 2px solid #005FCC; outline-offset: 4px; }

/* Bare button reset — the prototype's `all:unset` card wrappers. Declared
   before the classes that add transitions, which would otherwise be reset. */
.bare { all: unset; cursor: pointer; display: block; }

/* ---------- buttons ----------
   Complete declarations live here rather than inline: a :hover rule can never
   beat an inline style, so anything hover touches has to be in the sheet. */
.btn-draw, .btn-shuffle, .btn-play, .btn-deal, .btn-see-all, .btn-download,
.btn-drawer-download, .btn-linkedin, .btn-report, .header-cta, .btn-drawer-close,
.btn-game-close, .btn-step, .btn-step-sm, .btn-timer, .btn-sold, .btn-notsold,
.btn-tally, .btn-filter, .gate-submit, .gate-enter {
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s, border-color .2s, color .2s;
}

/* Page type. The glyph-only steppers keep the browser's button font, as in
   the prototype; everything else is Apercu. */
.btn-draw, .btn-shuffle, .btn-play, .btn-deal, .btn-see-all, .btn-download,
.btn-drawer-download, .btn-linkedin, .btn-report, .header-cta, .btn-drawer-close,
.btn-timer, .btn-sold, .btn-notsold, .btn-tally, .btn-filter,
.gate-submit, .gate-enter {
  font: inherit;
}

/* Apercu Medium — the SE+ button weight. The report CTA and the gate's
   "Enter the card game" go heavier in their own rules below. */
.btn-draw, .btn-shuffle, .btn-play, .btn-deal, .btn-see-all, .btn-download,
.btn-drawer-download, .btn-linkedin, .header-cta, .btn-timer, .btn-sold,
.btn-notsold, .btn-filter, .gate-submit {
  font-weight: 500;
}

/* Solid ochre — the SE+ primary action. */
.btn-draw, .btn-play, .btn-deal, .btn-see-all, .btn-drawer-download, .gate-submit, .gate-enter {
  background: #C63A1E;
  border-color: #C63A1E;
  color: #fff;
}
.btn-draw:hover, .btn-play:hover, .btn-deal:hover, .btn-see-all:hover,
.btn-drawer-download:hover, .gate-submit:hover, .gate-enter:hover {
  background: #AF2B11;
  border-color: #AF2B11;
  color: #fff;
  text-decoration: none;
}

/* Ochre outline — fills with the ochre tint on hover. */
.btn-shuffle, .btn-download, .btn-linkedin {
  background: transparent;
  border-color: #C63A1E;
  color: #C63A1E;
}
.btn-shuffle:hover, .btn-download:hover, .btn-linkedin:hover {
  background: #FDEDEA;
  color: #C63A1E;
  text-decoration: none;
}

/* Translucent outline on dark surfaces. */
.btn-step, .btn-timer, .btn-game-close {
  background: transparent;
  border-color: rgba(255,255,255,.4);
  color: #fff;
}
.btn-step:hover, .btn-timer:hover { border-color: #fff; }
.btn-game-close:hover { border-color: #fff; background: rgba(255,255,255,.08); }

.btn-draw   { font-size: 15px; padding: 11px 26px; }
.btn-shuffle { font-size: 15px; padding: 11px 26px; }
.btn-play   { font-size: 15px; padding: 10px 24px; }
.btn-deal   { font-size: 16px; padding: 13px 34px; }
.btn-timer  { font-size: 13px; padding: 8px 18px; }

.btn-see-all, .btn-download {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  font-size: 16px;
}
.btn-drawer-download {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 24px;
  font-size: 15px;
}
.btn-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  font-size: 14px;
}

/* Header link — inverts on hover. */
.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 20px;
  background: transparent;
  border-color: #fff;
  color: #fff;
  font-size: clamp(12px, 2.6vw, 14px);
  letter-spacing: .01em;
  flex: none;
}
.header-cta:hover { background: #fff; color: #0F0F0F; text-decoration: none; }

/* The big report CTA hollows out on hover. */
.btn-report {
  display: inline-block;
  margin-top: 32px;
  padding: 16px 40px;
  font-weight: 700;
  -webkit-text-stroke: .55px currentColor;
  font-size: clamp(17px, 2vw, 21px);
  letter-spacing: .01em;
  background: #E64626;
  border-color: #E64626;
  color: #0F0F0F;
}
.btn-report:hover { background: transparent; color: #E64626; text-decoration: none; }

/* Square icon buttons. */
.btn-drawer-close {
  flex: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-color: #D2D2D2;
  color: #141414;
  font-size: 20px;
}
.btn-drawer-close:hover { background: #F7F7F7; border-color: #141414; }
.btn-game-close { flex: none; width: 44px; height: 44px; font-size: 18px; line-height: 1; }
.btn-step { width: 48px; height: 48px; font-size: 22px; }
.btn-step-sm {
  width: 32px;
  height: 32px;
  border-width: 1px;
  background: transparent;
  border-color: rgba(255,255,255,.3);
  color: #fff;
}
.btn-step-sm:hover { border-color: #fff; }

/* Just a minute verdicts. */
.btn-sold {
  font-size: 15px;
  padding: 12px 22px;
  background: #00805A;
  border-color: #00805A;
  color: #fff;
  transition: filter .2s;
}
.btn-sold:hover { filter: brightness(1.15); }
.btn-notsold {
  font-size: 15px;
  padding: 12px 22px;
  background: transparent;
  border-color: #C63A1E;
  color: #fff;
}
.btn-notsold:hover { background: rgba(198,58,30,.25); }

/* Everything's connected score tally. */
.btn-tally {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 64px;
  padding: 10px 12px;
  background: transparent;
  border-color: rgba(255,255,255,.25);
  color: #fff;
}
.btn-tally:hover { border-color: #E64626; }

/* Drawer filter pills. */
.btn-filter {
  font-size: 14px;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 999px;
  background: transparent;
  border-color: #D2D2D2;
  color: #141414;
}
.btn-filter.is-on { background: #0F0F0F; border-color: #0F0F0F; color: #fff; }

/* SE+ design-system Button, as rendered by the prototype. */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-primary);
  font-weight: var(--weight-medium);
  font-size: 16px;
  line-height: 1.25;
  padding: 8px 24px;
  border: 2px solid transparent;
  border-radius: var(--radius-button);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: background-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}
.ds-btn--primary { background: var(--action-primary, #C63A1E); color: #fff; border-color: var(--action-primary, #C63A1E); }
.ds-btn--primary:hover { background: var(--action-primary-hover, #AF2B11); border-color: var(--action-primary-hover, #AF2B11); color: #fff; text-decoration: none; }
.ds-btn--secondary-reversed { background: transparent; color: #fff; border-color: #fff; }
.ds-btn--secondary-reversed:hover { background: rgba(255,255,255,0.16); color: #fff; text-decoration: none; }

/* ---------- lifts ---------- */
.card-lift { transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s; }
.card-lift:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.fan-card { transition: transform .2s cubic-bezier(.4,0,.2,1); }
.fan-card:hover { transform: translateY(-14px); }
.grid-card { transition: transform .2s cubic-bezier(.4,0,.2,1); }
.grid-card:hover { transform: translateY(-4px); }
/* The report cover sits on a tilt and straightens a little on hover. */
.cover-tilt { transform: rotate(-4deg); transition: transform .3s cubic-bezier(.4,0,.2,1); }
.cover-tilt:hover { transform: rotate(-1.5deg) translateY(-6px); }

/* ---------- gate ---------- */
.gate-input {
  flex: 1 1 220px;
  min-width: 0;
  font: inherit;
  font-size: 16px;
  color: #fff;
  background: rgba(255,255,255,.06);
  border: 2px solid rgba(255,255,255,.28);
  border-radius: 4px;
  padding: 13px 16px;
  letter-spacing: .02em;
  transition: border-color .2s, background .2s;
}
.gate-input::placeholder { color: #8C8C8C; }
.gate-input:focus { outline: none; border-color: #F6DDCB; background: rgba(255,255,255,.10); }
.gate-input--error { border-color: #E64626; }
.gate-note { min-height: 22px; margin-top: 12px; font-size: 14px; line-height: 1.5; color: #8C8C8C; }
.gate-note--error { color: #F08A72; }
.gate-submit { font-size: 15px; padding: 13px 30px; flex: none; }
.gate-submit:focus-visible { outline: 2px solid #F6DDCB; outline-offset: 2px; }
.gate-enter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
  padding: 14px 30px;
}
.gate-shake { animation: shakeX .4s cubic-bezier(.36,.07,.19,.97) both; }

/* ---------- microsite responsive (was a JS `narrow` flag) ---------- */
.only-narrow { display: none; }
@media (max-width: 619px) {
  .site-header { flex-wrap: nowrap; }
  .header-cta { padding: 8px 13px; }
  .only-narrow { display: inline; }
  .only-wide { display: none; }

  /* The gate page's card art is a second grid column that, on a phone,
     stacks below the heading and form rather than sitting beside them —
     at that width it reads as an oversized decoration blocking the thing
     you're actually there to do. Hidden outright rather than shrunk,
     which is why the heading can grow into the space it frees up.
     `!important` on both rules: the column has an inline `display:flex`
     and the heading an inline font-size clamp(), and an inline style
     always beats a class selector (ADR-004). */
  .gate-hero-card { display: none !important; }
  .gate-heading { font-size: 46px !important; }
}

/* ---------- single-column layout fixes ----------

   Both rules below exist because two sections size their card art against
   their *container* while their box is sized against the *viewport*. Those
   two agree only while the art sits in a half-width column, which is to say
   only in the two-column layout. The breakpoint is where the hero grid gives
   up on two columns: `minmax(min(360px,100%),1fr)` twice, plus its gap, no
   longer fits inside the padded container. Measured, not derived — the grid
   reports one 752.562px track at 818px and two 360.359px tracks at 819px, so
   818 is the last broken width. If that minmax or the gap changes, this
   number has to change with it. */
@media (max-width: 818px) {
  /* The fan's cards are a percentage of #hero-fan's width, but its height is
     clamp(265px,25vw,340px) — viewport-relative. Single-column, the fan goes
     full width while its height stays on the 265px floor, so the cards
     overflow ~100px upwards and land on top of the "Pick a game" button.
     Height that tracks the viewport at the same rate the width does keeps the
     art below the buttons; the 265px floor is retained so nothing changes on
     a phone, where the narrow fan already fits.

     `!important` is doing real work here and must stay: the height it is
     overriding is an inline `style` attribute on the element (ADR-004), and
     an inline style beats an id selector. Without it this rule is silently
     inert — which it was, on the first attempt, while the deck rule below
     appeared to work because nothing sets its margin inline. */
  #hero-fan { height: clamp(265px, 48vw, 400px) !important; }

  /* The deck's three backing cards are offset +9/+18/+27px right and down
     from the front card, so the stack's visual mass is 27px wider than the
     box that gets centred. On a phone that puts the back card 5px off the
     right edge with a 32px gutter on the left. Reserving the peek makes the
     centring account for it, so the stack sits square in its column and the
     front card lines up with the text above it. */
  #deck-stage { margin-right: 27px; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Some elements carry an inline `display`, which would otherwise beat the
   user-agent's [hidden] rule and leave them on screen. */
[hidden] { display: none !important; }

/* Visually hidden, still read by assistive tech. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Font Awesome Pro icons, inlined as SVG rather than loaded from a kit. The
   site has to work offline behind the gate, so a CDN script or a webfont
   would be a network dependency for seven glyphs. Sized in em so each icon
   tracks the type it sits beside; fill is currentColor in the markup, so they
   inherit their button's colour and every hover state with it. */
.fa-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  flex: none;
}