:root {
  --resize-dur: 300ms;
  --resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --stagger-dur: 500ms;
  --stagger-distance: 12px;
  --stagger-stagger: 40ms;
  --stagger-blur: 3px;
  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.t-resize {
  transition:
    width  var(--resize-dur) var(--resize-ease),
    height var(--resize-dur) var(--resize-ease);
  will-change: width, height;
}
@media (prefers-reduced-motion: reduce) {
  .t-resize { transition: none !important; }
}
/* transitions-dev texts-reveal, with entry-specific tuning below. */
.t-stagger-line {
  display: block;
  opacity: 0;
  transform: translateY(var(--stagger-distance));
  filter: blur(var(--stagger-blur));
  transition:
    opacity   var(--stagger-dur) var(--stagger-ease),
    transform var(--stagger-dur) var(--stagger-ease),
    filter    var(--stagger-dur) var(--stagger-ease);
  will-change: transform, opacity, filter;
}
.t-stagger-line--2 { transition-delay: var(--stagger-stagger); }

.t-stagger.is-shown .t-stagger-line {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.t-stagger.is-hiding .t-stagger-line {
  opacity: 0;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity 200ms ease,
    transform 0s linear,
    filter 0s linear;
  transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  .t-stagger-line { transition: none !important; }
}

html.entry-pending, html.entry-open { background: #000; overflow: hidden; }
html.entry-open body { overflow: hidden; }
html.entry-pending::before {
  content: ''; position: fixed; inset: 0; z-index: 10000; background: #000;
}
#entry-screen {
  --entry-reel-hold: 4500ms;
  --entry-reel-after-reveal: 1000ms;
  /* Reading holds begin AFTER each reveal settles, not at its start. */
  --entry-initial-pause: 500ms;
  --entry-opening-hold: 1800ms;
  --entry-reading-hold: 1100ms;
  --entry-question-hold: 900ms;
  --resize-dur: 650ms;
  --resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --stagger-dur: 600ms;
  --stagger-ease: ease-in-out;
  --stagger-distance: 12px;
  --stagger-blur: 0px;
  --entry-exit-dur: 180ms;
  --entry-button-dur: 500ms;
  --entry-section-gap: 32px;
  position: fixed; inset: 0; margin: 0; border: 0; border-radius: 0;
  width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  color: #ededed; background: #000; box-shadow: none; color-scheme: dark;
  overflow: auto; overscroll-behavior: contain; opacity: 1;
  transition: opacity var(--entry-exit-dur) ease;
}
#entry-screen::backdrop { background: #000; }
#entry-screen.is-leaving { opacity: 0; }
#entry-screen.is-leaving::backdrop { background: transparent; }
.entry-content {
  min-height: 100%; width: min(100%, 740px); margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-block: 20px 5vh;
}
#entry-stack { position: relative; width: 100%; flex: none; text-align: center; overflow: hidden; }
#entry-stack.is-complete { overflow: visible; }
/* The centered stack grows with the visible copy. Earlier lines therefore
   travel upward naturally, rather than starting in a preallocated final slot. */
#entry-copy > .entry-step { visibility: hidden; }
#entry-copy > .entry-step.is-visible {
  visibility: visible; opacity: 1; transform: translateY(0); filter: blur(0);
}
#entry-stack.is-settled { transition: none; }
#entry-copy {
  width: 100%; margin: 0;
  font-family: inherit;
  font-size: clamp(23px, 2.35vw, 30px); font-weight: 400;
  color: #b7b7b7;
  line-height: 1.4; letter-spacing: -.025em; text-align: center;
  text-wrap: balance; overflow-wrap: break-word;
}
#entry-copy > span { display: block; margin-inline: auto; }
#entry-copy:focus { outline: none; }
#entry-copy > :where(.entry-step + .entry-step) { margin-top: var(--entry-section-gap); }
#entry-copy [data-entry-role="opening"] { max-width: 40ch; color: #b7b7b7; }
#entry-copy strong { color: #ededed; font-weight: 600; }
.entry-opening-lead { display: block; }
#entry-copy [data-entry-role="elapsed"] {
  white-space: nowrap;
}
.entry-elapsed-lead, .entry-elapsed-result { display: inline; }
.entry-elapsed-value { color: #ededed; font-weight: 600; font-variant-numeric: tabular-nums; }
#entry-copy [data-entry-role="question"] {
  max-width: 35ch;
}
/* Fixed-height fact viewport: invisible copies reserve the tallest wrapped line.
   The shared t-text-swap snippet in styles.css moves only the active sentence. */
.entry-price-reel {
  display: grid; position: relative; width: 100%; text-wrap: balance;
}
.entry-price-reel::before {
  content: ''; position: absolute; width: 24px; height: 1px;
  top: calc(var(--entry-section-gap) / -2); left: calc(50% - 12px);
  background: #8f4b47;
}
.entry-price-size { grid-area: 1 / 1; visibility: hidden; }
.entry-price-size, .entry-price-row { min-width: 0; white-space: pre; text-wrap: nowrap; }
.entry-price-track {
  --text-swap-dur: 220ms;
  --text-swap-translate-y: 4px;
  --text-swap-blur: 1px;
  --text-swap-ease: ease-in-out;
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: grid;
}
.entry-price-track.is-settled { transition: none; }
.entry-price-row { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; }
.entry-price-row[hidden] { display: none; }
.entry-price-static {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
#entry-copy[data-static="true"] .entry-price-static {
  position: static; width: auto; height: auto; margin: 0;
  overflow: visible; clip-path: none; white-space: normal;
}
#entry-copy[data-static="true"] .entry-price-reel { display: none; }
#entry-enter {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: var(--entry-section-gap); min-width: 128px; min-height: 48px;
  padding: 12px 24px; border: 1px solid #929292; border-radius: 0;
  background: #000; color: #ededed; box-shadow: none; transform: none;
  font: 400 15px/1.2 Arial, sans-serif; letter-spacing: .01em; text-transform: none;
  opacity: 0; visibility: hidden;
  transition: opacity var(--entry-button-dur) var(--stagger-ease), visibility 0s linear, background-color 150ms, border-color 150ms;
}
#entry-enter.is-visible { opacity: 1; visibility: visible; }
#entry-enter:hover { background: #171717; border-color: #fff; }
#entry-enter:active { background: #262626; }
#entry-enter:focus-visible { outline: 2px solid #ededed; outline-offset: -2px; border-color: #ededed; }
@media (max-width: 640px) {
  #entry-screen { --entry-section-gap: 28px; }
  .entry-opening-lead { display: inline; }
  #entry-copy { font-size: clamp(21px, 5.6vw, 25px); line-height: 1.38; }
}
@media (max-height: 450px) {
  #entry-screen { --entry-section-gap: 16px; }
  .entry-content { padding-block: 8px; }
  #entry-copy { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  #entry-screen, #entry-enter, .entry-price-row { transition: none; }
}
