/* Selected landing: option one, also available at ?intro=animated. */
.panel-intro .intro-question{display:block;font:inherit;font-size:.85em;line-height:1.04;white-space:nowrap;margin-bottom:0}
.panel-intro h1 em{display:block}
.panel-intro.intro-animated{overflow:hidden;min-height:max(780px,100dvh);background:var(--porcelain)}
.panel.intro-animated::before{content:none}
.intro-animated .panel-inner{position:relative;z-index:1;width:min(100%,700px)}
.intro-animated h1{font-size:clamp(3.25rem,8vw,7rem)}
.intro-graphics{position:absolute;inset:0;pointer-events:none}
.intro-graphic{position:absolute;width:clamp(90px,min(12vw,15vh),150px);aspect-ratio:1;transform:rotate(var(--tilt));animation:intro-travel 24s linear var(--delay) infinite both;animation-play-state:paused}
.intro-graphic-face{display:block;width:100%;height:100%;background:var(--tile-ground);border-radius:var(--radius)}
.intro-graphic .graphic-art{display:block;width:100%;height:100%}
.intro-graphic-0{left:10%;top:11%}
.intro-graphic-1{left:44%;top:10%}
.intro-graphic-2{right:10%;top:11%}
.intro-graphic-3{left:13%;bottom:10%}
.intro-graphic-4{left:45%;bottom:5%}
.intro-graphic-5{right:10%;bottom:12%}
.intro-animated.is-active:not(.motion-paused) .intro-graphic{animation-play-state:running}
.intro-motion{position:absolute;right:24px;bottom:20px;min-height:44px;z-index:2;border:1px solid var(--line-strong)}
.intro-motion .motion-play,.intro-motion[aria-pressed="true"] .motion-pause{display:none}
.intro-motion[aria-pressed="true"] .motion-play{display:block}
@keyframes intro-travel{
  from{transform:translateX(30px) rotate(var(--tilt))}
  to{transform:translateX(calc(-100vw - 100% - 30px)) rotate(var(--tilt))}
}
@media(max-width:760px){
  .intro-animated h1{font-size:clamp(3rem,13vw,4.5rem)}
  .intro-graphic{width:clamp(72px,23vw,110px)}
  .intro-graphic-0{left:4%;top:14%}
  .intro-graphic-1{left:39%;top:12%}
  .intro-graphic-2{right:3%;top:14%}
  .intro-graphic-3{left:5%;bottom:14%}
  .intro-graphic-4{left:39%;bottom:8%}
  .intro-graphic-5{right:3%;bottom:15%}
  .intro-animated .lead{font-size:1rem;margin-top:18px}
  .intro-animated .panel-actions{margin-top:24px}
}
@media(prefers-reduced-motion:no-preference){
  .intro-animated .intro-graphic{left:100%;right:auto;top:13%;bottom:auto}
  .intro-animated .intro-graphic:nth-child(n+4){top:auto;bottom:10%}
  .intro-animated:not(.intro-ribbon) .intro-graphic:nth-child(-n+3){animation-direction:reverse}
  /* Rotate the whole face, not the travel track, so its path stays horizontal. */
  .intro-animated:not(.intro-ribbon) :is(.intro-graphic-0,.intro-graphic-2,.intro-graphic-5) .intro-graphic-face{animation:intro-spin 18s linear infinite;animation-play-state:paused}
  .intro-animated:not(.intro-ribbon) .intro-graphic-2 .intro-graphic-face{animation-duration:22s;animation-delay:-2s}
  .intro-animated:not(.intro-ribbon) .intro-graphic-5 .intro-graphic-face{animation-duration:26s;animation-delay:-4s}
  .intro-animated.is-active:not(.motion-paused):not(.intro-ribbon) .intro-graphic .intro-graphic-face{animation-play-state:running}
}
@keyframes intro-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media(min-width:761px) and (max-height:820px){
  .intro-animated:not(.intro-ribbon) .intro-graphic{width:clamp(90px,13vh,120px)}
}
@media(prefers-reduced-motion:reduce){
  .intro-graphic{animation:none;opacity:1}
  .intro-motion{display:none}
}

/* Second option: headline → moving ribbon → subtitle → Go. */
.panel-intro.intro-ribbon{min-height:100dvh;padding:100px 0 80px}
.intro-ribbon .panel-inner{width:100%;max-width:none}
.intro-ribbon .intro-heading,.intro-ribbon .lead{padding-inline:var(--gutter)}
.intro-ribbon h1{font-size:clamp(3rem,7vw,6rem)}
.intro-ribbon .intro-graphics{position:relative;inset:auto;width:100%;height:clamp(150px,24vw,240px);margin:28px 0 12px;overflow:hidden}
.intro-ribbon .intro-graphics .intro-graphic{left:100%;right:auto;top:25px;bottom:auto;width:clamp(100px,18vw,180px);animation-name:intro-ribbon-travel}
@keyframes intro-ribbon-travel{
  from{transform:translateX(30px) rotate(var(--tilt))}
  to{transform:translateX(calc(-1 * max(1200px, 100vw + 240px))) rotate(calc(var(--tilt) * -1))}
}
.intro-ribbon .lead{margin-top:12px}
.intro-ribbon .panel-actions{margin-top:24px}
@media(max-width:760px){.intro-ribbon h1{font-size:clamp(3rem,13vw,4.5rem)}}
@media(prefers-reduced-motion:reduce){
  .intro-ribbon .intro-graphics{display:flex;align-items:center;justify-content:center;gap:clamp(8px,2vw,28px);padding:16px var(--gutter)}
  .intro-ribbon .intro-graphics .intro-graphic{position:static;flex:0 1 150px;min-width:0;transform:none;animation:none}
}
@media(prefers-reduced-motion:reduce) and (max-width:600px){
  .intro-ribbon .intro-graphics{height:auto;display:grid;grid-template-columns:repeat(3,minmax(0,90px));gap:12px;margin-block:24px 12px}
  .intro-ribbon .intro-graphics .intro-graphic{width:100%}
}