/* =============================================================
   saloweb / works/_shared/quality.css
   全テンプレ共通の品質補正レイヤ
   - 100vh → 100svh fallback
   - SVG Grain Overlay
   - prefers-reduced-motion ガード
   - 共通カスタムカーソル基本スタイル
   - Magnetic CTA hover の基本スタイル
   各テンプレの style.css の **後** に読み込むこと。
   ============================================================= */

/* ----- 100svh / dvh fallback for iOS Safari ----- */
:root {
  --vh-100: 100svh;
  --vh-50: 50svh;
}
@supports not (height: 100svh) {
  :root {
    --vh-100: 100vh;
    --vh-50: 50vh;
  }
}

/* ----- Grain Overlay -----
   QUALITY_BAR §[A] / AWWWARDS §1-E 必須要件
   feTurbulence baseFrequency 0.08, opacity 0.10, mix-blend-mode multiply
*/
.q-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
  opacity: 0.10;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.08' numOctaves='2' stitchTiles='stitch' seed='3'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.42 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 320px 320px;
}
.q-grain--light {
  mix-blend-mode: overlay;
  opacity: 0.08;
}
.q-grain--dense {
  opacity: 0.14;
}
.q-grain--shift {
  animation: qGrainShift 1.6s steps(8) infinite;
}
@keyframes qGrainShift {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-2%, -3%); }
  20%  { transform: translate(-4%, 2%); }
  30%  { transform: translate(3%, -1%); }
  40%  { transform: translate(-3%, 3%); }
  50%  { transform: translate(2%, -4%); }
  60%  { transform: translate(-1%, 1%); }
  70%  { transform: translate(4%, -2%); }
  80%  { transform: translate(-2%, 4%); }
  90%  { transform: translate(1%, 2%); }
  100% { transform: translate(0, 0); }
}

/* ----- Custom Cursor (desktop only) ----- */
.q-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
  background: #fff;
  transform: translate(-50%, -50%) scale(0.55);
  transition:
    width 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    height 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.32s ease;
  will-change: transform;
}
.q-cursor.is-hover {
  width: 72px; height: 72px;
  transform: translate(-50%, -50%) scale(1);
  mix-blend-mode: difference;
  background: #fff;
}
.q-cursor.is-down {
  transform: translate(-50%, -50%) scale(0.4);
}
@media (hover: none), (pointer: coarse) {
  .q-cursor { display: none !important; }
}

/* ----- Magnetic CTA (visual base) ----- */
[data-magnetic] {
  display: inline-block;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* ----- prefers-reduced-motion ガード ----- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .q-grain--shift { animation: none !important; }
  .q-cursor { display: none !important; }
  [data-magnetic] { transform: none !important; }
}

/* ----- ヒーロー clip-path reveal の基本パターン ----- */
.q-reveal-clip {
  clip-path: inset(0 100% 0 0);
  transform: scale(0.96);
  transition:
    clip-path 1.1s cubic-bezier(0.4, 0, 0.2, 1),
    transform 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}
.q-reveal-clip.is-in {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}
.q-reveal-clip--up {
  clip-path: inset(100% 0 0 0);
}
.q-reveal-clip--up.is-in {
  clip-path: inset(0 0 0 0);
}

/* ----- 横スクロールゴミの最終防衛線 ----- */
html, body { overflow-x: clip; }