/* ============================================================
   animations.css — All Motion & Animation Definitions
   サブスクWEBスタジオ v2.0 ULTIMATE
   
   Motion Direction:
   - Reload: Hero fade-up + accent line run + button delay
   - Scroll: All sections fade-in (reveal system)
   - Cards: Hover float up
   - CTA: Sticky follow
   ============================================================ */

/* ============================================================
   SCROLL REVEAL SYSTEM
   - .rv = reveal element (starts invisible)
   - .rv.vis = becomes visible when in viewport
   - .rd1-.rd6 = staggered delays
   ============================================================ */
.rv{
  opacity:0;
  transform:translateY(48px);
  transition:
    opacity .85s cubic-bezier(.25,.46,.45,.94),
    transform .95s cubic-bezier(.16,1,.3,1);
}
.rv.vis{
  opacity:1;
  transform:translateY(0);
}
.rd1{transition-delay:.1s}
.rd2{transition-delay:.2s}
.rd3{transition-delay:.3s}
.rd4{transition-delay:.4s}
.rd5{transition-delay:.5s}
.rd6{transition-delay:.6s}

/* ============================================================
   HERO ENTRANCE SEQUENCE
   Staggered reveal from top to bottom
   Badge → Title lines → Lead → Lead2 → Metrics → Actions → Trust
   ============================================================ */
.hero-badge{
  opacity:0;
  animation:fadeUp .7s cubic-bezier(.16,1,.3,1) .8s forwards;
}
.hero-h1 .line span{
  opacity:0;
  transform:translateY(110%);
  animation:textReveal .9s cubic-bezier(.16,1,.3,1) forwards;
}
.hero-h1 .line:nth-child(1) span{animation-delay:1s}
.hero-h1 .line:nth-child(2) span{animation-delay:1.14s}
.hero-lead{
  opacity:0;
  animation:fadeUp .7s cubic-bezier(.16,1,.3,1) 1.35s forwards;
}
.hero-lead2{
  opacity:0;
  animation:fadeUp .7s cubic-bezier(.16,1,.3,1) 1.5s forwards;
}
.hero-metrics{
  opacity:0;
  animation:fadeUp .7s cubic-bezier(.16,1,.3,1) 1.65s forwards;
}
.hero-actions{
  opacity:0;
  animation:fadeUp .7s cubic-bezier(.16,1,.3,1) 1.8s forwards;
}
.hero-trust{
  opacity:0;
  animation:fadeUp .7s cubic-bezier(.16,1,.3,1) 2s forwards;
}

/* Hero visual — dramatic entrance with 3D tilt */
.hero-visual{
  opacity:0;
  animation:heroVisualIn 1.3s cubic-bezier(.16,1,.3,1) 1.2s forwards;
}

@keyframes heroVisualIn{
  0%{
    opacity:0;
    transform:translateY(60px) scale(.92) rotateX(12deg) rotateY(-4deg);
    filter:blur(4px);
  }
  60%{
    filter:blur(0);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1) rotateX(0) rotateY(0);
    filter:blur(0);
  }
}

/* ============================================================
   CORE KEYFRAMES
   ============================================================ */

/* Fade up — generic entrance */
@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(30px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* Text reveal — clip from below */
@keyframes textReveal{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* ============================================================
   ORB FLOATING — Hero ambient background
   Each orb has unique path and timing
   ============================================================ */
.orb-1{
  animation:orbFloat1 14s ease-in-out infinite;
}
.orb-2{
  animation:orbFloat2 18s ease-in-out infinite;
}
.orb-3{
  animation:orbFloat3 22s ease-in-out infinite;
}
@keyframes orbFloat1{
  0%,100%{transform:translate(0,0) scale(1)}
  25%{transform:translate(-20px,15px) scale(1.02)}
  50%{transform:translate(-40px,30px) scale(1.05)}
  75%{transform:translate(-15px,20px) scale(1.02)}
}
@keyframes orbFloat2{
  0%,100%{transform:translate(0,0) scale(1)}
  25%{transform:translate(15px,-20px) scale(.97)}
  50%{transform:translate(30px,-40px) scale(.95)}
  75%{transform:translate(20px,-15px) scale(.98)}
}
@keyframes orbFloat3{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  33%{transform:translate(-18px,-12px) rotate(2deg)}
  66%{transform:translate(12px,-20px) rotate(-2deg)}
}

/* ============================================================
   GLASS CARD FLOATING
   Each card has unique float pattern
   ============================================================ */
.gc-1{animation:gcFloat1 6s ease-in-out infinite}
.gc-2{animation:gcFloat2 7s ease-in-out infinite}
.gc-3{animation:gcFloat3 8s ease-in-out infinite}
.gc-4{animation:gcFloat4 9s ease-in-out infinite}

@keyframes gcFloat1{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-14px) rotate(.5deg)}
}
@keyframes gcFloat2{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(12px) rotate(-.5deg)}
}
@keyframes gcFloat3{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  50%{transform:translate(-8px,-12px) rotate(.8deg)}
}
@keyframes gcFloat4{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  50%{transform:translate(8px,10px) rotate(-.5deg)}
}

/* ============================================================
   HERO BACKGROUND EFFECTS
   ============================================================ */

/* Grid slow pan */
.hero-grid-bg{
  animation:gridPan 40s linear infinite;
}
@keyframes gridPan{
  from{transform:translate(0,0)}
  to{transform:translate(72px,72px)}
}

/* Decorative line fade */
.hl:nth-child(1){animation:lineFade 8s ease-in-out infinite}
.hl:nth-child(2){animation:lineFade 8s ease-in-out 2.5s infinite}
.hl:nth-child(3){animation:lineFade 8s ease-in-out 5s infinite}
@keyframes lineFade{
  0%,100%{opacity:0;transform:scaleX(.8)}
  50%{opacity:1;transform:scaleX(1)}
}

/* ============================================================
   BADGE PULSE DOT
   ============================================================ */
.hero-badge .dot{
  animation:pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot{
  0%,100%{opacity:1;transform:scale(1);box-shadow:0 0 8px rgba(255,214,0,.5)}
  50%{opacity:.4;transform:scale(.7);box-shadow:0 0 2px rgba(255,214,0,.2)}
}

/* ============================================================
   MOCK CARD FLOAT (inside browser)
   ============================================================ */
.mock-card{animation:mockCardFloat 5s ease-in-out infinite}
.mock-card:nth-child(2){animation-delay:.6s}
.mock-card:nth-child(3){animation-delay:1.2s}
@keyframes mockCardFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}

/* Mock hero block subtle pulse */
.mock-hero-block{
  animation:mockPulse 4s ease-in-out infinite;
}
@keyframes mockPulse{
  0%,100%{opacity:.85;border-color:rgba(255,214,0,.06)}
  50%{opacity:1;border-color:rgba(255,214,0,.12)}
}

/* ============================================================
   MARQUEE SCROLL
   ============================================================ */
.marquee-track{
  animation:marqueeScroll 30s linear infinite;
}
@keyframes marqueeScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ============================================================
   SHOWCASE CAROUSEL
   ============================================================ */
.showcase-scroll{
  animation:showcaseSlide 45s linear infinite;
}
@keyframes showcaseSlide{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* Pause on hover */
.showcase-scroll:hover{
  animation-play-state:paused;
}
.marquee-track:hover{
  animation-play-state:paused;
}

/* ============================================================
   COMPARE ARROW GLOW
   ============================================================ */
.compare-arrow-wrap{
  animation:arrowGlow 3s ease-in-out infinite;
}
@keyframes arrowGlow{
  0%,100%{
    box-shadow:0 0 0 0 rgba(255,214,0,.08);
    transform:rotate(0deg) scale(1);
  }
  50%{
    box-shadow:0 0 24px 10px rgba(255,214,0,.12);
    transform:rotate(0deg) scale(1.06);
  }
}
/* Fix rotation on mobile (applied via media query in sections.css) */

/* ============================================================
   AI × PRO — X CIRCLE PULSE
   ============================================================ */
/* (aiflow removed — replaced by pro-quality section) */

/* ============================================================
   BUTTON SHIMMER
   ============================================================ */
@keyframes shimmer{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}

/* ============================================================
   LOADER ANIMATIONS
   ============================================================ */
@keyframes ldrIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes ldrFill{
  0%{width:0}
  100%{width:100%}
}

/* ============================================================
   SCROLL-TRIGGERED SPECIAL EFFECTS
   Applied via JS to specific elements
   ============================================================ */

/* Counter number scale-in */
.counter-animate{
  animation:counterPop .6s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes counterPop{
  0%{transform:scale(.8);opacity:.5}
  100%{transform:scale(1);opacity:1}
}

/* Section divider line grow */
.price-divider{
  transform:scaleX(0);
  transition:transform .8s cubic-bezier(.16,1,.3,1) .3s;
}
.price-divider.vis{
  transform:scaleX(1);
}

/* Flow timeline line grow */
.flow-steps::before{
  transform:scaleY(0);
  transform-origin:top;
  transition:transform 1.5s cubic-bezier(.16,1,.3,1) .2s;
}
.flow-steps.line-vis::before{
  transform:scaleY(1);
}

/* ============================================================
   PARALLAX HELPER (applied via JS)
   ============================================================ */
.parallax-slow{
  will-change:transform;
  transition:transform .1s linear;
}

/* ============================================================
   HOVER MICRO-INTERACTIONS (enhanced)
   ============================================================ */

/* Cards — universal lift */
.pain-card,
.str-card,
/* PQ card items */
.pq-card,
.testi-card,
.sc-card,
.num-card{
  will-change:transform,box-shadow;
}

/* ============================================================
   NUMBERS — animated icons (continuous, distinct per panel)
   ============================================================ */
.num-card .ni-ico{will-change:transform}
.ni-float .ni-ico{animation:niFloat 3.2s ease-in-out infinite}
.ni-pulse .ni-ico{animation:niPulse 2.6s ease-in-out infinite}
.ni-swing .ni-ico{animation:niSwing 3.4s ease-in-out infinite}
.ni-bob   .ni-ico{animation:niBob 2.8s ease-in-out infinite}
@keyframes niFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes niPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
@keyframes niSwing{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
@keyframes niBob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(-7deg)}}
@keyframes niGlow{0%,100%{opacity:.45;transform:scale(.9)}50%{opacity:.95;transform:scale(1.1)}}

/* Button press feedback */
.btn:active,
.header-cta-btn:active,
.sticky-btn:active,
.price-cta:active{
  transform:translateY(-1px) scale(.97)!important;
  transition-duration:.1s;
}

/* Link underline reveal */
.header-nav a:not(.header-cta-btn){
  position:relative;
}
.header-nav a:not(.header-cta-btn)::after{
  content:'';
  position:absolute;bottom:-2px;left:0;right:0;height:1.5px;
  background:var(--accent);
  transform:scaleX(0);transform-origin:right;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.header-nav a:not(.header-cta-btn):hover::after{
  transform:scaleX(1);transform-origin:left;
}
header.scrolled .header-nav a:not(.header-cta-btn)::after{
  background:var(--black);
}

/* Footer link hover */
.footer-links a{
  position:relative;
}
.footer-links a::after{
  content:'';
  position:absolute;bottom:-1px;left:0;right:0;height:1px;
  background:var(--accent);
  transform:scaleX(0);transform-origin:right;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.footer-links a:hover::after{
  transform:scaleX(1);transform-origin:left;
}

/* FAQ question hover — subtle bg */
.faq-q{
  border-radius:var(--r-sm);
  margin:0 -8px;padding-left:8px;padding-right:8px;
  transition:color .3s,background .3s;
}
.faq-q:hover{
  background:rgba(15,23,42,.02);
}

/* ============================================================
   SMOOTH SCROLL INDICATOR (hero bottom)
   Added via JS if needed
   ============================================================ */
.scroll-indicator{
  position:absolute;bottom:32px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  opacity:0;animation:fadeUp .7s cubic-bezier(.16,1,.3,1) 2.3s forwards;
}
.scroll-indicator span{
  font-family:'DM Sans',sans-serif;font-size:.65rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--black-30);
}
.scroll-line{
  width:1px;height:40px;position:relative;overflow:hidden;
}
.scroll-line::after{
  content:'';position:absolute;top:-100%;left:0;
  width:100%;height:100%;
  background:linear-gradient(to bottom,transparent,var(--accent));
  animation:scrollLineMove 2s ease-in-out infinite;
}
@keyframes scrollLineMove{
  0%{top:-100%}
  50%{top:0}
  100%{top:100%}
}

/* ============================================================
   REDUCED MOTION — Accessibility
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .rv{opacity:1;transform:none}
  .hero-badge,.hero-h1 .line span,.hero-lead,.hero-lead2,
  .hero-metrics,.hero-actions,.hero-trust,.hero-visual{
    opacity:1;transform:none;animation:none;
  }
  .marquee-track,.showcase-scroll{animation:none}
  .flow-steps::before{transform:scaleY(1)}
  .price-divider{transform:scaleX(1)}
}

/* ============================================================
   TECH TERMINAL — Typing animation for lines
   ============================================================ */
.tech-terminal .term-line{
  opacity:0;
  animation:termLineIn .4s ease forwards;
}
.tech-terminal .term-line:nth-child(1){animation-delay:1.6s}
.tech-terminal .term-line:nth-child(2){animation-delay:2s}
.tech-terminal .term-line:nth-child(3){animation-delay:2.4s}
.tech-terminal .term-line:nth-child(4){animation-delay:2.8s}
.tech-terminal .term-line:nth-child(5){animation-delay:3.2s}
.tech-terminal .term-line:nth-child(6){animation-delay:3.6s}
.tech-terminal .term-line:nth-child(7){animation-delay:4s}
@keyframes termLineIn{
  from{opacity:0;transform:translateX(-8px)}
  to{opacity:1;transform:translateX(0)}
}

/* Credential number row entrance */
.cred-numbers .cred-num-item .cred-val{
  opacity:0;
  animation:credPop .6s var(--bounce) forwards;
}
.cred-numbers .cred-num-item:nth-child(1) .cred-val{animation-delay:.1s}
.cred-numbers .cred-num-item:nth-child(3) .cred-val{animation-delay:.2s}
.cred-numbers .cred-num-item:nth-child(5) .cred-val{animation-delay:.3s}
.cred-numbers .cred-num-item:nth-child(7) .cred-val{animation-delay:.4s}
@keyframes credPop{
  from{opacity:0;transform:scale(.8) translateY(8px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}