/* The opening: headline, the app being opened, a line about the studio, and the dock. */
.hero { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.hero-head { position: absolute; left: 0; right: 0; top: clamp(84px, 10.5vh, 116px); text-align: center; }
.hero-kick { font-size: 14px; font-weight: 600; color: var(--ink-3); letter-spacing: 0.01em; }
.curtain { position: fixed; inset: 0; z-index: 35; background: #060607; pointer-events: none; }
.curtain .hero-h1 { margin-top: 12px; font-size: clamp(52px, 5.3vw, 96px); font-weight: 830; font-stretch: 125%; line-height: 0.95; letter-spacing: -0.038em; color: #f4f1ea; }
.curtain .hero-h1 span:last-child { color: rgba(244, 241, 234, 0.5); }
.curtain .hero-kick { color: rgba(244, 241, 234, 0.58); }
.hero h1 { margin-top: 12px; font-size: clamp(52px, 5.3vw, 96px); font-weight: 830; font-stretch: 125%; line-height: 0.95; letter-spacing: -0.038em; }
.hero h1 span:last-child { color: rgba(var(--ink-rgb), 0.5); }
.hero-sub { position: absolute; right: clamp(28px, 6.4vw, 120px); top: 50%; width: min(24vw, 390px); font-size: clamp(17.5px, 1.05vw, 21px); line-height: 1.5; color: rgba(var(--ink-rgb), var(--soft)); font-weight: 420; text-wrap: pretty; }
.hero-sub b, .hero-apps b { color: var(--ink); font-weight: 680; }
.hero-apps { list-style: none; position: absolute; left: clamp(28px, 6.4vw, 120px); top: 46%; width: min(28vw, 460px); }
.hero-apps li { position: absolute; left: 0; top: 0; visibility: hidden; }
.hero-apps small { font-size: 12.5px; font-weight: 680; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.hero-apps h2 { margin: 6px 0 14px; font-size: clamp(44px, 4.3vw, 74px); font-weight: 830; font-stretch: 125%; letter-spacing: -0.036em; line-height: 0.95; }
.hero-apps p { font-size: clamp(17.5px, 1.05vw, 21px); line-height: 1.48; color: rgba(var(--ink-rgb), var(--soft)); font-weight: 420; text-wrap: pretty; }
.hero-apps span { display: block; margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--ink-3); }

.dock-wrap { position: absolute; left: 50%; bottom: 22px; width: 0; height: 82px; pointer-events: auto; }
.dock { position: absolute; left: 0; bottom: 0; }
.dock-glass {
  position: absolute; left: 0; bottom: 0; height: 82px; transform: translateX(-50%); border-radius: 26px;
  background: rgba(36, 36, 40, 0.58); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 20px 50px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5);
}
.dock button { position: absolute; left: 0; bottom: 12px; width: 58px; height: 58px; transform-origin: 50% 100%; }
.dock button img { width: 100%; height: 100%; border-radius: 13px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.38); }
.dock button i { position: absolute; left: 50%; bottom: -8px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); opacity: 0; }
.dock-tip {
  position: absolute; left: 0; bottom: 12px; white-space: nowrap; padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 600;
  background: rgba(40, 40, 44, 0.88); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); pointer-events: none;
}

/* the icon in flight (100px, scaled), and on the glass as the app opens out of it */
.hero-fly { position: absolute; left: 0; top: 0; width: 100px; height: 100px; border-radius: 22.5px; transform-origin: 0 0; visibility: hidden; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); }
.hero-launch { position: absolute; left: 0; top: 0; z-index: 20; transform-origin: 50% 50%; visibility: hidden; }
.hero-launch img { width: 100%; height: 100%; border-radius: 22.5%; }