/** * mobile-hero-fix-v20260512a.css — emergency fix for: * D1: hero FOEC (opacity:0 waiting on cinematic.js that wasn't loaded) * D2: scroll-triggered reveals not firing (same root cause) * D3: mobile scroll lock near hero (canvas overlays intercepting touch) * * Strategy: defensive fallbacks. Even if no JS runs, hero paints visible. * cinematic.js, when present, can still animate from these final-state * values — the transitions just become no-ops because there's no delta. */ /* ─── D1 + D2: force reveals visible (graceful when JS is absent) ─── */ [data-dr-reveal], [data-reveal], [data-reveal-stagger]>*, .reveal-on-scroll, .cinematic [data-reveal-stagger]>* { opacity: 1 !important; transform: translateY(0) !important; } /* When cinematic.js IS loaded and the .cinematic class is on , allow the reveal-animation to kick back in as a layered enhancement. */ html.cinematic [data-dr-reveal]:not(.is-visible), html.cinematic [data-reveal]:not(.is-visible), html.cinematic [data-reveal-stagger]:not(.is-visible) > * { opacity: 0.001 !important; /* below perceptual threshold but not 0, so layout doesn't shift */ transform: translateY(14px) !important; } html.cinematic [data-dr-reveal].is-visible, html.cinematic [data-reveal].is-visible, html.cinematic [data-reveal-stagger].is-visible > * { opacity: 1 !important; transform: translateY(0) !important; } /* ─── D3: stop the aurora + hero canvas from eating touch events ─── */ .aurora-stage, .dr-hero-canvas-wrap, .dr-hero-canvas-wrap canvas, #dr-hero-canvas, canvas[role="presentation"] { pointer-events: none !important; touch-action: pan-y !important; } /* The hero section itself: let vertical scrolling through, no overflow trap */ .hero-vp, .hero { touch-action: pan-y !important; } .hero-vp { overscroll-behavior: auto !important; } /* If brand-reveal section uses position:sticky / fixed on mobile, drop it. Cap its height so it can't dominate the viewport on first paint. */ @media (max-width: 720px) { .brand-reveal { position: relative !important; max-height: 480px !important; overflow: hidden !important; contain: paint; } body.reveal-played .brand-reveal { max-height: 320px !important; } /* Skip brand-reveal entirely on returning visits — it's a first-impression thing, not a recurring one. */ body.reveal-played .brand-reveal { display: none !important; } } /* ─── Font swap: Fraunces should render fallback IMMEDIATELY, swap on load ─── */ @font-face { font-family: 'Fraunces'; font-display: swap !important; } /* ─── Scroll-snap removal on hero (was capturing iOS scroll) ─── */ .hero-vp, body, html { scroll-snap-type: none !important; } /* ─── Reading-progress bar shouldn't paint until past hero ─── */ @media (max-width: 720px) { .dr-reading-progress { display: none !important; } }