/* =========================================================
   ENHANCE LAYER — richer, on-brand motion for 無限秘書 LP
   Loaded after style.css. Only adds; never rewrites base design.
   ========================================================= */

/* ---- Scroll progress bar (top gold line) ---- */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:100;
  background:linear-gradient(90deg,var(--gold-dark),var(--gold-light));
  box-shadow:0 0 14px rgba(216,185,130,.6);
  transition:width .12s linear;
  pointer-events:none;
}

/* ---- Directional / dramatic scroll reveals (JS toggles .fx-in) ---- */
.fx{opacity:0;transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1),filter .9s ease;will-change:opacity,transform}
.fx-up{transform:translateY(44px)}
.fx-left{transform:translateX(-52px)}
.fx-right{transform:translateX(52px)}
.fx-scale{transform:scale(.9)}
.fx-blur{filter:blur(12px)}
.fx.fx-in{opacity:1;transform:none;filter:none}
/* Safety fallback: if observer never fires, force-show after 2.6s */
@keyframes fxFallback{to{opacity:1;transform:none;filter:none}}
.fx{animation:fxFallback .6s ease-out 2.6s forwards}
.fx.fx-in{animation:none}

/* Stagger children (delay set inline by JS via --d) */
.stagger > *{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.stagger.fx-in > *{opacity:1;transform:none}
.stagger > *{animation:fxFallback .6s ease-out 2.7s forwards}
.stagger.fx-in > *{animation:none}

/* Slightly richer base reveal (subtle scale) */
.reveal{transform:translateY(34px) scale(.99)}
.reveal.in{transform:translateY(0) scale(1)}

/* ---- Gold shimmer sweep on key words ---- */
.shimmer{
  background:linear-gradient(100deg,var(--gold-light) 25%,#fff8ea 45%,var(--gold-light) 65%);
  background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* ---- Button shine sweep on hover ---- */
.btn,.form-submit,.cta-btn,.nav-cta{position:relative;overflow:hidden}
.btn::after,.form-submit::after,.cta-btn::after,.nav-cta::after{
  content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
  transform:skewX(-20deg);pointer-events:none;
}

/* ---- Card hover: gold glow + smoother lift ---- */
.feature,.task-cat,.voice,.problem-card,.cta-card{
  transition:transform .38s cubic-bezier(.2,.8,.2,1),box-shadow .38s ease,border-color .38s ease,background .38s ease;
}
.feature:hover,.task-cat:hover,.voice:hover{box-shadow:0 26px 54px -26px rgba(184,148,90,.5)}
.problem-card:hover,.cta-card:hover{box-shadow:0 26px 54px -26px rgba(184,148,90,.38)}
.task-tag{transition:transform .2s,background .2s,color .2s,border-color .2s}
.task-tag:hover{transform:translateY(-2px) scale(1.04)}

/* Case card image zoom on hover */
.case-img img,.service-hero-img img,.company-portrait img{transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.case-card:hover .case-img img,.service-hero:hover .service-hero-img img,.company-portrait:hover img{transform:scale(1.06)}

/* ---- prefers-reduced-motion: no-preference only (ambient looping motion) ---- */
@media (prefers-reduced-motion: no-preference){

  /* Hero ambient aurora drift */
  .hero-aurora{
    position:absolute;inset:-25%;z-index:1;pointer-events:none;opacity:.55;
    background:
      radial-gradient(38% 38% at 22% 32%, rgba(184,148,90,.28), transparent 60%),
      radial-gradient(34% 34% at 80% 22%, rgba(216,185,130,.20), transparent 62%),
      radial-gradient(44% 44% at 68% 82%, rgba(138,109,63,.24), transparent 60%);
    filter:blur(26px);
    animation:auroraDrift 20s ease-in-out infinite alternate;
  }
  @keyframes auroraDrift{
    0%{transform:translate3d(0,0,0) scale(1)}
    50%{transform:translate3d(3%,-2.5%,0) scale(1.1)}
    100%{transform:translate3d(-3%,2.5%,0) scale(1.05)}
  }

  /* Shimmer keeps moving */
  .shimmer{animation:shimmerMove 5s linear infinite}
  @keyframes shimmerMove{to{background-position:220% center}}

  /* Button shine plays on hover */
  .btn:hover::after,.form-submit:hover::after,.cta-btn:hover::after,.nav-cta:hover::after{
    animation:shine .85s ease;
  }
  @keyframes shine{from{left:-130%}to{left:150%}}

  /* Floating LINE CTA pulse ring */
  .float-cta.show::before{
    content:"";position:absolute;inset:0;border-radius:999px;
    box-shadow:0 0 0 0 rgba(6,199,85,.5);
    animation:ctaRing 2.4s ease-out infinite;pointer-events:none;
  }
  @keyframes ctaRing{0%{box-shadow:0 0 0 0 rgba(6,199,85,.5)}70%,100%{box-shadow:0 0 0 18px rgba(6,199,85,0)}}

  /* Flow step nodes softly glow */
  .flow-day{animation:nodeGlow 3.5s ease-in-out infinite}
  .flow-step:nth-child(2) .flow-day{animation-delay:.5s}
  .flow-step:nth-child(3) .flow-day{animation-delay:1s}
  .flow-step:nth-child(4) .flow-day{animation-delay:1.5s}
  @keyframes nodeGlow{0%,100%{box-shadow:0 0 0 8px var(--ink),0 0 0 9px rgba(184,148,90,.15)}50%{box-shadow:0 0 0 8px var(--ink),0 0 22px 9px rgba(184,148,90,.35)}}

  /* Scroll hint gentle fade-pulse in addition to bob */
  .scroll-hint{animation:bob 2s ease-in-out infinite,hintFade 3s ease-in-out infinite}
  @keyframes hintFade{0%,100%{opacity:.35}50%{opacity:.75}}

  /* Section labels: animated leading line */
  .section-label::before{transition:width .8s cubic-bezier(.2,.8,.2,1)}
  .fx-in .section-label::before,.reveal.in .section-label::before{width:32px}
}

/* Respect reduced motion: freeze looping + heavy transitions */
@media (prefers-reduced-motion: reduce){
  .hero-aurora{display:none}
  .fx,.stagger > *{transition:opacity .01s !important;transform:none !important;filter:none !important}
}