/*
  Opening animation (logo intro).

  Timeline (seconds): icon wipes in -> notes drop onto the staff -> MGOK is
  "written" left to right -> subtitle opens from its centre -> hold ->
  logo lifts away -> white curtain slides up, red edge leading.
  Change the --t-* values on .intro to retime it.
*/

@property --p {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

html.has-intro:not(.intro-done) { overflow: hidden; }
html.intro-done .intro { display: none; }

.intro {
  --t-icon: .2s;
  --t-notes: .95s;
  --t-note-step: .13s;
  --t-mgok: .7s;
  --t-subtitle: 1.6s;
  --t-out: 2.6s;
  --t-curtain: 2.75s;

  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--paper, #fff);
  cursor: pointer;
}

/* Red edge that hangs just below the curtain, so it only shows once it lifts. */
.intro::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 3px;
  background: var(--red, #e30010);
}

.intro.is-playing {
  animation: intro-curtain .95s var(--ease-in-out, cubic-bezier(.76, 0, .24, 1)) var(--t-curtain) both;
}

.intro__logo {
  position: relative;
  width: min(80vw, 620px);
  aspect-ratio: 650 / 220;
}

.intro.is-playing .intro__logo {
  animation: logo-out .6s cubic-bezier(.5, 0, .75, 0) var(--t-out) both;
}

/* Every layer is the full logo canvas, so they line up by simply stacking. */
.intro__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  user-select: none;
}

.intro.is-playing .intro__layer { opacity: 1; }

/* Soft left-to-right wipe: --from / --to are positions on the logo canvas. */
.intro__layer--icon,
.intro__layer--mgok {
  --soft: 14%;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--p) - var(--soft)), transparent var(--p));
          mask-image: linear-gradient(90deg, #000 calc(var(--p) - var(--soft)), transparent var(--p));
  --p: var(--from);
}

.intro__layer--icon {
  --from: 0%;
  --to: 48%;
  --drift: -18px;
  --blur: 4px;
}

.intro__layer--mgok {
  --from: 36%;
  --to: 115%;
  --drift: -36px;
  --blur: 10px;
}

.intro.is-playing .intro__layer--icon {
  animation:
    wipe 1.2s cubic-bezier(.45, 0, .2, 1) var(--t-icon) both,
    drift-in 1.2s cubic-bezier(.22, .9, .24, 1) var(--t-icon) both;
}

.intro.is-playing .intro__layer--mgok {
  animation:
    wipe 1.25s cubic-bezier(.4, 0, .3, 1) var(--t-mgok) both,
    drift-in 1.25s cubic-bezier(.22, .9, .24, 1) var(--t-mgok) both;
}

/* Notes drop in one after another, each pivoting around its own head. */
.intro__layer--note { transform-origin: var(--ox) var(--oy); }

.intro__layer--note.n1 { --ox: 16.9%; --oy: 37.3%; --n: 0; }
.intro__layer--note.n2 { --ox: 24%;   --oy: 41%;   --n: 1; }
.intro__layer--note.n3 { --ox: 27.7%; --oy: 49%;   --n: 2; }
.intro__layer--note.n4 { --ox: 19.4%; --oy: 59%;   --n: 3; }

.intro.is-playing .intro__layer--note {
  animation: note-in .75s cubic-bezier(.3, .7, .3, 1) calc(var(--t-notes) + var(--n) * var(--t-note-step)) both;
}

.intro.is-playing .intro__layer--subtitle {
  animation: subtitle-in .85s var(--ease-out, cubic-bezier(.22, .9, .24, 1)) var(--t-subtitle) both;
}

@keyframes wipe {
  to { --p: var(--to); }
}

@keyframes drift-in {
  from { transform: translateX(var(--drift)); filter: blur(var(--blur)); }
  to   { transform: none; filter: blur(0); }
}

@keyframes note-in {
  0%   { opacity: 0; transform: translateY(-9%) scale(.5) rotate(-14deg); }
  55%  { opacity: 1; transform: translateY(1.5%) scale(1.1) rotate(3deg); }
  100% { opacity: 1; transform: none; }
}

@keyframes subtitle-in {
  from { opacity: 0; transform: translateY(12px); clip-path: inset(0 31.3% 0 68.7%); }
  to   { opacity: 1; transform: none; clip-path: inset(0); }
}

@keyframes logo-out {
  to { opacity: 0; transform: translateY(-5vh) scale(.96); }
}

@keyframes intro-curtain {
  to { transform: translateY(-100%); }
}

/* The visitor switched animations off in the footer. */
.no-motion .intro { display: none; }

/* Browsers that cannot animate the registered custom property (no CSS.registerProperty): fade and slide instead of the soft wipe. */
.legacy-motion .intro__layer--icon,
.legacy-motion .intro__layer--mgok {
  -webkit-mask-image: none;
          mask-image: none;
}

.legacy-motion .intro.is-playing .intro__layer--icon { animation: legacy-in 1s ease-out var(--t-icon) both; }
.legacy-motion .intro.is-playing .intro__layer--mgok { animation: legacy-in 1.1s ease-out var(--t-mgok) both; }

@keyframes legacy-in {
  from { opacity: 0; transform: translateX(-26px); }
  to   { opacity: 1; transform: none; }
}