/* Intro: the hero's lamp, switching on. On the dark dotted stage the bulb's
   outline draws itself as the counter runs to 100% (--intro-progress, set in
   JS) while the words of the line light up in turn; then the bulb fills with
   yellow, "Brilliant Idea." flickers on, and the screen opens out of the bulb
   onto the hero, behind a front of yellow light. */
@property --intro-iris {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

.intro-screen {
  /* The bulb's glass is centred at (50%, --bulb-y): the dots light up
     around it and the screen opens out of it. */
  --bulb-height: clamp(120px, 32vh, 280px);
  --bulb-y: 38%;
  --spot-x: 50%;
  --spot-y: var(--bulb-y);
  position: fixed;
  z-index: 30;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(80% 70% at 50% var(--bulb-y), #2c312f, transparent 65%),
    var(--stage);
  color: var(--paper);
  transition: --intro-iris 1000ms cubic-bezier(.65, 0, .35, 1);
}

.intro-screen.is-leaving {
  --intro-iris: 110vmax;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at 50% var(--bulb-y), transparent calc(var(--intro-iris) - 1px), #000 var(--intro-iris));
  mask-image: radial-gradient(circle at 50% var(--bulb-y), transparent calc(var(--intro-iris) - 1px), #000 var(--intro-iris));
}

/* The light front riding the edge of the opening. */
.intro-screen::after {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% var(--bulb-y), transparent var(--intro-iris), rgb(252 204 12 / 50%) calc(var(--intro-iris) + 2px), rgb(252 204 12 / 12%) calc(var(--intro-iris) + 48px), transparent calc(var(--intro-iris) + 200px));
  content: "";
  opacity: 0;
  pointer-events: none;
}

.intro-screen.is-leaving::after {
  opacity: 1;
}

.intro-screen .stage-spot {
  opacity: 0;
  transition: opacity 700ms ease 150ms;
}

.intro-screen.is-lit .stage-spot {
  opacity: 1;
}

.intro-bulb {
  position: absolute;
  top: var(--bulb-y);
  left: 50%;
  height: var(--bulb-height);
  aspect-ratio: 200 / 280;
  translate: -50% -37.5%;
}

/* The bulb's light, centred on the glass. */
.intro-bulb::before {
  content: "";
  position: absolute;
  top: 37.5%;
  left: 50%;
  width: 230%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(253 178 1 / 32%), rgb(253 178 1 / 9%) 45%, transparent);
  opacity: 0;
  translate: -50% -50%;
}

.intro-bulb svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.intro-bulb-track {
  fill-rule: evenodd;
  stroke: rgb(255 255 255 / 8%);
}

/* The logo's bulb, as in the hero: the outline draws with the count, then
   it fills with amber when lit. */
.intro-bulb-glass {
  --bulb-off: rgb(255 255 255 / 45%);
  --bulb-on: var(--amber);
  fill: var(--amber);
  fill-opacity: 0;
  fill-rule: evenodd;
  stroke: var(--bulb-off);
  /* Thin enough not to close the slit between the rim and the glass. */
  stroke-width: 1.2;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--intro-progress, 0));
}

/* The base bars wait unlit, then flicker on with the bulb and glow. */
.intro-bulb-base,
.intro-bulb-cap {
  fill: rgb(255 255 255 / 22%);
}

.intro-line {
  position: absolute;
  top: calc(var(--bulb-y) + var(--bulb-height) * .625 + clamp(12px, 3.5vh, 36px));
  right: 0;
  left: 0;
  margin: 0;
  padding: 0 24px;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: .94;
  text-align: center;
  text-transform: uppercase;
}

.intro-lead {
  display: block;
  font-size: clamp(1.3rem, min(3vw, 5vh), 2.6rem);
  letter-spacing: .02em;
}

/* Words rest unlit, as outlines, and flicker on like the hero's title. */
.intro-word {
  --word-on: var(--paper);
  --word-glow: 0 0 .4em rgb(252 204 12 / 18%);
  display: inline-block;
  color: transparent;
  -webkit-text-stroke: max(1px, .012em) rgb(255 255 255 / 32%);
}

.intro-word--idea {
  --word-on: var(--yellow);
  --word-glow: 0 0 .25em rgb(252 204 12 / 45%), 0 0 .9em rgb(252 204 12 / 30%);
  display: block;
  margin-top: .08em;
  font-size: clamp(2.8rem, min(10vw, 14vh), 8rem);
  letter-spacing: -.025em;
}

.intro-footer {
  position: absolute;
  right: max(4.25vw, 24px);
  bottom: max(28px, 4vh);
  left: max(4.25vw, 24px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.intro-status,
.intro-skip {
  color: rgb(255 255 255 / 72%);
  font-family: var(--font-body);
  font-size: clamp(.74rem, 1vw, .9rem);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.intro-status {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
}

.intro-status::before {
  content: "";
  width: 34px;
  height: 2px;
  flex: 0 0 auto;
  background: var(--yellow);
}

.intro-counter {
  min-width: 4ch;
  color: var(--yellow);
  font-variant-numeric: tabular-nums;
}

.intro-skip {
  padding: 8px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: color 180ms ease;
}

.intro-skip:hover {
  color: var(--yellow);
}

/* Running: the bulb's outline and the footer settle in, and the words of
   the lead light up one after another while the bulb draws. */
.intro-screen.is-running .intro-bulb-track,
.intro-screen.is-running .intro-bulb-base,
.intro-screen.is-running .intro-bulb-cap,
.intro-screen.is-running .intro-footer {
  animation: intro-fade 700ms ease both;
}

.intro-screen.is-running .intro-lead .intro-word {
  animation: intro-word-power 700ms step-end calc(150ms + var(--word) * 300ms) both;
}

/* Lit: the bulb fills and "Brilliant Idea." flickers on with it, and the
   dots around the bulb catch the light. */
.intro-screen.is-lit .intro-bulb-glass {
  filter: drop-shadow(0 0 18px rgb(253 178 1 / 45%));
  animation:
    intro-bulb-power 700ms step-end both,
    intro-bulb-fill 700ms step-end both;
}

.intro-screen.is-lit .intro-bulb-base {
  animation:
    hero-bar-power 700ms step-end both,
    hero-bar-glow 3200ms ease-in-out 1000ms infinite alternate;
}

.intro-screen.is-lit .intro-bulb-cap {
  animation:
    hero-bar-power 700ms step-end 80ms both,
    hero-bar-glow 3200ms ease-in-out 1200ms infinite alternate;
}

.intro-screen.is-lit .intro-bulb::before {
  animation: intro-glow-power 700ms step-end both;
}

.intro-screen.is-lit .intro-word--idea {
  animation: intro-word-power 700ms step-end both;
}

/* With step-end each keyframe holds until the next, so the light snaps
   off/on like a bulb catching rather than fading. */
@keyframes intro-word-power {
  0%, 14%, 28% {
    color: transparent;
    -webkit-text-stroke-color: rgb(255 255 255 / 32%);
    text-shadow: none;
  }

  8%, 22%, 40%, 100% {
    color: var(--word-on);
    -webkit-text-stroke-color: transparent;
    text-shadow: var(--word-glow);
  }
}

@keyframes intro-bulb-power {
  0%, 14%, 28% { stroke: var(--bulb-off); }
  8%, 22%, 40%, 100% { stroke: var(--bulb-on); }
}

@keyframes intro-bulb-fill {
  0%, 14%, 28% { fill-opacity: 0; }
  8%, 22% { fill-opacity: .5; }
  40%, 100% { fill-opacity: 1; }
}

@keyframes intro-glow-power {
  0%, 14%, 28% { opacity: 0; }
  8%, 22% { opacity: .55; }
  40%, 100% { opacity: 1; }
}



@keyframes intro-fade {
  from {
    opacity: 0;
  }
}