/* Full ALYSSIUN entry surface.
   Critical positioning, centring, and control styling live in entry-critical.js and
   are always present (injected by the entry module and inlined for first paint).
   This sheet adds the composed animation only — if it never arrives, the entry is
   still a centred, branded, usable screen. Nothing here is required to make it
   legible; every visual value is a pure function of --entry-* progress, which the
   audio clock drives, so the animation cannot drift away from the sound. */

.os-entry {
  --entry-progress: 0;
  --entry-field: 0;
  --entry-mark: 0;
  --entry-word: 0;
  --entry-sub: 0;
  --entry-reveal: 0;
  --entry-handoff: 260ms;
  opacity: 1;
  transition: opacity var(--entry-handoff) cubic-bezier(0.4, 0, 0.2, 1);
}

/* Phase 4 — handoff. The surface opens toward the desktop: it lifts and clears
   rather than blinking out, and the OS is already painted beneath it. */
.os-entry[data-os-entry="leaving"] {
  opacity: 0;
  pointer-events: none;
}

.entry-field {
  position: absolute;
  display: grid;
  place-items: center;
  inset: 0;
  pointer-events: none;
}

/* Phase 1 — a single central light awakens. No particles, no gradient wash. */
.entry-core {
  position: absolute;
  width: min(58vmin, 460px);
  height: min(58vmin, 460px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(226, 231, 228, 0.30) 0%,
    rgba(150, 165, 158, 0.11) 38%, rgba(5, 7, 10, 0) 70%);
  opacity: calc(var(--entry-field) * 0.85 + var(--entry-mark) * 0.15);
  transform: scale(calc(0.74 + var(--entry-field) * 0.3 + var(--entry-reveal) * 0.35));
}

/* Fine orbital lines resolving — restrained, never neon. */
.entry-ring {
  position: absolute;
  border: 1px solid rgba(214, 223, 218, 0.28);
  border-radius: 50%;
}

.entry-ring-1 {
  width: min(34vmin, 280px);
  height: min(34vmin, 280px);
  opacity: calc(var(--entry-field) * 0.75 * (1 - var(--entry-sub)));
  transform: scale(calc(0.55 + var(--entry-field) * 0.65 + var(--entry-sub) * 0.5));
}

.entry-ring-2 {
  width: min(48vmin, 400px);
  height: min(48vmin, 400px);
  opacity: calc(var(--entry-mark) * 0.5 * (1 - var(--entry-reveal)));
  transform: scale(calc(0.7 + var(--entry-mark) * 0.4 + var(--entry-reveal) * 0.6));
}

/* Phase 3/4 — spatial depth opening behind the identity, letting the live OS
   become faintly visible before the handoff rather than cutting to black. */
.entry-aperture {
  position: absolute;
  width: min(150vmin, 1500px);
  height: min(150vmin, 1500px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(5, 7, 10, 0) 38%, rgba(9, 12, 15, 0.9) 62%);
  opacity: calc(var(--entry-sub) * 0.5 + var(--entry-reveal) * 0.5);
  transform: scale(calc(0.35 + var(--entry-sub) * 0.35 + var(--entry-reveal) * 1.1));
}

/* Phase 2 — the mark resolves: it is revealed by a rising mask and settles into
   place, rather than simply being switched on. */
.entry-mark {
  opacity: var(--entry-mark);
  transform: scale(calc(0.9 + var(--entry-mark) * 0.1));
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 var(--entry-mark-cut, 100%),
    transparent calc(var(--entry-mark-cut, 100%) + 12%));
  mask-image: linear-gradient(to top, #000 0%, #000 var(--entry-mark-cut, 100%),
    transparent calc(var(--entry-mark-cut, 100%) + 12%));
  --entry-mark-cut: calc(var(--entry-mark) * 100%);
}

/* Restrained tracking settle, not a slide. */
.entry-wordmark {
  opacity: var(--entry-word);
  letter-spacing: calc(0.34em + (1 - var(--entry-word)) * 0.16em);
  text-indent: calc(0.34em + (1 - var(--entry-word)) * 0.16em);
}

.entry-tagline {
  opacity: var(--entry-sub);
  letter-spacing: calc(0.26em + (1 - var(--entry-sub)) * 0.1em);
  text-indent: calc(0.26em + (1 - var(--entry-sub)) * 0.1em);
}

/* The identity lifts fractionally as the OS opens beneath it. */
.entry-brand {
  transform: translateY(calc(var(--entry-reveal) * -8px))
    scale(calc(1 + var(--entry-reveal) * 0.03));
}

.entry-skip { opacity: 0.75; }
.entry-skip:hover { opacity: 1; }

/* Autoplay blocked: a composed, static brand screen holding at the initial state,
   with the primary action centred beneath the identity. */
.os-entry[data-entry-blocked="true"] .entry-mark,
.os-entry[data-entry-blocked="true"] .entry-wordmark {
  opacity: 1;
  transform: none;
  -webkit-mask-image: none;
  mask-image: none;
}

.os-entry[data-entry-blocked="true"] .entry-wordmark { letter-spacing: 0.34em; text-indent: 0.34em; }
.os-entry[data-entry-blocked="true"] .entry-tagline { opacity: 0.7; }
.os-entry[data-entry-blocked="true"] .entry-core { opacity: 0.55; transform: scale(1); }
.os-entry[data-entry-blocked="true"] .entry-enter { margin-top: 10px; }

/* Reduced motion: the same beats and the same audio clock, but nothing travels,
   scales, or sweeps — only opacity resolves. */
@media (prefers-reduced-motion: reduce) {
  .os-entry .entry-ring,
  .os-entry .entry-aperture { display: none; }
  .os-entry .entry-core { transform: none; opacity: 0.5; }
  .os-entry .entry-mark { transform: none; -webkit-mask-image: none; mask-image: none; }
  .os-entry .entry-brand { transform: none; }
  .os-entry .entry-wordmark { letter-spacing: 0.34em; text-indent: 0.34em; }
  .os-entry .entry-tagline { letter-spacing: 0.26em; text-indent: 0.26em; }
}

.os-entry[data-entry-motion="reduced"] .entry-ring,
.os-entry[data-entry-motion="reduced"] .entry-aperture { display: none; }

.os-entry[data-entry-motion="reduced"] .entry-core { transform: none; opacity: 0.5; }

.os-entry[data-entry-motion="reduced"] .entry-mark {
  transform: none;
  -webkit-mask-image: none;
  mask-image: none;
}

.os-entry[data-entry-motion="reduced"] .entry-brand { transform: none; }

.os-entry[data-entry-motion="reduced"] .entry-wordmark {
  letter-spacing: 0.34em;
  text-indent: 0.34em;
}

.os-entry[data-entry-motion="reduced"] .entry-tagline {
  letter-spacing: 0.26em;
  text-indent: 0.26em;
}