/* age gate — page one. Night sheet with a hairline frame inset 24px; lifts translateY(-100%) on accept.
   docs/DESIGN.md §5 "Age gate". Markup: shared/_age_gate.html.erb */
.gate {
  position:fixed; inset:0; z-index:var(--z-gate);
  display:grid; place-items:center; overflow:auto;
  background:var(--bg); color:var(--fg);
  padding:calc(24px + var(--margin));
  box-shadow:0 1px 0 0 var(--rule);                    /* the 1px --rule shadow at the sheet's edge */
  transform:translateY(0);
  transition:transform var(--d-sheet) var(--ease-slow);
  will-change:transform;
}
.gate.is-leaving { transform:translateY(-100%); }
.gate__frame { position:absolute; inset:24px; border:1px solid var(--line); pointer-events:none; }
.gate__pool { position:absolute; inset:0; pointer-events:none; background:radial-gradient(55% 45% at 78% 88%, color-mix(in oklab, var(--lamp) 7%, transparent), transparent 70%); }
.gate__grain { position:absolute; inset:0; pointer-events:none; opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 .33 .33 .33 0 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px; }
.gate__inner { position:relative; width:min(100%, 64rem); text-align:center; display:flex; flex-direction:column; align-items:center; gap:2rem; }
.gate__logo { display:block; width:clamp(180px, 24vw, 280px); height:auto; }
.gate__eyebrow { color:var(--fg-3); }
.gate__title { font-size:var(--t-display-l); line-height:.98; letter-spacing:-.02em; color:var(--fg); max-width:14ch; outline:none; }
.gate__title:focus-visible { outline:none; }
.gate__lead { font-size:var(--t-lead); line-height:1.4; color:var(--fg-2); max-width:38ch; text-wrap:pretty; }
.gate__form { width:min(100%, 40rem); margin-block-start:1rem; }
.gate__rule { margin-block-end:1.75rem; }
.gate__actions { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:1rem 3rem; }
.gate__yes { color:var(--fg); }
.gate__no { font-size:var(--t-lead); color:var(--fg-3); padding:.5rem 0; min-height:44px; display:inline-flex; align-items:center; }
.gate__no:hover { color:var(--fg); }
.gate__legal { font-size:var(--t-small); color:var(--fg-3); margin-block-start:.5rem; }
.gate__legal a { color:inherit; background-image:linear-gradient(currentColor, currentColor); background-repeat:no-repeat; background-size:100% 1px; background-position:left 100%; }
.gate__legal a:hover { color:var(--fg); }
@media (max-width: 39.98em) {
  .gate { place-items:end center; padding-block-end:max(4rem, calc(24px + env(safe-area-inset-bottom) + 1.5rem)); }
  /* The gate is the one centred composition on the site — it stays centred at every width. */
  .gate__inner { gap:1.5rem; }
  .gate__actions { flex-direction:column; align-items:center; gap:.5rem; }
  .gate__title { max-width:none; }
}
@media (prefers-reduced-motion: reduce) {
  .gate { transition:opacity 200ms var(--ease-out); }
  .gate.is-leaving { transform:none; opacity:0; }
}
html[data-still] .gate { transition:opacity 200ms var(--ease-out); }
html[data-still] .gate.is-leaving { transform:none; opacity:0; }