/* MUNKÁINK: Cadence Tunnel Flight (tunnel-gallery.js, tunnel-flight.js). A long scroll track with a sticky,
   screen-high stage; the captions follow the section's progress (--tf-p, 0-1). Full bleed: the section around it
   is a .wrap, so the track steps out of its padding. */
.tf-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.tf-toolbar[hidden],.tf-gallery[hidden],#sharp-gallery[hidden],.gallery-return[hidden]{display:none}
.tf-toolbar button,.gallery-return{min-height:44px;padding:10px 16px;background:transparent;border:1px solid var(--line);border-radius:30px;font-size:11px;color:var(--ink);cursor:pointer}
.tf-toolbar button:hover,.gallery-return:hover{background:var(--ink);color:var(--paper)}
.tf-toolbar button:focus-visible,.gallery-return:focus-visible,.tf-outro-link:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
.gallery-return{margin:24px 0 16px}

.tf-gallery{--tf-p:0;position:relative;height:440vh;margin:24px calc(var(--pad) * -1) 56px;background:var(--paper);color:var(--ink)}
.tf-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.tf-canvas{position:absolute;inset:0;display:block;width:100%;height:100%}

/* Soft paper edges, and at the start a fade from the page into the fog. */
.tf-veil{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 78% 72% at 50% 50%,rgb(238 237 231 / 0) 58%,rgb(238 237 231 / .7) 100%),linear-gradient(rgb(238 237 231 / calc(1 - var(--tf-p) * 30)),rgb(238 237 231 / 0) 22%)}

/* The opening title grows toward us and fades in the first metres of the flight, as if we flew past it. */
.tf-intro{position:absolute;inset:0;z-index:1;isolation:isolate;display:grid;place-content:center;justify-items:center;gap:18px;padding:0 24px;text-align:center;pointer-events:none;opacity:clamp(0,calc(1 - var(--tf-p) * 11),1);transform:scale(calc(1 + var(--tf-p) * 4));will-change:transform,opacity}
/* a soft paper halo behind the title, so it reads over the first photos; it fades with the title */
.tf-intro::before{content:"";position:absolute;left:50%;top:50%;z-index:-1;width:min(1100px,130vw);height:min(620px,90vh);transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgb(238 237 231 / .94),rgb(238 237 231 / .78) 55%,rgb(238 237 231 / 0))}
.tf-kicker{justify-content:center;color:var(--copper);font-size:11px;font-weight:600;letter-spacing:.2em}
.tf-intro h3{margin:0;font-size:clamp(44px,7.4vw,118px);font-weight:500;line-height:.98;letter-spacing:-.065em;text-shadow:0 6px 40px rgb(238 237 231 / .9)}
.tf-intro h3 span{color:var(--muted)}
.tf-sub{max-width:34ch;margin:0;color:#4f544c;font-size:15px;line-height:1.6;text-shadow:0 2px 18px rgb(238 237 231 / .95)}
.tf-hint{position:relative;display:block;width:1px;height:54px;margin-top:10px;overflow:hidden;background:rgb(36 41 37 / .16)}
.tf-hint span{position:absolute;inset:0;background:var(--copper);animation:tf-hint 1.8s cubic-bezier(.65,0,.35,1) infinite}
@keyframes tf-hint{from{transform:translateY(-100%)}to{transform:translateY(100%)}}

/* The closing caption over the final photo once the camera has landed: bottom left, over a paper gradient. */
.tf-outro{position:absolute;inset:auto 0 0;display:grid;justify-items:start;gap:14px;padding:160px var(--pad) clamp(48px,9vh,96px);background:linear-gradient(rgb(238 237 231 / 0),rgb(238 237 231 / .92));opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s}
.tf-outro>*{transform:translateY(18px);transition:transform .9s cubic-bezier(.22,1,.36,1)}
.tf-gallery.is-landed .tf-outro{opacity:1;visibility:visible;transition-delay:0s}
.tf-gallery.is-landed .tf-outro>*{transform:none}
.tf-outro .tf-kicker{justify-content:start}
.tf-outro-title{max-width:16ch;margin:0;font-size:clamp(32px,4.4vw,64px);font-weight:500;line-height:1.02;letter-spacing:-.055em}
.tf-outro-link{display:inline-flex;align-items:center;min-height:44px;font-size:12px;color:var(--ink);text-decoration:underline;text-underline-offset:4px}

/* Progress at the foot of the stage. */
.tf-meter{position:absolute;left:50%;bottom:24px;width:140px;height:1px;margin-left:-70px;background:rgb(36 41 37 / .16);opacity:clamp(0,calc((var(--tf-p) - .03) * 20),1)}
.tf-meter span{position:absolute;inset:0;background:var(--copper);transform:scaleX(var(--tf-p));transform-origin:left}
.tf-gallery.is-landed .tf-meter{opacity:0;transition:opacity .4s ease}

@media(max-width:847px){
  .tf-toolbar{flex-wrap:wrap;gap:16px}
  .tf-toolbar button{font-size:10px}
  .tf-gallery{height:380vh}
  .tf-sub{font-size:14px}
  .tf-outro{padding:140px 24px 40px;background:linear-gradient(rgb(238 237 231 / 0),rgb(238 237 231 / .94) 45%)}
}
@media(prefers-reduced-motion:reduce){.tf-hint span{animation:none}.tf-outro,.tf-outro>*{transition:none}}