/* ═════════ PAGE ONE: the entrance ═════════ */
.ent { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; background: var(--paper); color: var(--paper-ink); cursor: pointer; }
.ent-stack { display: grid; justify-items: center; text-align: center; transform: translateY(-3vh); }
.ent-icon { position: relative; width: 128px; height: 128px; border-radius: 30px; filter: drop-shadow(0 18px 30px rgba(18,19,20,.22)) drop-shadow(0 2px 4px rgba(0,0,0,.08));
  animation: ent-breathe 3.6s ease-in-out infinite; transition: transform .35s var(--spring); }
.ent-icon svg { width: 100%; height: 100%; border-radius: 30px; }
.ent-icon:hover { transform: scale(1.04) rotate(-2deg); }
.ent-icon.is-pressed { transform: scale(.9); transition-duration: .12s; }
.ent-icon:focus-visible { outline: 3px solid var(--paper-ink); outline-offset: 6px; }
@keyframes ent-breathe { 50% { transform: scale(1.025); } }
.ent-badge { position: absolute; top: -8px; right: -8px; min-width: 30px; height: 30px; padding: 0 9px; border-radius: 15px; display: grid; place-items: center;
  background: var(--accent); color: var(--char); font: 800 14px/1 var(--sans); box-shadow: 0 0 0 3px var(--paper); transform: scale(0); }
.ent-badge.is-on { animation: ent-badge .55s var(--spring) forwards; }
@keyframes ent-badge { from { transform: scale(0); } to { transform: scale(1); } }
.ent-word { margin: 28px 0 0; font: 900 clamp(40px, 10vw, 60px)/.9 var(--sans); letter-spacing: -.045em; }
.ent-co { margin: 14px 0 0; font: 500 11px/1 var(--mono); letter-spacing: .24em; color: var(--paper-mute); }
.ent-cta { position: absolute; bottom: calc(40px + var(--safe-b)); left: 0; right: 0; margin: 0; text-align: center; font: 500 15px/1 var(--sans); color: var(--paper-mute); }
.ent-cta span { display: inline-block; animation: ent-nudge 2.4s ease-in-out 1.4s infinite; }
@keyframes ent-nudge { 0%, 70%, 100% { transform: none; } 80% { transform: translateX(5px); } }
/* Leaving: the icon presses in and expands; the page goes quiet; the opening takes over underneath. */
.ent.is-leaving .ent-icon { animation: ent-go .62s var(--ease) forwards; }
.ent.is-leaving .ent-word, .ent.is-leaving .ent-co, .ent.is-leaving .ent-cta, .ent.is-leaving .ent-badge { opacity: 0; transition: opacity .2s; }
@keyframes ent-go { 25% { transform: scale(.86); } 100% { transform: scale(1.12); opacity: 0; } }
.ent.out { animation: fade .42s reverse both; }
@media (prefers-reduced-motion: reduce) { .ent-icon, .ent-cta span { animation: none; } }
/* Preview/testing only: start again as a brand-new visitor. */
.ent-fresh { position: absolute; top: calc(14px + var(--safe-t)); left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); min-height: 40px; padding: 8px 14px; border-radius: 99px; background: #fff; box-shadow: 0 6px 20px -8px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.08); font: 500 13px/1.3 var(--sans); color: #1A1916; text-align: center; }
.ent-fresh b { margin-right: 4px; padding: 2px 6px; border-radius: 5px; background: #FFE500; font: 600 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; vertical-align: 1px; }
.ent-fresh u { text-underline-offset: 3px; }
/* Sound is on from the start, so the way to turn it off is here from the start too. */
.ent-sound, .intro-sound { position: fixed; z-index: 7; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
.ent-sound { top: calc(12px + var(--safe-t)); right: calc(12px + env(safe-area-inset-right, 0px)); color: var(--paper-mute); }
.ent-sound:hover { background: rgba(0,0,0,.06); }
.intro-sound { top: calc(12px + var(--safe-t)); right: calc(12px + env(safe-area-inset-right, 0px)); color: var(--grey-2);     /* same place as page one's, and never on top of the end card's buttons */ background: rgba(26,27,29,.8); box-shadow: inset 0 0 0 1px var(--char-line); }
.ent-sound svg, .intro-sound svg { width: 20px; height: 20px; }