/* Lightweight live typography, layered over both supplied hero films. */
.hero-graphics{position:absolute;right:7%;top:42%;width:35%;pointer-events:none;color:#f5f1e8;text-shadow:0 2px 22px #000b}
.graphic-locator{font-size:9px;letter-spacing:.24em;opacity:.8;margin-bottom:24px}
.graphic-words{position:relative;height:116px}
.graphic-word{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;animation:story-word 24s infinite;animation-delay:var(--delay)}
.graphic-index{color:#e2bc4e;font-size:9px;letter-spacing:.23em;margin-bottom:12px}
.graphic-word strong{font-family:Arial,sans-serif;font-size:clamp(24px,3.4vw,56px);line-height:1.05;font-weight:700;letter-spacing:.055em}
.graphic-word small{font-size:8px;letter-spacing:.16em;line-height:1.6;margin-top:16px}
.graphic-track{position:relative;height:1px;background:#f5f1e84d;margin-top:14px;overflow:visible}
.graphic-track i{position:absolute;top:-1px;left:0;width:28%;height:3px;background:linear-gradient(90deg,transparent,#e2bc4e,#fff7d8);box-shadow:8px 0 20px #e2bc4e80;animation:story-light 4s infinite}
.graphic-time{display:flex;justify-content:space-between;gap:10px;font-size:8px;letter-spacing:.16em;margin-top:18px;color:#e0d9c7}
.graphic-time span{color:#e2bc4e}
@keyframes story-word{0%{opacity:0;transform:translateY(16px);filter:blur(4px)}3%,13%{opacity:1;transform:translateY(0);filter:blur(0)}16%,100%{opacity:0;transform:translateY(-10px);filter:blur(3px)}}
@keyframes story-light{0%{transform:translateX(0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateX(257%);opacity:0}}
.hero.graphics-paused .hero-graphics *{animation-play-state:paused}
@media(min-width:768px) and (max-width:1100px){.hero-graphics{top:40%;right:5%;width:33%}.graphic-words{height:100px}.graphic-locator{font-size:7px}.graphic-word small{font-size:7px;letter-spacing:.08em}}
@media(max-width:767px){.hero-graphics{top:54vw;left:7%;right:auto;width:76%}.graphic-locator{font-size:7px;margin-bottom:13px;letter-spacing:.18em}.graphic-words{height:clamp(78px,20vw,112px)}.graphic-word strong{font-size:clamp(26px,7.6vw,53px)}.graphic-index{font-size:7px;margin-bottom:9px}.graphic-word small{font-size:7px;margin-top:10px}.graphic-track{margin-top:8px}.graphic-time{font-size:7px;margin-top:13px}}
@media(prefers-reduced-motion:reduce){.graphic-word{animation:none;opacity:0;transform:none;filter:none}.graphic-word:first-child{opacity:1}.graphic-track i{animation:none;left:36%;opacity:1}}

/* Video-time-driven light: past, present, future. */
.hero-graphics{transition:opacity .25s ease}
.hero-graphics.logo-ending{opacity:0}
.graphic-time .time-word{font-weight:400;animation:story-era 4s infinite}
.graphic-time .time-present{animation-delay:1.33s}
.graphic-time .time-future{animation-delay:2.66s}
@keyframes story-era{0%,30%,100%{color:#e0d9c7;text-shadow:none}9%,22%{color:#fff5c9;text-shadow:0 0 8px #e2bc4e,0 0 18px #e2bc4e99}}
.graphic-track i::after{content:"";position:absolute;right:0;top:-2px;width:5px;height:5px;border-radius:50%;background:#fff4c3;box-shadow:0 0 9px 3px #e2bc4e88}
@media(prefers-reduced-motion:reduce){.hero-graphics{transition:none}.graphic-time .time-word{animation:none}}