/* ═══════════════════════════════════════════════════════════════
   fx.css  —  X SIGHT Rich Animation Layer
   ═══════════════════════════════════════════════════════════════ */

/* ── View Transitions (cross-document, Chrome/Edge) ──────────── */
@view-transition { navigation: auto; }

@keyframes vt-fade-out {
  to { opacity: 0; transform: scale(0.97) translateY(-10px); filter: blur(4px); }
}
@keyframes vt-fade-in {
  from { opacity: 0; transform: scale(1.02) translateY(12px); filter: blur(4px); }
}
::view-transition-old(root) {
  animation: vt-fade-out 0.32s cubic-bezier(0.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: vt-fade-in 0.44s cubic-bezier(0, 0, 0.2, 1) 0.08s both;
}

/* ── JS Page Transition Overlay (fallback) ───────────────────── */
#fx-page-overlay {
  position: fixed; inset: 0; z-index: 8000;
  background: #0A0A0A;
  opacity: 0; pointer-events: none;
  transition: opacity 0.38s cubic-bezier(0.4, 0, 1, 1);
  will-change: opacity;
}
#fx-page-overlay.fx-pg-in  { opacity: 1; pointer-events: all; }
#fx-page-overlay.fx-pg-out { opacity: 0; }

/* ── Kinetic Typography ───────────────────────────────────────── */
.fx-kt-c {
  display: inline-block;
  animation: fx-kt-rise 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--ki, 0) * 32ms + 60ms);
  animation-play-state: paused;
  will-change: transform, opacity, filter;
}
.fx-kt-c.fx-play { animation-play-state: running; }
@keyframes fx-kt-rise {
  from {
    opacity: 0;
    transform: translateY(0.65em) skewX(-15deg) scale(0.85);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0) skewX(0deg) scale(1);
    filter: blur(0);
  }
}

/* ── Scroll Progress Bar ──────────────────────────────────────── */
#fx-scroll-prog {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg,
    var(--green, #4E7A68) 0%,
    var(--green-2, #D0E8DC) 40%,
    var(--green, #4E7A68) 100%
  );
  background-size: 200% 100%;
  animation: prog-shimmer 2.4s linear infinite;
  z-index: 10000;
  pointer-events: none;
  transform-origin: left;
}
@keyframes prog-shimmer {
  from { background-position: 100% 0; }
  to   { background-position: -100% 0; }
}

/* ── Glow Trace (injected .fx-glow div) ───────────────────────── */
.fx-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;
  background: radial-gradient(
    circle 220px at var(--gx, -300px) var(--gy, -300px),
    rgba(78, 122, 104, 0.15) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.5s, background 0.05s;
}
.glow-card:hover .fx-glow,
.glow-card:focus-within .fx-glow { opacity: 1; }

/* ── Liquid Fill blob ─────────────────────────────────────────── */
.fx-lf-blob {
  position: absolute;
  border-radius: 50%;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 0;
  transform: translate(calc(var(--bx, 0px) - 0px), calc(var(--by, 0px) - 0px)) scale(0);
  transition:
    width 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    height 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.4s;
  opacity: 0;
}
.fx-lf:hover .fx-lf-blob {
  width: 520px; height: 520px;
  transform: translate(calc(var(--bx, 260px) - 260px), calc(var(--by, 260px) - 260px)) scale(1);
  opacity: 1;
}
/* Color variants */
.btn .fx-lf-blob       { background: rgba(255,255,255,.22); }
.hdr-cta .fx-lf-blob   { background: rgba(255,255,255,.18); }
.btn--ghost .fx-lf-blob { background: rgba(10,10,10,.08); }

/* Ensure text stays above blob */
.btn > *:not(.fx-lf-blob),
.hdr-cta > *:not(.fx-lf-blob) {
  position: relative;
  z-index: 1;
}

/* ── 3D Depth Press ───────────────────────────────────────────── */
.btn:active       { transform: scale(0.93) translateY(3px) !important; transition-duration: 0.06s !important; }
.hdr-cta:active   { transform: scale(0.93) translateY(3px) !important; transition-duration: 0.06s !important; }
.mini-btn:active  { transform: scale(0.91) !important; transition-duration: 0.06s !important; }
.svc-card:not(.photo):active { transform: translateY(-2px) scale(0.96) !important; }
.work-card:active { transform: scale(0.98) !important; }

/* ── Text Flip nav links ──────────────────────────────────────── */
.site-nav li a {
  display: inline-block !important;
  perspective: 240px;
  overflow: visible !important;
}
.site-nav li a .tf-inner {
  display: inline-block;
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}
.site-nav li a .tf-front,
.site-nav li a .tf-back {
  display: block;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.site-nav li a .tf-back {
  position: absolute;
  inset: 0;
  display: flex; align-items: center;
  transform: rotateY(180deg);
  font-family: var(--ff-en, 'Barlow Condensed', sans-serif) !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  white-space: nowrap;
  color: var(--green, #4E7A68);
}
.site-nav li a:hover .tf-inner { transform: rotateY(180deg); }

/* ── @property for conic border animation ─────────────────────── */
@property --ba {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes ba-spin { to { --ba: 360deg; } }

/* ── Border Animation — service cards, FAQ items ──────────────── */
.svc-card:not(.photo),
.fq-item,
.rd-card,
.rs-rel-card {
  --ba: 0deg;
  position: relative;
}
.svc-card:not(.photo)::before,
.fq-item::before,
.rd-card::before,
.rs-rel-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--ba) at 50% 50%,
    transparent   0deg   50deg,
    var(--green, #4E7A68)  80deg  110deg,
    var(--green-2, #D0E8DC) 110deg 150deg,
    var(--green, #4E7A68) 180deg  210deg,
    transparent 240deg 360deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.45s;
  pointer-events: none;
  z-index: 3;
  animation: ba-spin 3.5s linear infinite paused;
}
.svc-card:not(.photo):hover::before,
.fq-item:hover::before,
.fq-item[open]::before,
.rd-card:hover::before,
.rs-rel-card:hover::before {
  opacity: 1;
  animation-play-state: running;
}

/* ── Border Animation — work cards, read cards (use ::after) ──── */
.work-card,
.read-card {
  --ba: 0deg;
  position: relative;
}
.work-card::after,
.read-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--r-md, 12px);
  padding: 1px;
  background: conic-gradient(
    from var(--ba) at 50% 50%,
    transparent 0deg 60deg,
    var(--green, #4E7A68) 90deg 120deg,
    var(--green-2, #D0E8DC) 120deg 160deg,
    var(--green, #4E7A68) 200deg 230deg,
    transparent 260deg 360deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.45s;
  pointer-events: none;
  z-index: 2;
  animation: ba-spin 4.5s linear infinite paused;
}
.work-card:hover::after,
.read-card:hover::after { opacity: 1; animation-play-state: running; }

/* ── Liquid Glass Header (boost on scroll) ────────────────────── */
.site-header.scrolled {
  backdrop-filter: blur(24px) saturate(220%) brightness(1.04) !important;
  -webkit-backdrop-filter: blur(24px) saturate(220%) brightness(1.04) !important;
  background: rgba(244, 249, 246, 0.82) !important;
}

/* ── Stacking Work Cards (index.html only) ────────────────────── */
@media (min-width: 780px) {
  .works-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  .works-stack .work-card {
    position: sticky !important;
    top: calc(88px + var(--i, 0) * 18px) !important;
    margin-bottom: 24px !important;
    transform-origin: center top !important;
    border-radius: var(--r-md, 12px) !important;
    will-change: transform, opacity;
  }
  .works-stack .work-card:last-child {
    margin-bottom: 0 !important;
  }
  .works-stack .work-card-media {
    aspect-ratio: 16/9 !important;
  }
}

/* Scroll-driven: previous cards shrink as next slides over */
@supports (animation-timeline: scroll()) {
  @media (min-width: 780px) {
    .works-stack .work-card:not(:last-child) {
      animation: stack-recede linear both;
      animation-timeline: view(block);
      animation-range: exit 0% exit 60%;
    }
    @keyframes stack-recede {
      to { scale: 0.91; opacity: 0.6; filter: blur(1.5px); }
    }
  }
}

/* ── Scroll-Driven: section elements ─────────────────────────── */
@supports (animation-timeline: scroll()) {
  .sd-rise {
    animation: sd-rise-anim linear both;
    animation-timeline: view(block);
    animation-range: entry 0% entry 40%;
  }
  @keyframes sd-rise-anim {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .sd-scale {
    animation: sd-scale-anim linear both;
    animation-timeline: view(block);
    animation-range: entry 0% entry 50%;
  }
  @keyframes sd-scale-anim {
    from { opacity: 0; transform: scale(0.93); }
    to   { opacity: 1; transform: scale(1); }
  }
}

/* ── Parallax targets ─────────────────────────────────────────── */
[data-px] { will-change: transform; }

/* ── Card 3D Tilt (JS-controlled) ────────────────────────────── */
.work-card,
.rd-card,
.rd-feat-card,
.rs-rel-card {
  will-change: transform;
  transition: transform 0.18s ease, box-shadow 0.3s !important;
}

/* ── Sliding Background Reveal (btn--ghost) ───────────────────── */
/* The existing .btn::before already slides up for .btn.
   Here we add a directional sweep for .btn--ghost */
.btn--ghost {
  position: relative;
  overflow: hidden;
}
.btn--ghost::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink, #0A0A0A);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: -1;
  border-radius: inherit;
}
.btn--ghost:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}
.btn--ghost > *:not(.fx-lf-blob) { position: relative; z-index: 1; }

/* ── Seamless Loop ticker ─────────────────────────────────────── */
.fx-ticker-inner {
  display: inline-flex;
  white-space: nowrap;
  animation: fx-ticker 22s linear infinite;
}
@keyframes fx-ticker { to { transform: translateX(-50%); } }
.fx-ticker-inner:hover { animation-play-state: paused; }

/* ── Micro: num-card pulse on count ──────────────────────────── */
.num-card { position: relative; overflow: hidden; }
.num-card.fx-counted::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(78,122,104,.18) 0%, transparent 70%);
  animation: num-pop 0.7s ease-out forwards;
  pointer-events: none;
}
@keyframes num-pop {
  0%   { opacity: 0; transform: scale(0.4); }
  40%  { opacity: 1; transform: scale(1.3); }
  100% { opacity: 0; transform: scale(2.2); }
}

/* ── Micro: reading progress bar enhancement ─────────────────── */
#rs-progress-bar {
  background: linear-gradient(90deg,
    var(--green, #4E7A68) 0%,
    var(--green-2, #D0E8DC) 50%,
    var(--green, #4E7A68) 100%
  ) !important;
  background-size: 200% !important;
  animation: prog-shimmer 2.4s linear infinite !important;
  height: 4px !important;
}

/* ── Micro: svc-card hover letter-spacing kinetic ────────────── */
.svc-card:not(.photo) h3 {
  transition: letter-spacing 0.4s cubic-bezier(0.16,1,0.3,1);
}
.svc-card:not(.photo):hover h3 { letter-spacing: 0.04em; }

/* ── Micro: CTA section floating particles ───────────────────── */
.fx-particle {
  position: absolute;
  border-radius: 50%;
  background: var(--green-2, #D0E8DC);
  pointer-events: none;
  animation: particle-float linear infinite;
  opacity: 0.4;
}
@keyframes particle-float {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0.3; }
  50%  { opacity: 0.6; }
  100% { transform: translateY(-120px) rotate(360deg); opacity: 0; }
}

/* ── Micro: reading card gradient border on hover ────────────── */
.read-card-media {
  position: relative;
}
.read-card:hover .read-card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px rgba(78,122,104,.4);
  transition: box-shadow 0.4s;
}

/* ── Micro: logo hover shimmer ───────────────────────────────── */
.logo {
  position: relative;
  display: flex;
  align-items: center;
  align-self: stretch;
}
.logo::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-20deg);
  transition: none;
  pointer-events: none;
}
.logo:hover::after {
  animation: logo-shimmer 0.6s ease forwards;
}
@keyframes logo-shimmer {
  from { left: -100%; }
  to   { left: 140%; }
}

/* ── Seamless: hero shape ambient loop ───────────────────────── */
.hero-shapes {
  animation: shape-ambient 20s ease-in-out infinite alternate;
}
@keyframes shape-ambient {
  0%   { transform: scale(1) rotate(0deg); }
  33%  { transform: scale(1.06) rotate(2deg); }
  66%  { transform: scale(0.97) rotate(-1.5deg); }
  100% { transform: scale(1.04) rotate(1deg); }
}

/* ── Seamless: service illustration hover bounce ─────────────── */
.svc-illo {
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.svc-card:hover .svc-illo {
  animation: illo-bounce 0.7s cubic-bezier(0.16,1,0.3,1);
}
@keyframes illo-bounce {
  0%   { transform: translateY(0) scale(1); }
  30%  { transform: translateY(-14px) scale(1.05); }
  55%  { transform: translateY(-6px) scale(1.02); }
  75%  { transform: translateY(-10px) scale(1.03); }
  100% { transform: translateY(-6px) scale(1.04); }
}

/* ── Micro: magnetic ripple on click ─────────────────────────── */
.js-magnetic {
  transition: transform 0.2s cubic-bezier(0.16,1,0.3,1);
}
.js-magnetic.mag-click {
  animation: mag-click 0.35s cubic-bezier(0.16,1,0.3,1);
}
@keyframes mag-click {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.9); }
  70%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* ── Micro: footer link hover underline sweep ────────────────── */
footer a:not(.btn):not(.mini-btn) {
  position: relative;
  display: inline-block;
}
footer a:not(.btn):not(.mini-btn)::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 0%; height: 1px;
  background: var(--green, #4E7A68);
  transition: width 0.35s cubic-bezier(0.16,1,0.3,1);
}
footer a:not(.btn):not(.mini-btn):hover::after { width: 100%; }

/* ── Micro: eyebrow text letter-spacing reveal ───────────────── */
.eyebrow {
  letter-spacing: 0.14em;
  transition: letter-spacing 0.6s cubic-bezier(0.16,1,0.3,1);
}
.rv.visible .eyebrow,
.rv-stagger.visible .eyebrow { letter-spacing: 0.18em; }

/* ── Glow on cursor ring in hero area ────────────────────────── */
#cursor-ring {
  transition: width 0.4s var(--ease,cubic-bezier(0.25,.46,.45,.94)),
              height 0.4s var(--ease,cubic-bezier(0.25,.46,.45,.94)),
              background 0.4s,
              opacity 0.3s,
              border-color 0.3s !important;
}
a:hover ~ #cursor-ring,
button:hover ~ #cursor-ring {
  border-color: var(--green, #4E7A68);
}

/* ── Mobile nav overrides (disable flip on small screens) ─────── */
@media (max-width: 900px) {
  .site-nav li a {
    perspective: none !important;
    overflow: visible !important;
  }
  .site-nav li a .tf-inner {
    transform: none !important;
    transition: none !important;
    transform-style: flat !important;
  }
  .site-nav li a .tf-front {
    font-size: 28px !important;
    font-family: var(--ff-jp, 'Noto Sans JP', sans-serif) !important;
    font-weight: 700 !important;
  }
  .site-nav li a .tf-back { display: none !important; }
}

/* ── big-en with child elements: never apply kinetic animation ─── */
/* (JS now skips these, but CSS guard as safety net)               */
.hero:not([class*="-hero"]) .big-en .fx-kt-c {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* ── svc-head centering: ensure big-en chars center correctly ─── */
.svc-head .big-en {
  text-align: center !important;
}
.svc-head .big-en .fx-kt-c {
  /* inline-block chars inherit parent text-align: center fine */
}

/* ── Works stack: mobile fallback ────────────────────────────── */
@media (max-width: 779px) {
  .works-stack { display: grid !important; }
  .works-stack .work-card {
    position: relative !important;
    top: auto !important;
    margin-bottom: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}

/* ── Work stack: smooth scale transition ─────────────────────── */
@media (min-width: 780px) {
  .works-stack .work-card {
    transition: transform 0.35s ease, opacity 0.35s, filter 0.35s !important;
  }
}

/* ── Contact form focus glow ─────────────────────────────────── */
.ct-input:focus,
input:focus,
textarea:focus {
  box-shadow: 0 0 0 3px rgba(78,122,104,.18) !important;
  transition: box-shadow 0.3s, border-color 0.3s !important;
}

/* ── FAQ toggle kinetic spring ───────────────────────────────── */
.fq-toggle {
  transition: transform 0.45s cubic-bezier(0.16,1,0.3,1),
              background 0.35s !important;
}

/* ── Micro: hero overflow guard for parallax ─────────────────── */
.hero { overflow: hidden; }