/* ============================================================
   Lotus intro — the opening the Microsoft briefing uses, brought
   onto the home page so the two match.

   Ported from the briefing's Convergence splash. Same canvas
   parameters, same timings, same easing; the Microsoft-specific
   label is gone and the exit shrinks into THIS page's hero lotus
   rather than the briefing's convergence chamber.

   It is an overlay, not a section: it sits above the hero, plays
   once, and hands over. The hero underneath is untouched, so if
   the script never runs the page is simply the page.
   ============================================================ */

.if-splash {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  text-align: center;
  padding: 24px 16px;
  cursor: pointer;
  background: radial-gradient(ellipse at center, #15110a 0%, var(--bg, #07060A) 70%);
  transition: opacity 1.1s ease, visibility 1.1s ease;
}

/* Nothing behind the splash should scroll while it is up. */
html.if-splash-open, html.if-splash-open body { overflow: hidden; }

/* The page's floating furniture outranks the splash on z-index — the palette
   switcher sits at 100000, Emma's launcher at 1200 — so during the opening
   they hovered over the lotus and broke the moment. Rather than escalate the
   splash above everything (which would also cover Emma's panel if she were
   somehow opened mid-intro), they are hidden for the few seconds it plays and
   fade back in afterwards. Pointer-events go too, so nothing is clickable
   through the overlay. */
html.if-splash-open #ifPalette,
html.if-splash-open .pai-launcher,
html.if-splash-open .pai-launcher-label,
html.if-splash-open .pai-top {
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
#ifPalette, .pai-launcher, .pai-launcher-label, .pai-top {
  transition: opacity .6s ease .3s;
}

.if-splash canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.if-splash__mark {
  position: relative;
  width: min(440px, 70vw);
  height: auto;
  filter: drop-shadow(0 0 30px rgba(255, 185, 0, .35));
  animation: ifSpIn 1.6s cubic-bezier(.2, .8, .2, 1) both;
}

.if-splash__lbl {
  position: relative;
  font: 500 11px/1 var(--font-mono, ui-monospace, "JetBrains Mono", monospace);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold, #D4AF52);
  animation: ifSpIn 1.6s .5s both;
}

.if-splash__tg {
  position: relative;
  margin: 0;
  font: 400 clamp(18px, 2vw, 24px)/1.35 var(--font-display, "Cormorant Garamond", Georgia, serif);
  letter-spacing: .06em;
  color: var(--text, #F3EEE0);
  animation: ifSpIn 1.6s .8s both;
}

.if-splash__skip {
  position: relative;
  font: 500 10px/1 var(--font-mono, ui-monospace, "JetBrains Mono", monospace);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-dim, #ABA290);
  animation: ifSpIn 1.6s 1.4s both;
}

/* Exit, in two moves. First the mark travels into the hero lotus and the
   furniture drops away; then the whole overlay fades. --dx/--dy/--sc are
   measured at exit time, so this lands correctly at any viewport size. */
.if-splash.is-shrinking {
  background: transparent;
  transition: background 1.4s ease;
}
.if-splash.is-shrinking canvas,
.if-splash.is-shrinking .if-splash__lbl,
.if-splash.is-shrinking .if-splash__tg,
.if-splash.is-shrinking .if-splash__skip {
  animation: none;
  opacity: 0;
  transition: opacity .6s ease;
}
.if-splash.is-shrinking .if-splash__mark {
  animation: none;
  transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(var(--sc, .4));
  opacity: 0;
  transition: transform 1.6s cubic-bezier(.6, 0, .2, 1), opacity 1.6s ease .6s;
}
.if-splash.is-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@keyframes ifSpIn {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* Phone: the mark carries the moment, the tagline still has to be readable. */
@media (max-width: 560px) {
  .if-splash { gap: 14px; }
  .if-splash__mark { width: min(300px, 78vw); }
  .if-splash__tg { font-size: 17px; }
}

/* Reduced motion: no canvas, no travel, no entrance. The mark is shown
   still and the overlay is dismissed on the first interaction — the
   information is identical, the movement is not. */
@media (prefers-reduced-motion: reduce) {
  .if-splash__mark,
  .if-splash__lbl,
  .if-splash__tg,
  .if-splash__skip { animation: none !important; }
  .if-splash canvas { display: none; }
  .if-splash.is-shrinking .if-splash__mark { transition: opacity .4s ease; transform: none; }
  .if-splash { transition: opacity .4s ease, visibility .4s ease; }
}