/* ============================================================
   加藤税理士・社労士事務所 — Animations & Loader CSS
   ============================================================
   production-theme.css の末尾に追記してください。
   site-animations.js とセットで使用。
   ============================================================ */

/* ---------- LOADER ---------- */
body.is-loading{overflow:hidden}
.loader{
  position:fixed;inset:0;z-index:9999;
  background:var(--ink-deep);
  display:grid;place-items:center;
  transition:opacity .55s cubic-bezier(.4,0,.2,1), visibility .55s;
}
.loader.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.loader__brand{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:24px;
  color:#fff;
}
.loader__ring{
  position:relative;width:96px;height:96px;
  display:grid;place-items:center;
}
.loader__ring::before,
.loader__ring::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1.5px solid var(--gold);
}
.loader__ring::before{
  animation:loader-ring-grow 1.4s cubic-bezier(.2,.7,.2,1) forwards;
  opacity:0;
}
.loader__ring::after{
  border-color:rgba(200,167,101,.25);
  animation:loader-ring-pulse 1.6s ease-in-out infinite;
}
.loader__kmark{
  position:relative;z-index:1;width:42px;height:42px;color:#fff;
  opacity:0;transform:scale(.6);
  animation:loader-kmark-in .7s .35s cubic-bezier(.2,.7,.2,1) forwards;
}
.loader__kmark svg{width:100%;height:100%;display:block}
.loader__label{
  font-family:"Plus Jakarta Sans",sans-serif;
  font-size:11px;letter-spacing:.4em;font-weight:600;
  color:var(--gold);opacity:0;
  animation:loader-label-in .6s .8s ease-out forwards;
}
.loader__bar{
  width:120px;height:1px;background:rgba(255,255,255,.12);
  position:relative;overflow:hidden;opacity:0;
  animation:loader-label-in .6s 1s ease-out forwards;
}
.loader__bar::before{
  content:"";position:absolute;inset:0;background:var(--gold);
  transform-origin:left;transform:scaleX(0);
  animation:loader-bar 1.1s .9s cubic-bezier(.4,0,.2,1) forwards;
}

@keyframes loader-ring-grow{
  0%{transform:scale(.4);opacity:0}
  60%{opacity:1}
  100%{transform:scale(1);opacity:1}
}
@keyframes loader-ring-pulse{
  0%,100%{transform:scale(1.0);opacity:.4}
  50%{transform:scale(1.15);opacity:.05}
}
@keyframes loader-kmark-in{
  to{opacity:1;transform:scale(1)}
}
@keyframes loader-label-in{
  to{opacity:1}
}
@keyframes loader-bar{
  to{transform:scaleX(1)}
}

/* ---------- SCROLL REVEAL ---------- */
[data-reveal]{
  opacity:0;
  transform:translate3d(0, 28px, 0);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
  will-change:opacity, transform;
}
[data-reveal].is-visible{
  opacity:1;
  transform:translate3d(0, 0, 0);
}
[data-reveal="left"]{transform:translate3d(-32px, 0, 0)}
[data-reveal="right"]{transform:translate3d(32px, 0, 0)}
[data-reveal="scale"]{transform:scale(.94);transform-origin:center}
[data-reveal="scale"].is-visible{transform:scale(1)}
[data-reveal="fade"]{transform:none}

/* ---------- MICRO INTERACTIONS ---------- */

/* Buttons subtle scale on press */
.c-btn{transition:transform .15s, box-shadow .2s, background .2s, color .2s}
.c-btn:hover{transform:translateY(-1px)}
.c-btn:active{transform:translateY(0)}
.c-btn--primary:hover{box-shadow:0 8px 24px -10px rgba(14,26,51,.5)}
.c-btn--accent:hover{box-shadow:0 8px 24px -10px rgba(36,85,199,.6)}

/* Card hover lift with gold corner pulse */
.c-card{position:relative;overflow:hidden}
.c-card::after{
  content:"";position:absolute;top:0;right:0;width:0;height:0;
  border-top:24px solid transparent;border-right:24px solid transparent;
  transition:border-color .3s;
  pointer-events:none;
}
.c-card:hover::after{border-top-color:var(--gold-soft);border-right-color:var(--gold-soft)}

/* Nav link underline draw */
.site-nav__list a{position:relative;padding:6px 0}
.site-nav__list a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;
  background:var(--accent);transform-origin:right;transform:scaleX(0);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.site-nav__list a:hover::after,
.site-nav__list a.is-current::after{transform-origin:left;transform:scaleX(1)}

/* Header scroll states */
.site-header{transition:transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s, padding .25s}
.site-header.is-scrolled{box-shadow:0 1px 12px -4px rgba(14,26,51,.12);padding:12px 0}
.site-header.is-hidden{transform:translateY(-100%)}

/* Gold-line draw on enter */
.gold-line::before,
.gold-line::after{transform-origin:left;transform:scaleX(0);transition:transform .9s .15s cubic-bezier(.4,0,.2,1)}
[data-reveal].is-visible .gold-line::before,
[data-reveal].is-visible .gold-line::after,
.gold-line.is-drawn::before,
.gold-line.is-drawn::after{transform:scaleX(1)}

/* Gold diamond pulse */
.gold-diamond{transition:transform .3s, box-shadow .3s}
[data-reveal].is-visible .gold-diamond{animation:diamond-pulse 2.4s ease-in-out infinite}
@keyframes diamond-pulse{
  0%,100%{transform:rotate(45deg) scale(1);box-shadow:0 0 0 0 rgba(200,167,101,.0)}
  50%{transform:rotate(45deg) scale(1.15);box-shadow:0 0 0 6px rgba(200,167,101,.0)}
}

/* Number counter ready state */
[data-count]{display:inline-block;min-width:1ch}

/* Service row number — animate on reveal */
.service-row__num{transition:opacity 1s, transform 1s cubic-bezier(.2,.7,.2,1);opacity:0;transform:translateY(20px) scale(.85)}
[data-reveal].is-visible .service-row__num{opacity:.9;transform:translateY(0) scale(1)}

/* Portrait subtle hover */
.hero-cinematic__portrait img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.hero-cinematic__portrait:hover img{transform:scale(1.03)}

/* News card image zoom */
.news-card__thumb{overflow:hidden}
.news-card__thumb img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.news-card:hover .news-card__thumb img{transform:scale(1.05)}

/* Pricing card focus */
.pricing-card{transition:transform .25s, box-shadow .25s}
.pricing-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.pricing-card--featured{position:relative}
.pricing-card--featured::before{
  content:"";position:absolute;inset:-2px;border-radius:22px;
  background:linear-gradient(135deg, var(--gold) 0%, transparent 40%, transparent 60%, var(--gold) 100%);
  z-index:-1;opacity:0;transition:opacity .3s;
}
.pricing-card--featured:hover::before{opacity:.4}

/* Tech tile shimmer */
.tech-tile{position:relative;overflow:hidden}
.tech-tile::before{
  content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg, transparent, rgba(200,167,101,.18), transparent);
  transition:left .6s ease-out;
}
.tech-tile:hover::before{left:100%}

/* CTA band gold border subtle breathing */
.cta-band__corner{transition:width .6s, height .6s}
[data-reveal].is-visible .cta-band__corner--tl{animation:corner-breathe 4s ease-in-out infinite}
[data-reveal].is-visible .cta-band__corner--br{animation:corner-breathe 4s ease-in-out 2s infinite}
@keyframes corner-breathe{
  0%,100%{opacity:1}
  50%{opacity:.55}
}

/* Mobile nav slide-in.
   Anchored to BELOW the header (top: var(--header-h)) so it physically
   cannot overlap the header. JS publishes --header-h from offsetHeight;
   fallback 80px covers the worst case before JS runs.
   padding-top: 40px gives a consistent breathing room below the header
   regardless of header state (compact vs full). */
.site-nav__mobile{
  position:fixed;
  top:var(--header-h, 80px);
  right:0;bottom:0;left:0;
  background:var(--ink-deep);color:#fff;
  z-index:100;transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);
  padding:40px 32px 32px;overflow-y:auto;
}
.site-nav__mobile.is-open{transform:translateX(0)}

/* Reduce-motion fallback */
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1 !important;transform:none !important}
  .loader{transition:none}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}