/* Televelo holding page (televelo.at while the full site is parked): one screen with the headline and the barrier tape.
   Builds on style.css: tokens, masthead, buttons, fineprint and the motion keyframes. Motion only under html.fx. See DESIGN.md. */

/* ---------- One screen: masthead, hero, tape, fine print ---------- */
.soon-page { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.soon-page main { flex: 1; display: flex; flex-direction: column; }

/* ---------- Hero ---------- */
.soon-hero { container-type: inline-size; width: 100%; padding-top: clamp(32px, 5vw, 72px); padding-bottom: clamp(48px, 5vw, 72px); display: flex; flex-direction: column; align-items: flex-start; gap: clamp(22px, 2.6vw, 34px); }
/* Fitted: the longest line spans the content width, capped so masthead, hero, tape and fine print stay one screen.
   --fit = em width of the longest line at wdth 125 plus 2 %: "construction." 10.69 em, "Aufbau." 5.67 em. Re-measure after copy changes. */
.soon-hero h1 { --fit: 10.9; font-size: min(calc(100cqi / var(--fit)), 13vh); font-size: min(calc(100cqi / var(--fit)), 13svh); }
:lang(de) .soon-hero h1 { --fit: 5.8; }
.soon-hero .h-line { display: block; }   /* the lines are the sign: they never reflow */
.soon-hero .lead { max-width: 600px; }
.fx .soon-hero .h-line > span { animation-name: soon-line; }   /* starts lower than style.css: no cap tops peek out of the mask */
@keyframes soon-line { from { transform: translateY(125%); } to { transform: none; } }

/* ---------- Barrier tape: the one marquee, stretched across the bottom of the screen ---------- */
.tape { width: calc(100% + 160px); margin: auto 0 clamp(36px, 4vw, 56px) -80px; padding: 13px 0; background: var(--signal); color: var(--asphalt); overflow: hidden; transform: rotate(-2deg); }
.tape-track { display: flex; width: max-content; }
.tape-track span { display: flex; align-items: center; gap: .6em; padding-right: .6em; font-family: var(--display); font-size: clamp(18px, 2.2vw, 30px); line-height: 1; font-weight: 820; font-stretch: 125%; letter-spacing: .01em; text-transform: uppercase; white-space: nowrap; }
.tape-track i { display: inline-block; width: 2.4em; height: .72em; background: repeating-linear-gradient(-45deg, var(--asphalt) 0 .18em, transparent .18em .36em); }
.fx .tape-track { animation: tv-marquee 48s linear infinite; }

/* ---------- Footer: the fine print only ---------- */
.soon-footer .wrap { padding-top: 22px; padding-bottom: 30px; }
.soon-footer .fineprint { border-top: 0; padding-top: 0; }

@media print { .tape { display: none !important; } }