/* The Founding 50 golden ticket. Shared by the home page (landing.css adds
   its scroll entrance) and the Founding 50 page (founding.css adds its own).
   ticket.js lifts it and tilts it toward the pointer.

   Gold foil stock: a banded metallic gradient, printed in deep brown with a
   pale letterpress edge. It rests on the page with a short shadow; under the
   pointer it lifts and tilts toward the cursor, and the fixed sheen on the
   foil brightens. The whole stub on the right is a link.
   The foil is the same in both themes: Founding 50 is always gold. */
.ticket-float{
  --rx:0deg; --ry:0deg; --lift:0;
  transform:translateY(calc(var(--lift) * -12px)) rotateX(var(--rx)) rotateY(var(--ry));
  filter:drop-shadow(0 calc(2px + var(--lift) * 24px) calc(2px + var(--lift) * 20px) rgb(var(--shade) / calc(.42 + var(--lift) * .08)));
  transition:transform .55s var(--ease-out), filter .55s var(--ease-out);
  will-change:transform;
}
.ticket-float.is-up{ --lift:1; transition-duration:.2s, .45s; }
.ticket-float:focus-within{ --lift:1; }
@media (hover:hover){ .ticket-float:hover{ --lift:1; } }
.ticket{
  --stub:17.5rem; --notch:14px; --ink:#2f1d04; --ink-dim:#4e3307; --rule:rgba(70,43,5,.5);
  --cut-x:calc(100% - var(--stub)); --cut-y:0px; --cut-y2:100%; --cut-x2:var(--cut-x);
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) var(--stub);
  border-radius:12px; color:var(--ink); text-shadow:0 1px 0 rgba(255,241,196,.55);
  background-color:#d6a53e;
  background-image:linear-gradient(115deg, #a8731f 0%, #e5bf62 16%, #fbe7a6 29%, #d3a043 43%, #f3d688 58%, #b7842b 74%, #e8c466 88%, #a46f1c 100%);
  /* two half-circle bites where the stub tears off */
  -webkit-mask:
    radial-gradient(circle var(--notch) at var(--cut-x) var(--cut-y), #0000 calc(var(--notch) - .5px), #000 var(--notch)),
    radial-gradient(circle var(--notch) at var(--cut-x2) var(--cut-y2), #0000 calc(var(--notch) - .5px), #000 var(--notch));
  -webkit-mask-composite:source-in;
  mask:
    radial-gradient(circle var(--notch) at var(--cut-x) var(--cut-y), #0000 calc(var(--notch) - .5px), #000 var(--notch)),
    radial-gradient(circle var(--notch) at var(--cut-x2) var(--cut-y2), #0000 calc(var(--notch) - .5px), #000 var(--notch));
  mask-composite:intersect;
}
.ticket :where(h1, h2, p){ margin:0; }
.ticket a:hover{ text-decoration:none; }
/* the sheen: a soft diagonal band of light, fixed where the foil catches it */
.ticket::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.45;
  background:linear-gradient(105deg, rgba(255,250,228,0) 6%, rgba(255,250,228,.75) 28%, rgba(255,250,228,0) 50%);
  mix-blend-mode:overlay; transition:opacity .4s var(--ease);
}
.is-up > .ticket::after{ opacity:1; }
/* one pass of light across the foil, played by each page's entrance */
.ticket::before{
  content:""; position:absolute; z-index:2; inset:0; pointer-events:none; opacity:0; mix-blend-mode:overlay;
  background:linear-gradient(105deg, rgba(255,250,228,0) 38%, rgba(255,250,228,.9) 50%, rgba(255,250,228,0) 62%);
}
.ticket__main, .ticket__stub{ position:relative; padding:clamp(1.5rem,3.2vw,2.3rem); }
/* an engraved double frame inside each half */
.ticket__main::before, .ticket__stub::before{
  content:""; position:absolute; inset:9px; border:1.5px solid var(--rule); border-radius:6px;
  outline:1px solid rgba(70,43,5,.32); outline-offset:-6px; pointer-events:none;
}
/* perforation: a column of dots where the stub tears */
.ticket__stub::after{
  content:""; position:absolute; top:var(--notch); bottom:var(--notch); left:-1px; width:2px;
  background:radial-gradient(circle, rgba(60,36,4,.55) 1px, transparent 1.4px) center top / 2px 8px repeat-y;
}
.ticket .ticket__kicker{ /* outranks the landing page reset, which loads later */
  display:flex; justify-content:space-between; gap:1rem; margin-top:1.1rem; padding-top:.8rem; border-top:1px solid var(--rule);
  font:700 .74rem/1 var(--f-sans); font-stretch:70%; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-dim);
}
.ticket__kicker span:first-child::before{ content:"\2605\00a0"; letter-spacing:0; }
/* "Founding 50" is the headline: the loudest type on whichever page it is on */
.ticket__title{
  display:flex; align-items:baseline; gap:.22em; white-space:nowrap; color:inherit;
  font:900 clamp(2.15rem,5.4vw,4.1rem)/.92 var(--f-sans); font-stretch:118%; letter-spacing:-.01em; text-transform:uppercase;
}
.ticket__title .ticket__n{ font-size:1.4em; font-stretch:100%; letter-spacing:-.04em; }
.ticket__lede{ margin-top:1rem; font:750 clamp(1.05rem,1.6vw,1.25rem)/1.3 var(--f-sans); }
.ticket__terms{ margin-top:.3rem; font-size:.95rem; color:var(--ink-dim); }
/* the stub is one big link */
.ticket__stub{
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:.7rem;
  color:inherit; text-decoration:none; transition:background-color .25s var(--ease-out);
}
.ticket__stub:hover{ background-color:rgba(255,246,212,.22); }
.ticket__stub:active{ background-color:rgba(70,43,5,.08); }
.ticket__stub:focus-visible{ outline:3px solid var(--ink); outline-offset:-15px; }
.ticket__label{ font:700 .74rem/1 var(--f-sans); font-stretch:70%; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-dim); font-variant-numeric:tabular-nums; }
.ticket__claim{ display:block; font:900 clamp(2rem,3.7vw,2.75rem)/.98 var(--f-sans); font-stretch:92%; letter-spacing:-.025em; text-wrap:balance; }
.ticket__arrow{ display:inline-block; width:.8em; height:.8em; margin-left:.12em; vertical-align:-.04em; transition:translate .3s var(--ease-out); }
.ticket__stub:hover .ticket__arrow, .ticket__stub:focus-visible .ticket__arrow{ translate:.18em 0; }
/* phones: the stub sits below and tears off along a horizontal line */
@media (max-width:43.99rem){
  .ticket{ --stub-h:8.6rem; grid-template-columns:minmax(0,1fr); --cut-x:0px; --cut-x2:100%; --cut-y:calc(100% - var(--stub-h)); --cut-y2:var(--cut-y); }
  .ticket__stub{ height:var(--stub-h); gap:.5rem; padding-block:1.1rem; }
  .ticket__claim{ font-size:1.85rem; }
  /* the title never wraps, so on a phone it scales with the screen instead */
  .ticket__title{ font-size:min(2.15rem, 7.4vw); }
  .ticket__kicker span + span{ display:none; }
  .ticket__stub::after{ top:-1px; bottom:auto; left:var(--notch); right:var(--notch); width:auto; height:2px;
    background:radial-gradient(circle, rgba(60,36,4,.55) 1px, transparent 1.4px) left center / 8px 2px repeat-x; }
}

/* Entrance: the ticket is dispensed. A slot opens, the ticket feeds down out
   of it in two pulses with a hitch between them, like a ticket machine, then
   one pass of light crosses the foil. The clip and the slide share keyframes
   and timing, so the edge that shows always sits exactly on the slot. Each
   page decides when to play these. */
@keyframes slot-open{
  0%{ transform:scaleX(0); opacity:1; }
  14%{ transform:scaleX(1); opacity:1; }
  78%{ transform:scaleX(1); opacity:1; }
  100%{ transform:scaleX(1); opacity:0; }
}
@keyframes ticket-feed{
  0%{ transform:translateY(-100%); clip-path:inset(100% 0 0 0); animation-timing-function:cubic-bezier(.45,0,.2,1); }
  36%, 50%{ transform:translateY(-57%); clip-path:inset(57% 0 0 0); animation-timing-function:cubic-bezier(.5,0,.15,1); }
  100%{ transform:none; clip-path:inset(0 0 0 0); }
}
@keyframes foil-pass{
  0%{ opacity:0; transform:translateX(-70%); }
  15%, 85%{ opacity:1; }
  100%{ opacity:0; transform:translateX(70%); }
}