/* ============================================
   株式会社シード - Animation Styles
   animation.css
   華やかなアニメーション・トランジション
   ============================================ */

/* --- CSS Custom Properties for Animation --- */
:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
  --duration-fast: 0.4s;
  --duration-normal: 0.6s;
  --duration-slow: 0.8s;
  --duration-slower: 1.2s;
}

/* ============================================
   FADE-IN VARIANTS (override u-fade-in)
   ============================================ */

/* Base fade-in - smoother with longer duration */
.u-fade-in {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s var(--ease-out-expo), transform 1s var(--ease-out-expo);
}

.u-fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children animation */
.u-fade-in.is-visible .policy__card,
.u-fade-in.is-visible .biz-examples__card,
.u-fade-in.is-visible .monthly-edu__card,
.u-fade-in.is-visible .promises__card,
.u-fade-in.is-visible .center-summary__card,
.u-fade-in.is-visible .center-detail__point,
.u-fade-in.is-visible .vision-section__pillar,
.u-fade-in.is-visible .info-cards__card,
.u-fade-in.is-visible .safety-manual__item {
  animation: staggerFadeUp 0.7s var(--ease-out-back) both;
}

.u-fade-in.is-visible .policy__card:nth-child(1),
.u-fade-in.is-visible .biz-examples__card:nth-child(1),
.u-fade-in.is-visible .monthly-edu__card:nth-child(1),
.u-fade-in.is-visible .promises__card:nth-child(1),
.u-fade-in.is-visible .center-summary__card:nth-child(1),
.u-fade-in.is-visible .center-detail__point:nth-child(1),
.u-fade-in.is-visible .vision-section__pillar:nth-child(1),
.u-fade-in.is-visible .info-cards__card:nth-child(1),
.u-fade-in.is-visible .safety-manual__item:nth-child(1) { animation-delay: 0.1s; }

.u-fade-in.is-visible .policy__card:nth-child(2),
.u-fade-in.is-visible .biz-examples__card:nth-child(2),
.u-fade-in.is-visible .monthly-edu__card:nth-child(2),
.u-fade-in.is-visible .promises__card:nth-child(2),
.u-fade-in.is-visible .center-summary__card:nth-child(2),
.u-fade-in.is-visible .center-detail__point:nth-child(2),
.u-fade-in.is-visible .vision-section__pillar:nth-child(2),
.u-fade-in.is-visible .info-cards__card:nth-child(2),
.u-fade-in.is-visible .safety-manual__item:nth-child(2) { animation-delay: 0.2s; }

.u-fade-in.is-visible .policy__card:nth-child(3),
.u-fade-in.is-visible .biz-examples__card:nth-child(3),
.u-fade-in.is-visible .monthly-edu__card:nth-child(3),
.u-fade-in.is-visible .promises__card:nth-child(3),
.u-fade-in.is-visible .center-summary__card:nth-child(3),
.u-fade-in.is-visible .center-detail__point:nth-child(3),
.u-fade-in.is-visible .vision-section__pillar:nth-child(3),
.u-fade-in.is-visible .info-cards__card:nth-child(3),
.u-fade-in.is-visible .safety-manual__item:nth-child(3) { animation-delay: 0.3s; }

.u-fade-in.is-visible .policy__card:nth-child(4),
.u-fade-in.is-visible .biz-examples__card:nth-child(4),
.u-fade-in.is-visible .monthly-edu__card:nth-child(4),
.u-fade-in.is-visible .promises__card:nth-child(4),
.u-fade-in.is-visible .safety-manual__item:nth-child(4) { animation-delay: 0.4s; }

.u-fade-in.is-visible .biz-examples__card:nth-child(5),
.u-fade-in.is-visible .vision-section__pillar:nth-child(4),
.u-fade-in.is-visible .safety-manual__item:nth-child(5) { animation-delay: 0.5s; }

.u-fade-in.is-visible .vision-section__pillar:nth-child(5),
.u-fade-in.is-visible .safety-manual__item:nth-child(6) { animation-delay: 0.6s; }

.u-fade-in.is-visible .safety-manual__item:nth-child(7) { animation-delay: 0.7s; }
.u-fade-in.is-visible .safety-manual__item:nth-child(8) { animation-delay: 0.75s; }
.u-fade-in.is-visible .safety-manual__item:nth-child(9) { animation-delay: 0.8s; }
.u-fade-in.is-visible .safety-manual__item:nth-child(10) { animation-delay: 0.85s; }
.u-fade-in.is-visible .safety-manual__item:nth-child(11) { animation-delay: 0.9s; }
.u-fade-in.is-visible .safety-manual__item:nth-child(12) { animation-delay: 0.95s; }

@keyframes staggerFadeUp {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ============================================
   HERO SECTION ANIMATIONS
   ============================================ */

/* Hero text entrance */
.hero__text {
  animation: heroTextReveal 1.5s var(--ease-out-expo) 0.3s both;
}

@keyframes heroTextReveal {
  from {
    opacity: 0;
    transform: translateY(40px);
    letter-spacing: 12px;
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    letter-spacing: 4px;
    filter: blur(0);
  }
}

/* Hero dots pulse */
.hero__dot {
  transition: all 0.4s var(--ease-out-back);
}

.hero__dot.is-active {
  animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
}

/* Hero slide zoom effect */
.hero__slide.is-active .hero__slide-img {
  animation: slowZoom 5s ease-out forwards;
}

@keyframes slowZoom {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

/* ============================================
   SECTION HEADING ANIMATIONS
   ============================================ */

/* EN subtitle slide-in */
.u-fade-in.is-visible .section-heading__en,
.u-fade-in.is-visible .sub-intro__en,
.u-fade-in.is-visible .service__heading-en,
.u-fade-in.is-visible .recruit__heading-en,
.u-fade-in.is-visible .office__heading-en {
  animation: slideInFromLeft 0.8s var(--ease-out-expo) 0.2s both;
}

@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* JP heading reveal */
.u-fade-in.is-visible .section-heading__jp,
.u-fade-in.is-visible .sub-intro__title,
.u-fade-in.is-visible .service__heading-jp,
.u-fade-in.is-visible .recruit__heading-jp,
.u-fade-in.is-visible .office__heading-jp {
  animation: headingReveal 0.9s var(--ease-out-expo) 0.35s both;
}

@keyframes headingReveal {
  from {
    opacity: 0;
    transform: translateY(20px);
    clip-path: inset(100% 0 0 0);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
  }
}

/* ============================================
   CARD HOVER EFFECTS (Enhanced)
   ============================================ */

/* Policy cards */
.policy__card {
  transition: all 0.4s var(--ease-out-back);
}

.policy__card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 16px 40px rgba(46, 107, 56, 0.15);
}

.policy__card-number {
  transition: all 0.4s var(--ease-out-back);
}

.policy__card:hover .policy__card-number {
  transform: scale(1.15);
  color: var(--color-primary);
}

/* Voice cards */
.voice__card {
  transition: all 0.4s var(--ease-out-back);
}

.voice__card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

.voice__card-img {
  transition: all 0.5s var(--ease-out-expo);
}

.voice__card:hover .voice__card-img {
  transform: scale(1.05);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(139, 195, 74, 0.2);
}

/* Business example cards */
.biz-examples__card {
  transition: all 0.4s var(--ease-out-back);
}

.biz-examples__card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
}

.biz-examples__card:hover .biz-examples__card-header svg {
  animation: iconBounce 0.5s var(--ease-out-back);
}

@keyframes iconBounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* Office cards */
.office-card {
  transition: all 0.4s var(--ease-out-back);
}

.office-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

/* Center summary cards */
.center-summary__card {
  transition: all 0.4s var(--ease-out-back);
}

.center-summary__card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

/* Info cards */
.info-cards__card {
  transition: all 0.4s var(--ease-out-back);
}

.info-cards__card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

.info-cards__card:hover .info-cards__icon img {
  transform: scale(1.1);
  transition: transform 0.5s var(--ease-out-expo);
}

/* Staff cards */
.staff-card {
  transition: all 0.4s var(--ease-out-back);
}

.staff-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.staff-card__img img {
  transition: all 0.5s var(--ease-out-expo);
}

.staff-card:hover .staff-card__img img {
  transform: scale(1.05);
}

/* ============================================
   BUTTON ANIMATIONS
   ============================================ */
.btn {
  position: relative;
  overflow: hidden;
  transition: all 0.4s var(--ease-out-back);
}

.btn--primary::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s var(--ease-out-expo), height 0.6s var(--ease-out-expo);
}

.btn--primary:hover::before {
  width: 300px;
  height: 300px;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(46, 107, 56, 0.3);
}

.btn:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(46, 107, 56, 0.2);
}

.btn__arrow {
  transition: transform 0.3s var(--ease-out-back);
}

.btn:hover .btn__arrow {
  transform: translateX(6px);
}

/* ============================================
   IMAGE ANIMATIONS
   ============================================ */

/* Service images parallax-like effect */
.service__img-main,
.service__img-sub {
  transition: all 0.6s var(--ease-out-expo);
}

.service:hover .service__img-main {
  transform: translateY(-4px);
}

.service:hover .service__img-sub {
  transform: translate(4px, -4px);
}

/* Recruit images */
.recruit__img {
  transition: all 0.5s var(--ease-out-expo);
}

.recruit:hover .recruit__img:first-child {
  transform: translateY(-4px) rotate(-1deg);
}

.recruit:hover .recruit__img:last-child {
  transform: translateY(-4px) rotate(1deg);
}

/* Logistics item images */
.logistics-item__img img {
  transition: all 0.6s var(--ease-out-expo);
}

.logistics-item:hover .logistics-item__img img {
  transform: scale(1.03);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
}

/* Center detail hero */
.center-detail__hero img {
  transition: all 0.6s var(--ease-out-expo);
}

.center-detail__hero:hover img {
  transform: scale(1.02);
}

/* Center detail gallery */
.center-detail__gallery img {
  transition: all 0.4s var(--ease-out-expo);
}

.center-detail__gallery img:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

/* ============================================
   ILLUSTRATION ANIMATIONS
   ============================================ */
.sub-intro__illustration img,
.policy__illustration img,
.office__illustration img {
  transition: all 0.6s var(--ease-out-expo);
  animation: floatIllustration 6s ease-in-out infinite;
}

@keyframes floatIllustration {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ============================================
   PAGE HEADER ANIMATION
   ============================================ */
.page-header {
  overflow: hidden;
}

.page-header__title {
  animation: pageHeaderSlide 0.8s var(--ease-out-expo) 0.1s both;
}

@keyframes pageHeaderSlide {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ============================================
   HEADER ANIMATIONS
   ============================================ */
.header {
  transition: all 0.4s var(--ease-out-expo);
}

.header__nav-item a {
  position: relative;
  transition: all 0.3s var(--ease-out-expo);
}

.header__nav-item a::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--color-primary);
  transition: all 0.3s var(--ease-out-expo);
  transform: translateX(-50%);
  border-radius: 1px;
}

.header__nav-item a:hover::after,
.header__nav-item a.is-active::after {
  width: 60%;
}

/* Logo hover */
.header__logo {
  transition: all 0.3s var(--ease-out-expo);
}

.header__logo:hover {
  transform: scale(1.03);
}

.header__logo-icon svg {
  transition: all 0.4s var(--ease-out-back);
}

.header__logo:hover .header__logo-icon svg {
  transform: rotate(10deg) scale(1.1);
}

/* ============================================
   VOICE SLIDER ARROWS
   ============================================ */
.voice__arrow {
  transition: all 0.3s var(--ease-out-back);
}

.voice__arrow:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 16px rgba(46, 107, 56, 0.25);
}

.voice__arrow:active {
  transform: scale(0.95);
}

/* ============================================
   TRAINING FLOW ANIMATION
   ============================================ */
.u-fade-in.is-visible .training-flow__phase {
  animation: slideInFromLeft 0.8s var(--ease-out-expo) both;
}

.u-fade-in.is-visible .training-flow__phase:nth-child(2) {
  animation-delay: 0.2s;
}

.u-fade-in.is-visible .training-flow__phase:nth-child(3) {
  animation-delay: 0.4s;
}

.u-fade-in.is-visible .training-flow__phase:nth-child(4) {
  animation-delay: 0.6s;
}

.training-flow__step {
  transition: all 0.3s var(--ease-out-back);
}

.training-flow__step:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  background: var(--color-accent-light);
}

.training-flow__arrow {
  animation: arrowPulse 1.5s ease-in-out infinite;
}

@keyframes arrowPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* ============================================
   PHILOSOPHY ITEMS
   ============================================ */
.philosophy__item {
  transition: all 0.4s var(--ease-out-back);
}

.philosophy__item:hover {
  transform: translateX(8px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.philosophy__item-img img {
  transition: all 0.5s var(--ease-out-expo);
}

.philosophy__item:hover .philosophy__item-img img {
  transform: scale(1.08) rotate(3deg);
}

.philosophy__item-num {
  transition: all 0.4s var(--ease-out-back);
}

.philosophy__item:hover .philosophy__item-num {
  transform: scale(1.15);
}

/* ============================================
   COMPANY TABLE ROW ANIMATION
   ============================================ */
.company-table tr {
  transition: all 0.3s var(--ease-out-expo);
}

.company-table tr:hover {
  background: var(--color-accent-light);
}

.company-table tr:hover th {
  color: var(--color-primary);
}

/* ============================================
   GREETING SIGNATURE
   ============================================ */
.greeting__signature {
  position: relative;
}

.greeting__signature::after {
  content: '';
  position: absolute;
  bottom: -4px;
  right: 0;
  width: 0;
  height: 2px;
  background: var(--color-accent);
  transition: width 1s var(--ease-out-expo);
}

.u-fade-in.is-visible .greeting__signature::after {
  width: 200px;
}

/* ============================================
   SAFETY BANNER OVERLAY
   ============================================ */
.safety-training__banner img {
  transition: all 0.6s var(--ease-out-expo);
}

.safety-training__banner:hover img {
  transform: scale(1.05);
}

.safety-training__banner-overlay {
  transition: all 0.4s var(--ease-out-expo);
}

.safety-training__banner:hover .safety-training__banner-overlay {
  padding-bottom: 32px;
}

/* ============================================
   OFFICE SECTION (GREEN BG) ANIMATION
   ============================================ */
.office__column-title {
  transition: all 0.3s var(--ease-out-back);
}

.office__column-title:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(46, 107, 56, 0.3);
}

.office__list li {
  transition: all 0.3s var(--ease-out-expo);
}

.office__list li:hover {
  padding-left: 24px;
  color: var(--color-primary);
}

/* ============================================
   FOOTER LINK ANIMATIONS
   ============================================ */
.footer__nav a {
  position: relative;
  transition: all 0.3s var(--ease-out-expo);
}

.footer__nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-primary);
  transition: width 0.3s var(--ease-out-expo);
}

.footer__nav a:hover::after {
  width: 100%;
}

/* ============================================
   SCROLL INDICATOR (for hero)
   ============================================ */
.hero::after {
  content: '';
  position: absolute;
  bottom: 48px;
  left: 50%;
  width: 2px;
  height: 40px;
  background: rgba(255, 255, 255, 0.4);
  transform: translateX(-50%);
  animation: scrollIndicator 2s ease-in-out infinite;
  border-radius: 1px;
  z-index: 10;
}

@keyframes scrollIndicator {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
}

/* ============================================
   PROMISES SECTION GLOW
   ============================================ */
.promises__card {
  transition: all 0.4s var(--ease-out-back);
}

.promises__card:hover {
  /*background: rgba(255, 255, 255, 0.25);*/
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* ============================================
   VISION PILLAR HOVER
   ============================================ */
.vision-section__pillar {
  transition: all 0.4s var(--ease-out-back);
}

.vision-section__pillar:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  background: var(--color-white);
}

.vision-section__pillar:hover h3 {
  color: var(--color-primary);
}

/* ============================================
   MONTHLY EDUCATION CARDS
   ============================================ */
.monthly-edu__card {
  transition: all 0.4s var(--ease-out-back);
}

.monthly-edu__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

/* ============================================
   SAFETY MANUAL ITEMS
   ============================================ */
.safety-manual__item {
  transition: all 0.3s var(--ease-out-back);
}

.safety-manual__item:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  background: var(--color-white);
  border-left-color: var(--color-primary);
}

/* ============================================
   STAFF VOICES LEAD
   ============================================ */
.staff-voices__lead {
  position: relative;
  overflow: hidden;
}

.staff-voices__lead::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(139, 195, 74, 0.1) 0%, transparent 70%);
  animation: glowRotate 10s linear infinite;
}

@keyframes glowRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ============================================
   CENTER DETAIL POINTS NUMBER
   ============================================ */
.center-detail__point {
  transition: all 0.4s var(--ease-out-back);
}

.center-detail__point:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.center-detail__point:hover .center-detail__point-num {
  transform: scale(1.15);
  transition: transform 0.3s var(--ease-out-back);
}

/* ============================================
   REDUCED MOTION - Accessibility
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .u-fade-in {
    opacity: 1;
    transform: none;
  }
}