:root {
  --lamp: #F5B83D;
  --spark: #3563FF;
}

.intro { display: none; }
.js .intro { display: block; position: fixed; inset: 0; z-index: 300; }
.intro__bg { position: absolute; inset: 0; background: var(--paper); }
.intro__stage {
  position: absolute; left: 50%; top: 50%;
  width: min(50vmin, 400px); aspect-ratio: 1400 / 1236;
  transform: translate(-50%, -50%);
}
.intro__logo { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.intro__png { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform: scale(.94); transition: opacity .8s var(--ease-out), transform 1s var(--ease-out); }
.intro__png img { width: 100%; height: 100%; }
.intro.is-shown .intro__png { opacity: 1; transform: none; }
.intro-on, .intro-on body { overflow: hidden; }
.intro-on .dial__logo { opacity: 0; }
.from-intro .dial { opacity: 1 !important; transform: none !important; }

.hero__visual { display: grid; place-items: center; }

.js [data-reveal] { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: var(--d, 0ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

.js .header { opacity: 0; }
.js .load-up { opacity: 0; transform: translate3d(0, 12px, 0); }
.js .dial { opacity: 0; }
.is-loaded .header { opacity: 1; transition: opacity .8s var(--ease-out), background-color .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.is-loaded .load-up { opacity: 1; transform: none; transition: opacity .9s var(--ease-out) var(--d, .2s), transform .9s var(--ease-out) var(--d, .2s); }
.is-loaded .dial { opacity: 1; transition: opacity 1.2s var(--ease-out) .1s; }
main, .footer { transition: opacity .16s var(--ease-out); }
.is-jumping main, .is-jumping .footer { opacity: 0; }

.scene { position: relative; }
.js .scene { height: 480vh; }
.scene__sticky {
  --bg: var(--paper); --fg: var(--ink); --o: 0;
  position: relative; height: 100vh; height: 100svh; overflow: hidden;
  background: var(--bg); color: var(--fg);
}
.js .scene__sticky { position: sticky; top: 0; }
.scene__head { position: absolute; z-index: 2; left: 0; right: 0; top: calc(var(--header-h) + 24px); display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 2.4fr); gap: clamp(24px, 5vw, 80px); }
.scene__title { margin: 0; font: 500 clamp(28px, 3vw, 42px)/1.1 var(--f-display); letter-spacing: -.02em; }
.scene__caps { position: relative; min-height: 120px; max-width: 520px; }
.scene__cap { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease-out); }
.scene__cap.is-active { opacity: 1; }
.scene__cap h3 { margin: 0 0 6px; font: 500 20px/1.3 var(--f-display); }
.scene__cap p { margin: 0; font-size: 16.5px; line-height: 1.55; opacity: .75; }
.scene__canvas { position: absolute; left: 0; right: 0; bottom: 0; height: 66%; }
.scene__svg { position: absolute; left: 0; bottom: 0; height: 100%; width: auto; aspect-ratio: 1600 / 720; min-width: 100%; max-width: none; will-change: transform; overflow: visible; }
.scene__svg .ln { fill: none; stroke: var(--fg); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scene__svg .thin { stroke-width: 1.3; }
.js .scene__svg [data-draw] { stroke-dasharray: 1; stroke-dashoffset: 1; }
.scene__svg .trail { stroke-dasharray: 1; stroke-dashoffset: 1; fill: none; stroke: var(--spark); stroke-width: 3; stroke-linecap: round; }
.scene__svg .win { fill: var(--lamp); opacity: 0; }
.scene__svg .wall { fill: var(--bg); }
.scene__svg .pulse-core { fill: #fff; }
.scene__svg .pulse-glow { fill: var(--spark); opacity: .35; }
.scene__svg .sun circle, .scene__svg .sun path { fill: none; stroke: var(--fg); stroke-width: 2; stroke-linecap: round; }
.scene__svg .moon { fill: var(--fg); }
.js .scene__svg .moon { opacity: 0; }
.scene__svg .star { fill: var(--fg); opacity: var(--o); }
.scene__svg .cloud { fill: var(--bg); stroke: var(--fg); stroke-width: 1.6; }
.scene__svg .bird path { fill: var(--bg); stroke: var(--fg); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.scene__svg .bird .eye { fill: var(--fg); stroke: none; }
.scene__svg .wing { transform-box: fill-box; transform-origin: 20% 100%; }
.scene__svg .bird.is-flying .wing { animation: flap .18s ease-in-out infinite alternate; }
.scene__svg .sign { fill: var(--lamp); stroke: var(--fg); stroke-width: 1.6; stroke-linejoin: round; }
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(-.7); } }

@media (max-width: 1000px) {
  .scene__head { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 900px) {
  .js .scene { height: 400vh; }
  .scene__head { top: calc(var(--header-h) + 12px); }
  .scene__caps { min-height: 140px; }
  .scene__cap p { font-size: 15px; }
  .scene__canvas { height: 52%; }
}
@media (prefers-reduced-motion: reduce) {
  .js .scene { height: auto; }
  .js .scene__sticky { position: relative; }
  .js .scene__svg [data-draw] { stroke-dashoffset: 0; }
}