fix(tarot): 랜딩 영상 element 복원 + scroll-cue 제거

- codex UI 재구성 시 <video> element 자체와 .tarot__hero-video CSS가
  누락되어 영상 재생 불가 (poster img만 정적 표시).
- <video> 복원 (autoplay, loop, muted, playsInline) + poster fallback.
- CSS z-index 0으로 poster 위, overlay(1) 아래에 stack.
- prefers-reduced-motion @media display:none 동작 복원.
- 사용자 요청에 따라 tarot__scroll-cue 제거.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-24 14:56:35 +09:00
parent a6721e6536
commit 192c8a8c8c
2 changed files with 25 additions and 4 deletions

View File

@@ -40,6 +40,20 @@
z-index: 0; z-index: 0;
} }
.tarot__hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.tarot__hero-video { display: none; }
}
.tarot__hero-overlay { .tarot__hero-overlay {
position: absolute; position: absolute;
inset: 0; inset: 0;

View File

@@ -6,6 +6,17 @@ export default function Tarot() {
return ( return (
<div className="tarot tarot--landing"> <div className="tarot tarot--landing">
<img className="tarot__hero-poster" src="/images/tarot_background.png" alt="" aria-hidden /> <img className="tarot__hero-poster" src="/images/tarot_background.png" alt="" aria-hidden />
<video
className="tarot__hero-video"
src="/videos/tarot_hero.mp4"
autoPlay
loop
muted
playsInline
preload="metadata"
poster="/images/tarot_background.png"
aria-hidden
/>
<div className="tarot__hero-overlay" /> <div className="tarot__hero-overlay" />
<div className="tarot__corner tarot__corner--left" aria-hidden /> <div className="tarot__corner tarot__corner--left" aria-hidden />
<div className="tarot__corner tarot__corner--right" aria-hidden /> <div className="tarot__corner tarot__corner--right" aria-hidden />
@@ -64,10 +75,6 @@ export default function Tarot() {
</article> </article>
</div> </div>
<div className="tarot__scroll-cue" aria-hidden>
<span>SCROLL TO DISCOVER</span>
<b></b>
</div>
</div> </div>
</div> </div>
); );