/* /flight/ — Take flight: an eagle draws itself on a wall, then flies. Studio fonts and tokens; the wall is drawn on the canvas. */
.fl-story { position: relative; background: #c9ab80; }
.fl-story.fl-pencil { background: #f3ede1; }
.fl-stage { position: relative; min-height: 80svh; overflow: hidden; }
.fl-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.fl-words { position: relative; z-index: 2; display: grid; gap: 2rem; padding: 12svh var(--pad) 10svh; max-width: var(--maxw); margin-inline: auto; }
.fl-cap { margin: 0; font: 700 clamp(1.6rem, 3.4vw, 2.8rem)/1.1 var(--f-display); letter-spacing: -.03em; color: #1b1712; max-width: 18ch; }
.fl-kick { margin: 0 0 1rem; font: 500 .74rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #3d3226; }
.fl-cap h1 { font-size: clamp(2.4rem, 5.4vw, 4.6rem); line-height: 1; letter-spacing: -.04em; max-width: 13ch; margin: 0; }
.fl-cap h2 { font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: 1; letter-spacing: -.04em; margin: 0 0 1rem; max-width: 12ch; }
.fl-cap--end p { font: 400 1.15rem/1.5 var(--f-body); letter-spacing: 0; max-width: 32ch; color: #2d261d; margin: 0 0 1.4rem; }
.fl-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.fl-cue { display: none; }
.fl-after__in { max-width: 760px; }
.fl-after h2 { margin: 14px 0 18px; font-size: clamp(2rem, 4vw, 3rem); }
.fl-after p { color: var(--ink-2); font-size: 1.1rem; }

/* ---------- the scroll story ---------- */
.fl-on .fl-story { height: 900svh; }
.fl-on .fl-stage { position: sticky; top: 0; height: 100svh; min-height: 0; }
.fl-on .fl-words { position: absolute; inset: 0; padding: 0; max-width: none; display: block; pointer-events: none; }
.fl-on .fl-cap { position: absolute; left: max(var(--pad), (100vw - var(--maxw)) / 2 + var(--pad)); top: 14svh; opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .5s, transform .6s cubic-bezier(.2, .7, .2, 1), visibility 0s .6s; text-shadow: 0 1px 0 rgba(255, 240, 210, .35); }
.fl-on .fl-cap.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .5s, transform .6s cubic-bezier(.2, .7, .2, 1), visibility 0s; }
.fl-on .fl-cap--intro { top: auto; bottom: 14svh; }
.fl-on .fl-cap--big { font-size: clamp(2.6rem, 6vw, 5.2rem); top: auto; bottom: 14svh; }
.fl-on .fl-cap--end { top: 50%; transform: translateY(-46%); pointer-events: auto; max-width: none; }
.fl-on .fl-cap--end.is-on { transform: translateY(-50%); }
.fl-on .fl-cue { display: block; margin: 1.6rem 0 0; font: 500 .74rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #3d3226; }
.fl-on .fl-cue::after { content: ""; display: block; width: 2px; height: 36px; margin-top: 10px; background: currentColor; transform-origin: top; animation: fl-drip 1.8s ease-in-out infinite; }
@keyframes fl-drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

@media (max-width: 700px) {
  .fl-on .fl-cap { top: 9svh; max-width: 14ch; font-size: 1.6rem; }
  .fl-on .fl-cap--intro, .fl-on .fl-cap--big { top: auto; bottom: 9svh; }
  .fl-on .fl-cap--end { top: auto; bottom: 7svh; transform: translateY(14px); }
  .fl-on .fl-cap--end.is-on { transform: none; }
}

/* pencil / ink switch, top right of the stage */
.fl-style { position: absolute; z-index: 5; top: 16px; right: 16px; display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 250, 240, .78);
  box-shadow: 0 0 0 1px rgba(40, 30, 20, .15); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.fl-style button { min-height: 32px; padding: 0 .9rem; border: 0; border-radius: 999px; background: none; color: #2d261d; font: 600 .82rem var(--f-body); cursor: pointer; }
.fl-style button[aria-checked="true"] { background: #1b1712; color: #fff8ec; }
.fl-style button:focus-visible { outline: 2px solid #1b1712; outline-offset: 2px; }
.fl-on .fl-style { position: absolute; }