/* Use the visible browser viewport, not device pixels or an oversized intro. */
.hero{height:100vh;min-height:100vh;height:var(--hero-viewport,100svh);min-height:var(--hero-viewport,100svh);padding:0;cursor:pointer}
.hero-heading{position:absolute;left:0;right:0;top:var(--hero-heading-center,50%);display:flex;flex-direction:column;align-items:center;transform:translateY(-50%) scale(var(--hero-heading-scale,1));transform-origin:50% 50%}
.hero-heading>*{flex-shrink:0}
.hero-actions{bottom:max(24px,env(safe-area-inset-bottom));cursor:default}
.hero-gesture-hint{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);margin:0;white-space:nowrap;font:9px/1.6 var(--sans);letter-spacing:.03em;color:#fff0d5;text-shadow:0 1px 5px #40351f,0 1px 2px #40351f;pointer-events:none}
.hero-actions .discover-link{cursor:pointer}
.hero-actions .discover-link svg{animation:discover-nudge 2s ease-in-out infinite;will-change:transform}
@keyframes discover-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.hero[data-compact="true"] .hero-actions{bottom:max(20px,env(safe-area-inset-bottom))}
html[lang="ur"] .hero-gesture-hint{font:12px/1.7 UrduUI,serif;letter-spacing:0}
html[lang="ur"] .hero[data-compact="true"] h1{font-size:64px;line-height:1.5}
.hero[data-short="true"] .hero-label{margin-top:12px;font-size:9px}
.hero[data-short="true"] h1{font-size:clamp(48px,13vw,68px);line-height:1}
.hero[data-short="true"] .floral-separator{height:23px;margin-top:7px}
.hero[data-short="true"] .hero-actions{gap:6px;bottom:max(14px,env(safe-area-inset-bottom))}
.hero[data-short="true"] .hero-gesture-hint{bottom:calc(100% + 8px)}
.hero[data-short="true"] .discover-link{min-height:44px;gap:5px}
.hero[data-short="true"] .discover-link svg{height:19px}
html[lang="ur"] .hero[data-short="true"] .hero-label{font-size:16px;line-height:1.7;margin-top:8px}
html[lang="ur"] .hero[data-short="true"] h1{font-size:54px;line-height:1.35}
html[lang="ur"] .hero[data-short="true"] .discover-link{font-size:13px;line-height:1.5}
.hero[data-tiny="true"] h1{font-size:44px}
.hero[data-tiny="true"] .hero-label{margin-top:8px;font-size:8px}
.hero[data-tiny="true"] .floral-separator{height:18px;margin-top:4px}
html[lang="ur"] .hero[data-tiny="true"] .invocation{font-size:18px;line-height:1.6}
html[lang="ur"] .hero[data-tiny="true"] .hero-label{font-size:14px;line-height:1.6;margin-top:6px}
html[lang="ur"] .hero[data-tiny="true"] h1{font-size:44px;line-height:1.3}
html[lang="ur"] .hero[data-tiny="true"] .hero-gesture-hint{font-size:11px}
#celebration:focus{outline:none}
#celebration:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
@media(prefers-reduced-motion:reduce){.hero-actions .discover-link svg{animation:none;will-change:auto}}