/* Large, slow motion in the existing rose / plum visual language. */
.io-motion-control {
  position: fixed;
  z-index: 44;
  left: 1rem;
  bottom: 1rem;
  min-height: 42px;
  padding: .55rem .85rem;
  border: 1px solid #ae80956b;
  border-radius: 999px;
  background: linear-gradient(120deg, #fffaf5f5, #f0dfedf5);
  color: #503246;
  box-shadow: inset 0 1px #fff, 0 5px 22px #3f22441c;
  font: 500 .875rem/1.4 'Zen Kaku Gothic New', sans-serif;
  cursor: pointer;
  backdrop-filter: blur(12px);
}
.io-motion-control[hidden] { display: none; }
.io-motion-control:focus-visible { outline: 3px solid #8b576e; outline-offset: 3px; }
@media (max-width: 1079px) {
  .io-motion-control { bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: no-preference) {
  html[data-io-motion='on'] .hero-copy-inner { animation: none; position: relative; z-index: 1; }
  html[data-io-motion='on'] .hero-copy-inner > * {
    animation: io-copy-arrive 1.4s cubic-bezier(.16,1,.3,1) both;
  }
  html[data-io-motion='on'] .hero-copy-inner > :nth-child(1) { animation-delay: .12s; }
  html[data-io-motion='on'] .hero-copy-inner > :nth-child(2) { animation-delay: .27s; }
  html[data-io-motion='on'] .hero-copy-inner > :nth-child(3) { animation-delay: .43s; }
  html[data-io-motion='on'] .hero-copy-inner > :nth-child(4) { animation-delay: .57s; }
  html[data-io-motion='on'] .hero-copy-inner > :nth-child(5) { animation-delay: .72s; }
  html[data-io-motion='on'] .hero-copy-inner > :nth-child(6) { animation-delay: .85s; }
  html[data-io-motion='on'] .hero-visual {
    animation: io-photo-open 1.85s cubic-bezier(.16,1,.3,1) both;
  }
  html[data-io-motion='on'] .hero-visual > img {
    transform-origin: 62% 48%;
    animation: io-photo-drift 19s ease-in-out infinite alternate;
  }
  html[data-io-motion='on'] .hero-visual-note {
    animation: io-note-arrive 1.5s .8s cubic-bezier(.16,1,.3,1) backwards, io-note-float 7s 2.3s ease-in-out infinite;
  }
  html[data-io-motion='on'] .hero-copy-column { position: relative; isolation: isolate; overflow: hidden; }
  html[data-io-motion='on'] .hero-copy-column::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: -40%;
    pointer-events: none;
    background: radial-gradient(ellipse at 26% 35%, #e6b4c795, transparent 48%), radial-gradient(ellipse at 70% 64%, #ba9fcc75, transparent 44%), radial-gradient(ellipse at 53% 32%, #fff4d999, transparent 30%);
    animation: io-light-drift 17s ease-in-out infinite alternate;
  }
  html[data-io-motion='on'] .contact-card::before {
    content: '';
    position: absolute;
    inset: -35%;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 28% 45%, #d492af50, transparent 45%), radial-gradient(ellipse at 72% 62%, #9a73b75c, transparent 42%);
    animation: io-light-drift 14s ease-in-out infinite alternate-reverse;
  }
  html[data-io-motion='on'] .button,
  html[data-io-motion='on'] .header-mail,
  html[data-io-motion='on'] .mobile-fixed-mail {
    overflow: hidden;
    isolation: isolate;
  }
  html[data-io-motion='on'] .button,
  html[data-io-motion='on'] .header-mail { position: relative; }
  html[data-io-motion='on'] .button::after,
  html[data-io-motion='on'] .header-mail::after,
  html[data-io-motion='on'] .mobile-fixed-mail::after {
    content: '';
    position: absolute;
    inset: -80% auto -80% -55%;
    width: 36%;
    background: linear-gradient(90deg, transparent, #fff7ea70, transparent);
    pointer-events: none;
    transform: translateX(-100%) rotate(22deg);
    animation: io-button-light 7.5s 1.8s ease-in-out infinite;
  }
  html[data-io-motion='on'] .method-item,
  html[data-io-motion='on'] .menu-row,
  html[data-io-motion='on'] .learning-step,
  html[data-io-motion='on'] .testimonial {
    transition: translate .65s cubic-bezier(.16,1,.3,1), box-shadow .65s ease;
  }
  html[data-io-motion='on'] .section-intro h2::after { transition: width .9s cubic-bezier(.16,1,.3,1); }
  @media (hover: hover) and (pointer: fine) {
    html[data-io-motion='on'] .method-item:hover,
    html[data-io-motion='on'] .learning-step:hover,
    html[data-io-motion='on'] .testimonial:hover {
      translate: 0 -9px;
      box-shadow: 0 28px 48px #3d21482b;
    }
    html[data-io-motion='on'] .section-intro:hover h2::after { width: 8rem; }
    html[data-io-motion='on'] .button:hover { transform: translateY(-4px); }
  }
  @media (max-width: 799px) {
    html[data-io-motion='on'] .hero-visual { animation-name: io-photo-open-mobile; }
    html[data-io-motion='on'] .hero-visual > img { animation-duration: 23s; }
  }
}
/* A visible pause control and the device motion preference both stop motion. */
html[data-io-motion='off'] .site-shell *,
html[data-io-motion='off'] .site-shell *::before,
html[data-io-motion='off'] .site-shell *::after,
html[data-io-motion='off'] .standalone-page * {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
html[data-io-motion='off'] { scroll-behavior: auto !important; }
html.io-page-hidden *,html.io-page-hidden *::before,html.io-page-hidden *::after {
  animation-play-state: paused !important;
}
@keyframes io-copy-arrive {
  from { opacity: 0; transform: translate3d(0,58px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes io-photo-open {
  from { clip-path: inset(0 0 0 100%); }
  to { clip-path: inset(0); }
}
@keyframes io-photo-open-mobile {
  from { clip-path: inset(18% 0 0 0); opacity: 0; }
  to { clip-path: inset(0); opacity: 1; }
}
@keyframes io-photo-drift {
  from { transform: scale(1.035) translate3d(.2%,0,0); }
  to { transform: scale(1.18) translate3d(-1.5%,1%,0); }
}
@keyframes io-note-arrive {
  from { opacity: 0; transform: translate3d(0,40px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes io-note-float {
  0%,100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(0,-12px,0); }
}
@keyframes io-light-drift {
  from { transform: translate3d(-7%,-4%,0) rotate(-9deg) scale(1); }
  to { transform: translate3d(8%,6%,0) rotate(12deg) scale(1.12); }
}
@keyframes io-button-light {
  0%,68% { transform: translateX(-100%) rotate(22deg); opacity: 0; }
  72% { opacity: 1; }
  95%,100% { transform: translateX(600%) rotate(22deg); opacity: 0; }
}