/* 홈 헤더: Hero(풀블리드 딥블루) 구간에서는 숨김, Hero를 지나치면 화이트로 등장. Hero 요소의 view-timeline 기준이라 뷰포트/배너 유무와 무관하게 정확한 지점에서 전환. scroll-driven animation (JS 0줄). 다른 페이지(견적 등)는 클래스가 없어 항상 표시. 이 파일은 일부러 globals.css가 아니라 정적 CSS로 분리돼 있다. Turbopack의 Lightning CSS가 @supports(animation-timeline: scroll()) 블록을 컴파일 타임에 prune하기 때문 — layout.tsx 에서 로 직접 로드한다. 선택자에 header. 를 붙여 globals.css의 .site-header 규칙보다 우선순위를 높여 로드 순서와 무관하게 적용되도록 한다. 미지원 브라우저는 @supports 폴백으로 항상 표시 (숨김 실패보다 안전). */ @supports (animation-timeline: scroll()) { body { timeline-scope: --hero-exit; } /* 시각적 히어로 덩어리는 .hero + .trust-strip(01~04 스트립)까지. 마지막 요소인 trust-strip이 빠져나가는 시점을 기준으로 헤더 등장. */ .trust-strip { view-timeline: --hero-exit block; } /* 숨김 동안 헤더 자리가 비지 않도록 Hero를 상단까지 끌어올림 */ header.site-header--hero-reveal + main { margin-top: -65px; } header.site-header--hero-reveal { animation: header-reveal linear both; animation-timeline: --hero-exit; animation-range: exit 80% exit 95%; } @keyframes header-reveal { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } } @media (max-width: 768px) { header.site-header--hero-reveal + main { margin-top: -57px; } } }