never needed. */
.scroll-indicator {
position: absolute; right: clamp(1.5rem, 4vw, var(--pad)); bottom: clamp(2rem, 6vw, 4.5rem);
display: inline-flex; align-items: center; gap: .9rem;
font-family: var(--font-body); font-size: .95rem; font-weight: 700; letter-spacing: .1em;
text-transform: uppercase; color: #fff;
background: rgba(10,10,10,.92); backdrop-filter: blur(10px) saturate(140%);
border: 2px solid rgba(255,255,255,.85); border-radius: 999px;
padding: 1.3em 2.3em; cursor: pointer; appearance: none;
box-shadow: 0 6px 28px rgba(0,0,0,.5), 0 0 0 0 rgba(255,255,255,.5);
animation: wt-pulse 2.6s ease-in-out infinite;
transition: background .2s ease, transform .2s ease;
}
.scroll-indicator:hover, .scroll-indicator:focus-visible {
background: #000; transform: scale(1.06); animation-play-state: paused;
}
@keyframes wt-pulse {
0%, 100% { box-shadow: 0 6px 28px rgba(0,0,0,.5), 0 0 0 0 rgba(255,255,255,.45); }
50% { box-shadow: 0 6px 28px rgba(0,0,0,.5), 0 0 0 10px rgba(255,255,255,0); }
}
/* A play wedge, not a down-chevron — a chevron reads "scroll for more",
which is exactly the implied auto-play cue sir asked to remove. */
.wt-enter-icon {
width: 0; height: 0; margin-left: 2px;
border-top: 7px solid transparent; border-bottom: 7px solid transparent;
border-left: 11px solid #fff;
}
@media (max-width: 780px) {
/* Third real iteration, same day, all from Sir's own phone. First cut:
card visible instantly, ate the whole first screen. Second cut: card
as an absolute overlay that faded in on scroll - better, but a fast
scroll could blow straight past it before the fade finished, since it
never physically occupied space of its own. Final shape: `.hero-card`
is a plain block in normal flow, a real sibling of `.hero-standalone`
(see the HTML restructure) sitting immediately below the full-screen
photo. Scrolling down by any amount, fast or slow, physically moves
you into it - nothing to animate, nothing to miss. No JS needed for
this any more either. */
.hero-standalone { height: 100svh; }
.hero-card {
position: static; width: auto; left: auto; right: auto; bottom: auto;
padding: 1.5rem var(--pad) 1.8rem;
background: var(--slate-deep); backdrop-filter: none; -webkit-backdrop-filter: none;
}
.hero-heading { font-size: 1.85rem; margin-bottom: .6rem; }
.hero-links { margin: 1rem 0 1.1rem; padding-top: 1rem; }
/* Tap targets, 2026-10-16. Audited on an iPhone profile: five of the seven
tappable things above the fold were under the 44px minimum a thumb can
reliably hit — the hero links were 18px and the walkthrough entry button
itself only 21px. Padding rather than height, so nothing reflows. */
.tlink { padding-top: .75rem; padding-bottom: .75rem; }
.hero-links { gap: 0 1.25rem; margin-top: 1rem; }
.wt-entry-btn { min-height: 44px; }
}
@media (prefers-reduced-motion: no-preference) {
.hero-standalone { will-change: opacity; }
}
/* ===== Canvas ===== (mechanic — unchanged, minus the scroll-linked
circle-wipe reveal: that animated clip-path was keyed to scrollContainer's
scroll progress, which only existed because the walkthrough used to be
auto-triggered in-page. Entry is a click now, not a scroll, and
#walkthrough itself snaps open instantly — same convention
pytches-close-site's own #walkthrough uses, no transition on the overlay
shell — so there's nothing left for a clip-path wipe to key off. */
/* Reversed again, same day: the canvas walkthrough isn't gone, it's a
second, separate "Virtual tour" entry point now (see .btn-tour in
index.html) — Sir had already promised a scroll-driven tour by email, and
the real