/* Motion language inspired by the reference: clipped reveals, soft slide-ins and compact mobile panels. */
.hero-title > span,
.hero-title > em,
.hero-title > strong {
  display: inline-block;
  opacity: 0;
  transform: translateY(24px) skewY(3deg);
  transition: opacity .6s ease, transform .85s cubic-bezier(.16,1,.3,1);
}
.page-ready .hero-title > span{opacity:1;transform:none;transition-delay:.12s}
.page-ready .hero-title > em{opacity:1;transform:none;transition-delay:.24s}
.page-ready .hero-title > strong{opacity:1;transform:none;transition-delay:.38s}
.reveal{will-change:opacity,transform,clip-path;clip-path:inset(0 0 18% 0)}
.reveal.is-visible{clip-path:inset(0 0 0 0)}
.member-card.reveal,.scene-card.reveal{transform:translateX(34px) rotate(.6deg)}
.member-card.reveal.is-visible,.scene-card.reveal.is-visible{transform:none}
.promise.reveal{transform:translateY(55px);clip-path:inset(0 0 35% 0)}
.promise.reveal.is-visible{transform:none;clip-path:inset(0)}
.hero-character img{transform:translate3d(0,var(--parallax-y,0),0);transition:transform .12s linear}
.otaku-required img{transform:translate3d(0,var(--required-y,0),0)}
.slider-dots{display:flex;justify-content:center;gap:8px;margin:14px 0 0}.slider-dots button{width:8px;height:8px;padding:0;border:1px solid var(--navy);border-radius:50%;background:#fff;cursor:pointer}.slider-dots button.active{width:25px;border-radius:999px;background:var(--blue);border-color:var(--blue)}
.side-cta,.hero-cta,.otaku-required>a{overflow:hidden}.side-cta:after,.hero-cta:after,.otaku-required>a:after{content:"";position:absolute;inset:-30% auto -30% -40%;width:30%;background:rgba(255,255,255,.42);transform:skewX(-18deg);animation:cta-shine 3.8s ease-in-out infinite}.side-cta,.hero-cta,.otaku-required>a{position:relative}
@keyframes cta-shine{0%,55%{left:-40%}80%,100%{left:125%}}

@media(max-width:860px){
  .hero{min-height:775px;height:775px;padding-bottom:22px}
  .hero:after{bottom:20px}
  .hero .mobile-head{margin-bottom:32px}
  .hero .eyebrow{margin-bottom:12px}
  .hero-title{font-size:44px!important;line-height:.96}
  .hero-copy{margin-top:16px;font-size:10px;line-height:1.65;max-width:290px}
  .hero-character{width:auto!important;height:450px;right:-7%!important;bottom:18px!important}
  .hero-character img{width:auto;height:100%;max-width:none}
  .hero-cta{width:78%;margin-left:8px;padding:14px 16px;bottom:4px}

  #about{padding:58px 24px 54px}
  #about .section-head{margin-bottom:18px}
  #about .lead{margin-bottom:14px;line-height:1.7}
  .team-lineup{height:118px;width:100%;margin:0 auto 14px;object-fit:contain}
  .member-grid{padding-bottom:8px}
  .member-card{flex-basis:270px;min-height:295px;padding:16px 20px}
  .member-avatar{width:80px;height:160px;margin:0 auto 10px}
  .member-avatar img{width:320px;height:160px}
  .member-avatar.role-2 img{left:-80px}.member-avatar.role-3 img{left:-160px}.member-avatar.role-4 img{left:-240px}
  .member-card h3{font-size:17px}.member-card p{font-size:10px}

  .otaku-required{min-height:650px;padding:65px 24px 22px}
  .otaku-required h2{font-size:56px;margin-top:8px}
  .otaku-required img{width:auto;height:330px;max-width:100%;margin:-5px auto -18px;object-fit:contain}
  .otaku-required a{padding:15px 22px}

  .statement{min-height:520px;padding:65px 24px}
  .statement p{font-size:15px}.statement h2{font-size:43px}
  .statement-mascot{width:auto!important;height:350px;right:-13%;bottom:-15px;object-fit:contain}

  .support-scenes{padding:62px 24px 54px}
  .support-scenes .section-head{margin-bottom:24px}
  .scene-card{flex-basis:300px;padding:16px}
  .phone-mock{width:150px;height:245px;border-width:6px;margin-top:14px}
  .phone-mock strong{font-size:45px}.scene-card h3{font-size:22px}.scene-card p{font-size:10px}

  #service{padding:62px 24px 54px}
  #service .section-head{margin-bottom:22px}
  .service-card{min-height:0!important;padding:14px 17px}
  .service-card h3{font-size:19px;margin:5px 0 4px}.service-card p{font-size:10px;line-height:1.45}

  #flow{padding:62px 24px 54px}
  #flow .section-head{margin-bottom:22px}
  .flow-list li{padding:15px 14px}.flow-list b{width:39px;height:39px}.flow-list h3{font-size:16px}

  .contact{padding:65px 24px 26px}
  .contact-top h2{font-size:43px;margin-bottom:14px}.contact-top p{font-size:11px}
  .contact-character{height:118px;width:100%;object-fit:contain;margin:6px auto -5px}
  .contact-form{gap:13px;margin:18px 0 45px;padding:18px}.contact-form label{gap:5px}.contact-form input,.contact-form textarea{padding:10px 11px}.contact-form textarea{height:90px}.contact-form button{padding:14px 16px}
  .company-credit{margin-bottom:34px;padding:17px}
}

@media(max-width:390px){
  .hero-title{font-size:42px!important}
  .hero-character{height:420px;right:-9%!important}
  .section-head h2{font-size:31px}
}

@media(prefers-reduced-motion:reduce){.hero-title>span,.hero-title>em,.hero-title>strong{opacity:1;transform:none}.side-cta:after,.hero-cta:after,.otaku-required>a:after{display:none}}