/*
 * The entrance at laurathompson.uk (brief 3): her stamp alone, big and
 * central, her line under it and the way in under that, nine bands of her
 * patterns drifting behind at a whisper. Pressing the stamp opens it into the
 * hub's circle on the same page (home.js); the hub is in the document below,
 * so with JavaScript off it is simply there when you scroll.
 */

/* ---------- before entering: only the entrance ---------- */
html.lt-js.is-entrance:not(.is-entered) [data-hub],
html.lt-js.is-entrance:not(.is-entered) .site-header,
html.lt-js.is-entrance:not(.is-entered) .skip-link:not(.enter-skip),
html.lt-js.is-entrance:not(.is-entered) .bar { display: none; }
html.lt-js.is-entrance:not(.is-entered) body { padding-bottom: 0; overflow: hidden; }
html.is-entered .entrance, html.is-entered .entrance-head, html.is-entered .bg-pause, html.is-entered .enter-skip { display: none; }
html.is-entered .ebands { opacity: 0; visibility: hidden; transition: opacity 400ms ease-out, visibility 0s 400ms; }

.entrance {
  position: relative; z-index: 1;
  min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center;
  padding: max(1.5rem, env(safe-area-inset-top)) 1.25rem max(1.5rem, env(safe-area-inset-bottom));
}
.entrance-head { position: fixed; z-index: 5; top: max(0.75rem, env(safe-area-inset-top)); right: var(--gutter); }
.enter {
  display: grid; justify-items: center; gap: clamp(1.25rem, 3.2svh, 2.25rem);
  color: inherit; text-decoration: none; border-radius: 1.5rem;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent; outline: none;
}
.enter-stamp {
  display: block; width: min(64vmin, 600px, 62svh); border-radius: 50%;
  view-transition-name: round;
  transition: transform 160ms var(--ease-out);
}
@media (max-width: 719px) and (orientation: portrait) { .enter-stamp { width: min(82vw, 420px); } }
.enter:active .enter-stamp, .enter.is-pressed .enter-stamp, html.is-pressing .enter-stamp { transform: scale(.97); transition-duration: 160ms; }
.enter-words { display: grid; justify-items: center; gap: 0.7rem; text-align: center; }
.enter-tagline { font-size: clamp(1.75rem, 1.1rem + 2.4vw, 3.1rem); line-height: 1.08; color: var(--ink); text-wrap: balance; view-transition-name: tagline; }
.cue { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 .25rem; font-family: var(--face-note); font-weight: 600; font-size: 1.15rem; color: var(--ink-2); }
.cue::after { content: ""; position: absolute; left: .25rem; right: .25rem; bottom: .45rem; height: 1px; background: currentColor; transform: scaleX(.18); transition: transform 240ms var(--ease-out), opacity 240ms ease-out; opacity: .5; }
.enter:hover .cue, .enter:focus-visible .cue { color: var(--ink); }
.enter:hover .cue::after, .enter:focus-visible .cue::after { transform: scaleX(1); opacity: 1; }
.cue-tap { display: none; }
@media (hover: none) and (pointer: coarse) { .cue-click { display: none; } .cue-tap { display: inline; } }
.enter:focus-visible .enter-stamp { outline: 2px solid var(--ink); outline-offset: clamp(8px, 1.6vmin, 14px); }
/* the stamp's soft offset shadow separates it from the bands */
.enter-stamp .stamp-paper { box-shadow: 0 0 0 .5px var(--stamp-edge), 0 2px 4px var(--stamp-edge), 14px 22px 48px -18px var(--stamp-shadow); }

/* ---------- the drifting bands (3.2): nine on a laptop, six on a phone ---------- */
.ebands {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  display: grid; grid-template-columns: repeat(9, 1fr);
  -webkit-mask-image: radial-gradient(circle at 50% 46%, transparent 0, transparent min(30vmin, 290px), #000 min(52vmin, 520px));
  mask-image: radial-gradient(circle at 50% 46%, transparent 0, transparent min(30vmin, 290px), #000 min(52vmin, 520px));
}
.eband { position: relative; overflow: hidden; opacity: var(--band-strength, .09); }
.eband-art { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% + 280px); }
html[data-theme="dark"] .eband { --band-strength: .07; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .eband { --band-strength: .07; } }
@media (max-width: 719px) {
  .ebands { grid-template-columns: repeat(6, 1fr); }
  .eband--4, .eband--6, .eband--8 { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .eband-art { animation: band-drift var(--t, 55s) linear infinite; }
  .eband:nth-child(odd) .eband-art { animation-direction: reverse; }
  html.bg-paused .eband-art { animation-play-state: paused; }
  @keyframes band-drift { to { transform: translate3d(0, calc(-1 * var(--rep)), 0); } }
}
.eband--1 { --t: 52s; } .eband--2 { --t: 64s; } .eband--3 { --t: 47s; } .eband--4 { --t: 70s; } .eband--5 { --t: 58s; }
.eband--6 { --t: 44s; } .eband--7 { --t: 66s; } .eband--8 { --t: 50s; } .eband--9 { --t: 61s; }

/* ---------- the pause control (2.2.2): the bands, the stamp's turning border and its sheen ---------- */
.bg-pause {
  position: fixed; z-index: 5; left: max(1rem, env(safe-area-inset-left)); bottom: max(1rem, env(safe-area-inset-bottom));
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--boundary); border-radius: 50%; background: color-mix(in srgb, var(--raised) 90%, transparent); color: var(--ink);
}
.bg-pause svg { width: 20px; height: 20px; }
.bg-pause .bg-pause-play { display: none; }
.bg-pause[aria-pressed="true"] .bg-pause-bars { display: none; }
.bg-pause[aria-pressed="true"] .bg-pause-play { display: inline; }
.bg-pause:hover { border-color: var(--ink); }
html:not(.lt-js) .bg-pause { display: none; }
@media (prefers-reduced-motion: reduce) { .bg-pause { display: none; } }

/* ---------- arrival: the stamp catches the light once on a laptop ---------- */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  html.lt-ready:not(.is-entered) .enter .stamp:not(.is-live) .stamp-gloss { animation: arrive-gloss 1100ms ease-in-out 500ms both; }
  html.lt-ready:not(.is-entered) .enter .stamp:not(.is-live) .stamp-glint { animation: arrive-glint 1100ms ease-in-out 500ms both; }
}
@keyframes arrive-gloss { 0%, 100% { opacity: 0; } 35%, 70% { opacity: .9; } }
@keyframes arrive-glint { from { transform: translate(28%, 18%); } to { transform: translate(-28%, -18%); } }
@media (prefers-reduced-motion: no-preference) {
  html.lt-ready .entrance .enter-words { animation: rise 760ms var(--ease-out) 300ms both; }
}

/* ---------- entering (3.3): the morph, then the circle of nine closes into ten ---------- */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(round) { animation-duration: 700ms; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  ::view-transition-group(tagline) { animation-duration: 700ms; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  ::view-transition-old(round) { animation: vt-fade-out 520ms ease-out both; }
  ::view-transition-new(round) { animation: vt-fade-in 520ms ease-out 120ms both; }
  html.is-short-entry::view-transition-group(round), html.is-short-entry::view-transition-group(tagline) { animation-duration: 500ms; }
}
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }
html.is-entered .circle-stage { view-transition-name: round; }
html.is-entered .circle-tagline { view-transition-name: tagline; }
/* where the View Transition is missing: a 300 ms crossfade (200 ms under reduced motion) */
html.is-crossfade [data-hub] { animation: vt-fade-in 300ms ease-out both; }
@media (prefers-reduced-motion: reduce) { html.is-crossfade [data-hub] { animation-duration: 200ms; } }