/* v2: small red accents and staged motion, with original content/layout retained. */
html { scroll-behavior: smooth; scroll-padding-top: var(--gat-header-offset, 100px); }
main [id] { scroll-margin-top: 20px; }
.gat-reveal { transition: opacity 650ms ease, translate 650ms cubic-bezier(.2,.65,.3,1); }
.gat-reveal.gat-waiting { opacity: 0; translate: 0 8px; }
.gat-heading { position: relative; }
.gat-heading-accent { position:absolute; top:-12px; left:50%; translate:-50% 0; display:flex; align-items:center; justify-content:flex-end; gap:3px; width:116px; height:3px; color:var(--red,#e60012); pointer-events:none; }
.gat-heading-accent::before { content:''; position:absolute; left:0; right:23px; height:2px; background:currentColor; transform-origin:left; }
.gat-heading-accent i { width:4px; height:4px; background:currentColor; transform:skewX(-18deg); }
.gat-heading-car { position:absolute; bottom:1px; left:0; width:32px; height:16px; }
/* Hero titles have ample clear space below; other headings keep subtitles clear. */
.lower-mv__title .gat-heading-accent { top:auto; bottom:-18px; }
.step-heading__title .gat-heading-accent, .staff-card__name .gat-heading-accent { display:none; }
.staff__title-ja .gat-heading-accent { top:auto; bottom:-30px; }
.gat-entered .gat-heading-accent::before { animation:gat-draw 850ms cubic-bezier(.2,.6,.3,1) both; }
.gat-entered .gat-heading-car { animation:gat-arrive 2200ms cubic-bezier(.2,.6,.3,1) both; }
.gat-heading.gat-entered { animation:gat-heading-in 750ms cubic-bezier(.2,.6,.3,1) both; }
.gat-hero-entry { animation:gat-hero-in 1000ms cubic-bezier(.2,.6,.3,1) both; }
.gat-picture { transition:clip-path 950ms cubic-bezier(.2,.6,.3,1),opacity 700ms ease,filter 300ms ease; clip-path:inset(0); }
.gat-picture.gat-waiting { clip-path:inset(0 18% 0 0); translate:none; }
.gat-card { transition:opacity 650ms ease,translate 850ms cubic-bezier(.2,.6,.3,1),box-shadow 250ms ease; transition-delay:var(--gat-delay,0ms); }
.gat-card.gat-waiting { translate:0 18px; }
.gat-progress { position:fixed; top:calc(var(--gat-header-offset,100px) - 20px); left:0; right:0; height:2px; z-index:10002; pointer-events:none; background:linear-gradient(90deg,var(--red,#e60012),#ff6b75); transform:scaleX(var(--gat-progress,0)); transform-origin:left; opacity:.85; }
@keyframes gat-draw { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes gat-arrive { from { translate:-14px 0; opacity:0; } 20% { opacity:1; } to { translate:57px 0; opacity:1; } }
@keyframes gat-heading-in { from { opacity:.2; translate:0 10px; } to { opacity:1; translate:0 0; } }
@keyframes gat-hero-in { from { opacity:.3; translate:0 18px; } to { opacity:1; translate:0 0; } }
a { transition: opacity 220ms ease, filter 220ms ease; }
@media (hover: hover) {
  main a:hover img { filter: brightness(1.04); }
  main a img { transition: filter 300ms ease; }
  .gat-card:hover { box-shadow:0 10px 26px #00000014; }
  .gat-card:hover img { filter:brightness(1.04); }
}
main a:focus-visible { outline:2px solid var(--red,#e60012); outline-offset:4px; }
.l-footer { position: relative; }
.gat-drive { position: absolute; top: 30px; left: 50%; width: 190px; height: 38px; translate: -50% 0; pointer-events: none; color: var(--red, #e60012); overflow: hidden; opacity: .8; }
.gat-drive::after { content: ''; position: absolute; bottom: 4px; left: 8px; right: 8px; height: 1px; background: currentColor; opacity: .22; }
.gat-car { position: absolute; bottom: 5px; left: 0; width: 64px; height: 32px; overflow: visible; }
@media (max-width: 768px) { .gat-drive { top: 24px; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .gat-reveal.gat-waiting { opacity: 1; translate: none; }
  .gat-picture.gat-waiting { clip-path:inset(0); }
  .gat-car { transform: translateX(63px); }
}