/* ==========================================================================
   Thirdkey - モーション演出用スタイル(scale.com風のスクロールリビール、
   マーキー、カーソル追従、マグネットボタン、カードチルトなど)
   ========================================================================== */

/* Scroll reveal
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transition: opacity 0.85s cubic-bezier(0.16, 0.8, 0.24, 1), transform 0.85s cubic-bezier(0.16, 0.8, 0.24, 1);
}

[data-reveal="up"] { transform: translateY(26px); }
[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="fade"] { transform: none; }

[data-reveal].is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

[data-reveal-group] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 0.8, 0.24, 1), transform 0.7s cubic-bezier(0.16, 0.8, 0.24, 1);
}

[data-reveal-group].is-visible > * { opacity: 1; transform: translateY(0); }
[data-reveal-group].is-visible > *:nth-child(1) { transition-delay: 0.05s; }
[data-reveal-group].is-visible > *:nth-child(2) { transition-delay: 0.12s; }
[data-reveal-group].is-visible > *:nth-child(3) { transition-delay: 0.19s; }
[data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 0.26s; }
[data-reveal-group].is-visible > *:nth-child(5) { transition-delay: 0.33s; }
[data-reveal-group].is-visible > *:nth-child(6) { transition-delay: 0.4s; }

/* Services(00→01→02→03)は、汎用の0.07s刻みだと差が小さすぎて
   「順番に出ている」感が伝わりにくかったため、このグループだけ
   間隔を大きく取って明確な順送りフェードインにする。
   (このファイル内で上の汎用ルールより後に書くことで、同じ詳細度でも
   後勝ちのカスケードにより確実に上書きされるようにしている) */
.services-frame-grid.is-visible > *:nth-child(1) { transition-delay: 0s; }
.services-frame-grid.is-visible > *:nth-child(2) { transition-delay: 0.2s; }
.services-frame-grid.is-visible > *:nth-child(3) { transition-delay: 0.4s; }
.services-frame-grid.is-visible > *:nth-child(4) { transition-delay: 0.6s; }

/* Line reveal (heading masks)
   ========================================================================== */
[data-reveal="lines"] .reveal-line { overflow: hidden; display: block; }

.reveal-line > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.85s cubic-bezier(0.16, 0.8, 0.24, 1);
}

[data-reveal="lines"].is-visible .reveal-line > span { transform: translateY(0); }
[data-reveal="lines"].is-visible .reveal-line:nth-child(2) > span { transition-delay: 0.08s; }

/* Hero-only reveal (index.html) -- triggered by intro.js when the intro
   video finishes, not by scroll, since the hero sits under the intro overlay. */
body.hero-in .hero-title .reveal-line > span {
  transform: translateY(0);
}

.hero-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s cubic-bezier(0.16, 0.8, 0.24, 1), transform 0.85s cubic-bezier(0.16, 0.8, 0.24, 1);
}

body.hero-in .hero-reveal {
  opacity: 1;
  transform: translateY(0);
}

.hero-reveal.d0 { transition-delay: 0.15s; }
.hero-reveal.d1 { transition-delay: 0.5s; }
.hero-reveal.d2 { transition-delay: 0.68s; }
.hero-reveal.d3 { transition-delay: 0.85s; }

/* Card tilt (JS sets the transform on mousemove)
   ========================================================================== */
.tilt {
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.16, 0.8, 0.24, 1);
}

/* Marquee
   ========================================================================== */
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.marquee-track {
  animation: marqueeScroll 26s linear infinite;
}

.marquee:hover .marquee-track { animation-play-state: paused; }

/* Custom cursor (desktop only, mouse-driven via JS)
   照準(エイムマーク)のリティクルをマウスポインタに追従させる。
   ホバー時は白く発光しつつ少し拡大し、ロックオンしたような見た目にする。
   ========================================================================== */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  background-color: var(--color-accent);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='7' fill='none' stroke='black' stroke-width='1'/><circle cx='12' cy='12' r='0.9' fill='black'/><line x1='12' y1='0.8' x2='12' y2='5.7' stroke='black' stroke-width='1' stroke-linecap='round'/><line x1='12' y1='18.3' x2='12' y2='23.2' stroke='black' stroke-width='1' stroke-linecap='round'/><line x1='0.8' y1='12' x2='5.7' y2='12' stroke='black' stroke-width='1' stroke-linecap='round'/><line x1='18.3' y1='12' x2='23.2' y2='12' stroke='black' stroke-width='1' stroke-linecap='round'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='7' fill='none' stroke='black' stroke-width='1'/><circle cx='12' cy='12' r='0.9' fill='black'/><line x1='12' y1='0.8' x2='12' y2='5.7' stroke='black' stroke-width='1' stroke-linecap='round'/><line x1='12' y1='18.3' x2='12' y2='23.2' stroke='black' stroke-width='1' stroke-linecap='round'/><line x1='0.8' y1='12' x2='5.7' y2='12' stroke='black' stroke-width='1' stroke-linecap='round'/><line x1='18.3' y1='12' x2='23.2' y2='12' stroke='black' stroke-width='1' stroke-linecap='round'/></svg>");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  pointer-events: none;
  z-index: 9800;
  transform: translate3d(-100px, -100px, 0) scale(1);
  transition: transform 0.15s ease-out, opacity 0.2s ease, background-color 0.25s ease;
  opacity: 0;
}

.custom-cursor.is-active { opacity: 1; }
.custom-cursor.is-hover { background-color: #ffffff; }

/* Magnetic buttons (desktop only, JS sets transform)
   ========================================================================== */
.btn { will-change: transform; }

/* Grain overlay
   ========================================================================== */
.grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 4500;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}

/* Reduced motion / touch fallback
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  .reveal-line > span,
  .hero-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .marquee-track {
    animation: none !important;
  }

  .intro-video.intro-flicker {
    animation: none !important;
  }

  .hero-tiles {
    display: none !important;
  }
}

@media (hover: none), (pointer: coarse) {
  .custom-cursor { display: none; }
}