/* ==========================================================================
   TOUCHLINE - Entry gate (homepage only, once per session)
   One question from the referee. "No" gets a red card, then everyone
   gets in anyway. The overlay is built by gate.js, so without JS none
   of this applies. Red is used on the card and the brief tint only.
   ========================================================================== */

/* Set by gate.js in <head> before first paint, removed once the gate is built.
   The CSS animation is a fail-open: if the script dies in between, the page
   reappears on its own after 2.5s. */
html.tl-gate-pending { background: var(--black); }
html.tl-gate-pending body { opacity: 0; animation: tlGateFailOpen 0s linear 2.5s forwards; }
@keyframes tlGateFailOpen { to { opacity: 1; } }

html.tl-gate-lock, html.tl-gate-lock body { overflow: hidden; overscroll-behavior: none; }

.tl-gate {
  --tl-red: #E3121B;
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
  background: var(--black);
  overflow: hidden;
  text-align: center;
  transition: opacity 320ms ease;
}
.tl-gate.is-closing { opacity: 0; pointer-events: none; }

/* Dim and faint red tint behind the card */
.tl-gate::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 42%, rgba(227, 18, 27, 0.20), rgba(227, 18, 27, 0.06) 55%, rgba(0, 0, 0, 0.35));
  opacity: 0; transition: opacity 260ms ease;
}
.tl-gate.is-red::before { opacity: 1; }

.tl-gate-screen {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  width: 100%; max-width: 560px;
}
.tl-gate-screen[hidden] { display: none; }
.tl-gate-ask { transition: opacity 180ms ease; }
.tl-gate.is-red .tl-gate-ask { opacity: 0; }

/* ---------- Screen 1: the question ---------- */
.tl-gate-date { margin: 0 0 18px; }
.tl-gate-q {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(44px, 10vw, 96px);
  line-height: 0.98; letter-spacing: 0.02em; color: var(--white);
  margin: 0 0 32px;
}
.tl-gate-choices { display: flex; gap: 12px; justify-content: center; width: 100%; max-width: 320px; }
.tl-gate-choices .btn { flex: 1 1 0; width: auto; min-width: 0; }
.tl-gate-links { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.tl-gate-links a {
  font-size: 14px; color: var(--light-grey);
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--mid-grey);
  transition: color 150ms ease;
}
.tl-gate-links a:hover, .tl-gate-links a:focus-visible { color: var(--gold); text-decoration-color: var(--gold); }
.tl-gate a:focus-visible, .tl-gate button:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* ---------- Screen 2: the red card ---------- */
.tl-gate-cardwrap {
  position: relative;
  width: min(40vw, 170px);
  width: min(40vw, 170px, calc(34vh * 0.72));
  width: min(40vw, 170px, calc(34dvh * 0.72));
  margin-bottom: 36px;
}
.tl-gate-card {
  position: relative;
  aspect-ratio: 72 / 100;
  border-radius: 6px;
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 38%, rgba(0,0,0,0.16)),
    var(--tl-red);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55), 0 0 60px rgba(227, 18, 27, 0.25);
  transform: rotate(-8deg);
  animation: tlCardShow 720ms cubic-bezier(0.2, 0.85, 0.3, 1.1) both;
}
/* A single sheen sweep across the card as it lands */
.tl-gate-card::after {
  content: ''; position: absolute; inset: -20%;
  background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,0.32) 50%, transparent 60%);
  transform: translateX(-70%);
  animation: tlCardSheen 700ms ease 560ms forwards;
}
@keyframes tlCardShow {
  0%   { transform: translateY(110vh) rotate(4deg); }
  55%  { transform: translateY(-14%) rotate(-12deg); }
  68%  { transform: translateY(3%) rotate(-6deg); }
  78%  { transform: translateY(0) rotate(-10.5deg); }
  88%  { transform: translateY(0) rotate(-6.5deg); }
  100% { transform: translateY(0) rotate(-8deg); }
}
@keyframes tlCardSheen { to { transform: translateX(70%); } }

/* Short motion lines as the card snaps in */
.tl-gate-burst { position: absolute; inset: 0; pointer-events: none; }
.tl-gate-burst i {
  position: absolute; top: 8%; width: 3px; height: 18px; border-radius: 2px;
  background: var(--white); opacity: 0;
  animation: tlBurst 420ms ease-out 470ms forwards;
}
.tl-gate-burst i:nth-child(1) { left: -10%;  --r: -60deg; }
.tl-gate-burst i:nth-child(2) { left: 2%;    top: -8%; --r: -30deg; }
.tl-gate-burst i:nth-child(3) { left: 46%;   top: -16%; --r: 0deg; }
.tl-gate-burst i:nth-child(4) { right: 2%;   top: -8%; --r: 30deg; }
.tl-gate-burst i:nth-child(5) { right: -10%; --r: 60deg; }
@keyframes tlBurst {
  0%   { opacity: 0; transform: rotate(var(--r)) translateY(6px) scaleY(0.4); }
  35%  { opacity: 0.85; }
  100% { opacity: 0; transform: rotate(var(--r)) translateY(-14px) scaleY(1); }
}

.tl-gate-msg {
  font-family: var(--font-body); font-weight: 500;
  font-size: clamp(17px, 4.4vw, 20px); line-height: 1.4;
  color: var(--white); margin: 0 0 24px; min-height: 1.4em;
}
.tl-gate-after { opacity: 0; animation: tlGateFade 400ms ease 620ms forwards; display: flex; flex-direction: column; align-items: center; width: 100%; }
@keyframes tlGateFade { to { opacity: 1; } }

/* ---------- Reduced motion: card simply appears, gate fades on close ---------- */
@media (prefers-reduced-motion: reduce) {
  .tl-gate-card { animation: none; transform: rotate(-8deg); }
  .tl-gate-card::after, .tl-gate-burst { display: none; }
  .tl-gate-after { animation: none; opacity: 1; }
  /* The site switches off all transitions here; the gate keeps its plain fade */
  .tl-gate { transition-duration: 320ms !important; }
}