/* Tokai hub overlay. Shared hub styles stay in tokai.css for chugoku/shikoku. */
.tokai-hub-anime{
  --color-tokai-call: oklch(52% .19 255);
  --color-tokai-call-deep: oklch(42% .18 255);
  --color-tokai-call-ink: oklch(99% .012 250);
}
.tokai-hub-anime .tokai-hub-hero{min-height:clamp(32rem,50vw,42rem)}
.tokai-hub-anime .tokai-hub-hero-inner{padding-block:var(--space-10) var(--space-12)}
.tokai-hub-anime .tokai-hub-hero-stack{display:grid;justify-items:center;width:min(46rem,min(94%,74%));margin-inline:auto;gap:var(--space-4);text-align:center}
.tokai-hub-anime .tokai-hub-hero-area{margin:0;padding-inline:var(--space-2);color:var(--color-teal-dark);font-family:var(--font-display);font-size:clamp(1.55rem,3.4vw,2.5rem);font-weight:700;letter-spacing:.08em;line-height:1.4;overflow-wrap:anywhere;text-shadow:0 1px 0 oklch(100% 0 0 / .85),0 0 18px oklch(100% 0 0 / .7),0 0 32px oklch(99% .005 78 / .9)}
.tokai-hub-anime .tokai-hub-hero-copy{display:grid;justify-items:center;width:100%;margin:0;padding:var(--space-6) var(--space-8) var(--space-6);background:color-mix(in oklch,var(--color-page) 96%,transparent);box-shadow:var(--shadow);text-align:center}
.tokai-hub-anime .tokai-hub-hero-copy h1{max-width:38rem;margin:0;color:var(--color-ink);font-family:var(--font-display);font-size:clamp(1.12rem,2.1vw,1.38rem);font-weight:500;font-style:normal;letter-spacing:.04em;line-height:1.75}
.tokai-hub-anime .tokai-hub-title-break{display:none}
.tokai-hub-anime .tokai-hub-hero-lede{max-width:30rem;margin:var(--space-5) 0 0;color:var(--color-ink);font-family:var(--font-display);font-size:clamp(1rem,1.6vw,1.12rem);font-weight:500;line-height:1.95;letter-spacing:.03em}
.tokai-hub-anime .tokai-hub-hero-invite{margin:var(--space-3) 0 0;color:var(--color-teal-dark);font-family:var(--font-display);font-size:clamp(1.05rem,1.8vw,1.22rem);font-weight:600;letter-spacing:.06em;line-height:1.7}

.tokai-hub-anime .tokai-hub-call{position:relative;display:grid;width:min(100%,24rem);margin-top:var(--space-6);overflow:hidden;border-radius:var(--radius-md);background:var(--color-tokai-call);color:var(--color-tokai-call-ink);text-decoration:none;box-shadow:0 10px 28px oklch(42% .18 255 / .3);animation:tokai-call-glow 1.1s var(--ease-in-out) infinite}
.tokai-hub-anime .tokai-hub-call::after{content:"";position:absolute;inset:0;pointer-events:none;background:oklch(100% 0 0 / .22);opacity:0;animation:tokai-call-blink 1.1s var(--ease-in-out) infinite}
.tokai-hub-anime .tokai-hub-call-kicker{display:block;padding:var(--space-2) var(--space-4);background:var(--color-tokai-call-deep);font-size:var(--text-sm);font-weight:800;letter-spacing:.04em;line-height:1.4;white-space:nowrap}
.tokai-hub-anime .tokai-hub-call-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-1) var(--space-4);padding:var(--space-3) var(--space-4) 0;font-size:.78rem;font-weight:800;line-height:1.4;white-space:nowrap}
.tokai-hub-anime .tokai-hub-call-action{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:48px;padding:0 var(--space-4) var(--space-3);font-size:clamp(1.02rem,2.1vw,1.2rem);font-weight:900;line-height:1.2;white-space:nowrap}
.tokai-hub-anime .tokai-hub-call-icon{flex:none;transform:rotate(-20deg)}
@keyframes tokai-call-blink{
  0%,100%{opacity:0}
  45%,55%{opacity:1}
}
@keyframes tokai-call-glow{
  0%,100%{box-shadow:0 10px 28px oklch(42% .18 255 / .28)}
  45%,55%{box-shadow:0 0 0 5px oklch(62% .16 255 / .42),0 14px 34px oklch(42% .2 255 / .48)}
}
.tokai-hub-anime .tokai-hub-call:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px;animation:none}
.tokai-hub-anime .tokai-hub-call:focus-visible::after{animation:none}
.tokai-hub-anime .tokai-hub-call:active{filter:brightness(.92)}

.tokai-hub-anime .tokai-area-band-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-3) var(--space-6);min-height:5.5rem}
.tokai-hub-anime .tokai-area-band h2{margin:0;padding:0;font-size:var(--text-xl);line-height:1.4;white-space:nowrap;text-align:center}
.tokai-hub-anime .tokai-area-band a{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);min-height:48px;margin:0;padding:0;border:0;grid-column:auto;color:var(--color-teal-dark);font-weight:700;white-space:nowrap;text-decoration-color:var(--color-teal)}

@keyframes tokai-anime-rise{
  from{opacity:0;transform:translateY(.8rem)}
  to{opacity:1;transform:none}
}
@keyframes tokai-anime-ken{
  from{transform:scale(1)}
  to{transform:scale(1.06)}
}
@keyframes tokai-anime-area{
  from{opacity:0;transform:translateY(.5rem)}
  to{opacity:1;transform:none}
}
@keyframes tokai-anime-nudge{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(.28rem)}
}
@keyframes tokai-anime-phone{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.035)}
}
@keyframes tokai-anime-rule{
  from{transform:translateX(-50%) scaleX(0)}
  to{transform:translateX(-50%) scaleX(1)}
}
@keyframes tokai-anime-rule-left{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}

.tokai-hub-anime .tokai-hub-hero-media{
  transform-origin:center;
  animation:tokai-anime-ken 22s var(--ease-in-out) infinite alternate;
}
.tokai-hub-anime .tokai-hub-hero-area{animation:tokai-anime-area .8s var(--ease-out) both}
.tokai-hub-anime .tokai-hub-hero-copy{animation:tokai-anime-rise .75s var(--ease-out) .14s both}
.tokai-hub-anime .tokai-hub-hero-copy h1{animation:tokai-anime-rise .65s var(--ease-out) .28s both}
.tokai-hub-anime .tokai-hub-hero-lede{animation:tokai-anime-rise .65s var(--ease-out) .4s both}
.tokai-hub-anime .tokai-hub-hero-invite{animation:tokai-anime-rise .65s var(--ease-out) .5s both}
.tokai-hub-anime .tokai-hub-call{animation:tokai-anime-rise .7s var(--ease-out) .62s both,tokai-call-glow 1.1s var(--ease-in-out) .62s infinite}

.tokai-hub-anime [data-anime]{opacity:0;transform:translateY(.9rem)}
.tokai-hub-anime [data-anime].is-in{animation:tokai-anime-rise .7s var(--ease-out) both}
.tokai-hub-anime .tokai-genre-list .tokai-genre:nth-child(2).is-in{animation-delay:.08s}
.tokai-hub-anime .tokai-genre-list .tokai-genre:nth-child(3).is-in{animation-delay:.16s}
.tokai-hub-anime .tokai-service-catalog-head.is-in h2::after{transform-origin:center;animation:tokai-anime-rule .55s var(--ease-out) .12s both}
.tokai-hub-anime .tokai-area-band a span{display:inline-block;animation:tokai-anime-nudge 1.5s var(--ease-in-out) infinite}
.tokai-hub-anime .tokai-hub-cta.is-in .tokai-hub-phone{animation:tokai-anime-phone 2.2s var(--ease-in-out) .2s infinite}
.tokai-hub-anime .tokai-service-link{overflow:hidden}
.tokai-hub-anime .tokai-service-link img{transition:transform var(--dur-base) var(--ease-out)}
.tokai-hub-anime .tokai-area-band a,
.tokai-hub-anime .tokai-hub-contact .btn{transition:transform var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}

@media(hover:hover) and (pointer:fine){
  .tokai-hub-anime .tokai-hub-call:hover{filter:brightness(1.08)}
  .tokai-hub-anime .tokai-service-link:hover img{transform:scale(1.06)}
  .tokai-hub-anime .tokai-area-band a:hover{transform:translateX(.15rem)}
  .tokai-hub-anime .tokai-hub-contact .btn:hover{transform:translateY(-.12rem)}
}

@media(max-width:64rem){
  .tokai-hub-anime .tokai-area-band a{grid-column:auto;border-top:0;padding:0}
}

@media(max-width:52rem){
  .tokai-hub-anime .tokai-hub-hero{min-height:34rem}
  .tokai-hub-anime .tokai-hub-hero-inner{align-items:center;justify-content:center;padding-block:var(--space-6) var(--space-8)}
  .tokai-hub-anime .tokai-hub-hero-stack{width:min(100%,34rem);gap:var(--space-3)}
  .tokai-hub-anime .tokai-hub-hero-area{font-size:clamp(1.4rem,6.4vw,2.1rem);letter-spacing:.05em}
  .tokai-hub-anime .tokai-hub-hero-copy{width:100%;padding:var(--space-6) var(--space-5) var(--space-5)}
  .tokai-hub-anime .tokai-hub-hero-copy h1{font-size:clamp(.95rem,3.4vw,1.12rem)}
  .tokai-hub-anime .tokai-hub-call{width:100%}
  .tokai-hub-anime .tokai-area-band-inner{display:flex;grid-template-columns:none;padding-block:var(--space-4);gap:var(--space-2) var(--space-5)}
  .tokai-hub-anime .tokai-area-band h2{padding:0;text-align:center;flex:none}
}

@media(max-width:30rem){
  .tokai-hub-anime .tokai-hub-title-break{display:block}
  .tokai-hub-anime .tokai-hub-hero{min-height:30rem}
  .tokai-hub-anime .tokai-hub-hero-inner{padding-block:var(--space-4) var(--space-6)}
  .tokai-hub-anime .tokai-hub-hero-copy{padding:var(--space-5) var(--space-4) var(--space-4)}
  .tokai-hub-anime .tokai-hub-hero-area{font-size:clamp(1.28rem,7.2vw,1.7rem);letter-spacing:.04em}
  .tokai-hub-anime .tokai-hub-hero-copy h1{font-size:.95rem;line-height:1.55}
  .tokai-hub-anime .tokai-hub-hero-lede,
  .tokai-hub-anime .tokai-hub-hero-invite{font-size:var(--text-sm)}
  .tokai-hub-anime .tokai-hub-hero-lede{margin-top:var(--space-4)}
  .tokai-hub-anime .tokai-hub-call-kicker{letter-spacing:0;font-size:.72rem}
  .tokai-hub-anime .tokai-hub-call-meta{flex-direction:column;gap:0;white-space:normal}
  .tokai-hub-anime .tokai-hub-call-action{font-size:1rem}
  .tokai-hub-anime .tokai-area-band h2{font-size:var(--text-lg)}
  .tokai-hub-anime .tokai-service-catalog-head.is-in h2::after{transform-origin:left;animation-name:tokai-anime-rule-left}
}

@media(prefers-reduced-motion:reduce){
  .tokai-hub-anime .tokai-hub-hero-media,
  .tokai-hub-anime .tokai-hub-hero-area,
  .tokai-hub-anime .tokai-hub-hero-copy,
  .tokai-hub-anime .tokai-hub-hero-copy h1,
  .tokai-hub-anime .tokai-hub-hero-lede,
  .tokai-hub-anime .tokai-hub-hero-invite,
  .tokai-hub-anime .tokai-hub-call,
  .tokai-hub-anime .tokai-hub-call::after,
  .tokai-hub-anime [data-anime],
  .tokai-hub-anime [data-anime].is-in,
  .tokai-hub-anime .tokai-service-catalog-head.is-in h2::after,
  .tokai-hub-anime .tokai-area-band a span,
  .tokai-hub-anime .tokai-hub-cta.is-in .tokai-hub-phone{
    animation:none;
    opacity:1;
    transform:none;
  }
  .tokai-hub-anime .tokai-service-link img{transition:none}
}

/* Hallmark · component: hero copy · theme: existing brand
 * pre-emit critique: P4 H5 E4 S5 R5 V4 · static typography
 */
.tokai-hub-anime .tokai-hub-hero-copy h1{width:100%;max-width:38rem;line-height:1.5;letter-spacing:.02em}
.tokai-hub-anime .tokai-hub-services{display:block;color:var(--color-teal-dark);font-weight:700;text-wrap:balance}
.tokai-hub-anime .tokai-hub-services>span{display:inline-block}
.tokai-hub-anime .tokai-hub-repair{display:inline;margin-top:0;color:var(--color-ink);font-weight:700}
.tokai-hub-anime .tokai-hub-arrival{display:inline;margin-top:0;font-weight:700;line-height:1.3;letter-spacing:0}
.tokai-hub-anime .tokai-hub-speed{color:var(--color-accent-dark);white-space:nowrap}
.tokai-hub-anime .tokai-hub-minutes{display:inline-block;margin-inline:.035em;font-weight:700;line-height:1.3;letter-spacing:0}
.tokai-hub-anime .tokai-hub-arrival-end{color:var(--color-teal-dark);white-space:nowrap}
.tokai-hub-anime .tokai-hub-hero-lede{margin-top:var(--space-5);color:var(--color-ink);font-weight:500;line-height:1.9;letter-spacing:0;text-wrap:balance}
.tokai-hub-anime .tokai-hub-free{color:var(--color-accent-dark);font-weight:900;-webkit-text-stroke:.25px currentColor;text-decoration:underline;text-decoration-color:var(--color-accent);text-decoration-thickness:2px;text-underline-offset:.22em;white-space:nowrap}
.tokai-hub-anime .tokai-hub-hero-invite{margin-top:var(--space-5);color:var(--color-teal-dark);font-weight:700;letter-spacing:.025em;line-height:1.6}
.tokai-hub-anime .tokai-hub-call{margin-top:var(--space-3)}
@media(max-width:30rem){
  .tokai-hub-anime .tokai-hub-hero-lede{margin-top:var(--space-4)}
  .tokai-hub-anime .tokai-hub-hero-invite{margin-top:var(--space-4)}
}