/* =====================================================
   ettract — ENHANCE LAYER (Stage A + B + C)
   2026-04 rebrand stylish enhancements
   Does NOT override existing rules; additive only.
   ===================================================== */

/* ============================================================
   [STAGE A-1] Film Grain / Noise Overlay
   ============================================================ */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ============================================================
   [STAGE A-2] Custom Cursor + Magnetic Hover
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  html, body { cursor: none; }
  a, button, input, textarea, [role="button"], .service-card, .case-card { cursor: none; }

  .e-cursor-dot, .e-cursor-ring {
    position: fixed; top: 0; left: 0; pointer-events: none;
    z-index: 10000; transform: translate3d(-50%, -50%, 0);
    will-change: transform;
  }
  .e-cursor-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #f4f4fc;
    transition: width .2s var(--ease), height .2s var(--ease), background .2s var(--ease);
    mix-blend-mode: difference;
  }
  .e-cursor-ring {
    width: 34px; height: 34px; border-radius: 50%;
    border: 1.5px solid rgba(167,139,250,.8);
    transition: width .3s var(--ease), height .3s var(--ease),
                border-color .3s var(--ease), background .3s var(--ease);
    backdrop-filter: blur(2px);
  }
  .e-cursor-ring.is-hover {
    width: 56px; height: 56px;
    border-color: rgba(103,232,249,.9);
    background: rgba(124,58,237,.1);
  }
  .e-cursor-dot.is-hover { background: #67e8f9; width: 10px; height: 10px; }
}

/* ============================================================
   [STAGE A-3] Bold Display Typography for Hero
   日本語メトリクスに合わせ 42→96px 程度に収める
   ============================================================ */
.hero-title {
  font-size: clamp(42px, 6.5vw, 92px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.05 !important;
  text-shadow: 0 4px 40px rgba(124,58,237,.2);
  word-break: keep-all;
  overflow-wrap: normal;
}
.hero-title br { display: block; }
.hero-title .gradient-text {
  display: inline-block;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .hero-title .gradient-text { white-space: normal; }
  .hero-title { font-size: clamp(36px, 9vw, 56px) !important; }
}
.hero-badge {
  font-size: 11px !important;
  letter-spacing: 4px;
  text-transform: uppercase;
  padding: 8px 18px;
  border: 1px solid rgba(167,139,250,.4);
  background: rgba(124,58,237,.06);
  backdrop-filter: blur(10px);
}
.hero-sub {
  font-size: clamp(16px, 1.4vw, 20px) !important;
  font-weight: 300;
  max-width: 55ch;
  opacity: .85;
}

/* Kinetic char reveal for hero */
.hero-title span.gradient-text {
  display: inline-block;
  animation: kinetic-reveal .9s var(--ease) both;
  animation-delay: .2s;
}
@keyframes kinetic-reveal {
  0% { opacity: 0; transform: translateY(40px) rotate3d(1,0,0,-25deg); filter: blur(14px); }
  60% { filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) rotate3d(1,0,0,0); filter: blur(0); }
}

/* ============================================================
   [STAGE B-5] Bento Grid for Services (10 cards)
   6-col base, 横長ワイド3枚 + 通常カード7枚。行スパン無しで均等配置
   ============================================================ */
@media (min-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(6, 1fr) !important;
    grid-auto-rows: minmax(230px, 1fr);
    gap: var(--sp-3) !important;
  }
  /* Pattern: [1:wide][2] | [3:wide][4] | [5:wide][6] | [7][8][9][10] */
  .service-card:nth-child(1) {
    grid-column: span 4;
    background: linear-gradient(135deg, rgba(124,58,237,.18), rgba(99,102,241,.1)) !important;
  }
  .service-card:nth-child(2) { grid-column: span 2; }
  .service-card:nth-child(3) { grid-column: span 2; }
  .service-card:nth-child(4) {
    grid-column: span 4;
    background: linear-gradient(135deg, rgba(6,182,212,.16), rgba(16,185,129,.08)) !important;
  }
  .service-card:nth-child(5) { grid-column: span 3; }
  .service-card:nth-child(6) { grid-column: span 3; }
  .service-card:nth-child(7) {
    grid-column: span 4;
    background: linear-gradient(135deg, rgba(167,139,250,.14), rgba(6,182,212,.08)) !important;
  }
  .service-card:nth-child(8) { grid-column: span 2; }
  .service-card:nth-child(9) { grid-column: span 3; }
  .service-card:nth-child(10) {
    grid-column: span 3;
    background: linear-gradient(135deg, rgba(16,185,129,.16), rgba(124,58,237,.08)) !important;
  }
  /* 各カード内部を縦フレックス化 — タグを下端揃え */
  .service-card {
    display: flex !important;
    flex-direction: column;
  }
  .service-card p { flex: 1; }
  .service-card h3 {
    word-break: keep-all;
    overflow-wrap: normal;
  }
}

/* ============================================================
   [STAGE B-8] Logo 3D Hover Rotation
   ============================================================ */
.nav-logo {
  perspective: 600px;
  transition: transform .5s var(--ease);
}
.nav-logo:hover .logo-img {
  transform: rotate3d(0, 1, 0, 18deg) translateZ(10px);
  filter: drop-shadow(0 8px 24px rgba(124,58,237,.4));
}
.logo-img {
  transition: transform .6s var(--ease), filter .6s var(--ease);
  will-change: transform;
}

/* ============================================================
   [STAGE C-6] WebGL-free Mesh Gradient Background (animated)
   Layered UNDER the hero particle canvas (canvas z-index > this)
   ============================================================ */
/* CSS Mesh Gradient — fallback when WebGL shader is disabled (mobile / reduced-motion) */
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 40% 30% at 15% 25%, rgba(124,58,237,.35), transparent 60%),
    radial-gradient(ellipse 35% 25% at 85% 15%, rgba(6,182,212,.28), transparent 60%),
    radial-gradient(ellipse 30% 25% at 70% 80%, rgba(167,139,250,.22), transparent 60%),
    radial-gradient(ellipse 35% 25% at 25% 85%, rgba(16,185,129,.18), transparent 60%);
  filter: blur(50px);
  animation: mesh-drift 24s var(--ease) infinite alternate;
  transition: opacity .8s ease;
}
/* When WebGL shader is running, fade out CSS mesh to avoid double gradient */
.hero.e-shader-active::before { opacity: 0; }

@keyframes mesh-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-4%, 3%, 0) scale(1.08); }
  100% { transform: translate3d(3%, -2%, 0) scale(1.05); }
}
.hero > * { position: relative; z-index: 2; }
.hero canvas#shaderCanvas { z-index: 0 !important; }
#heroCanvas { z-index: 1 !important; }

/* ============================================================
   [STAGE C-4] Scroll-driven animation (section reveal)
   CSS scroll-timeline (modern browsers). Graceful fallback.
   ============================================================ */
/* セクション見出しのみに控えめな reveal を適用（グリッド要素には適用しない）
   グリッド要素は配置上、下端で滞留が起きやすいため除外 */
@supports (animation-timeline: view()) {
  .section-header {
    animation: reveal-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 15%;
  }
  @keyframes reveal-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}
/* service-card / case-card / strength-card は常時フル表示 */
.service-card, .case-card, .strength-card {
  opacity: 1 !important;
  filter: none !important;
}

/* ============================================================
   [STAGE C-7] Horizontal Scroll — Case Studies (optional wrapper)
   Activated when body has .e-horizontal-cases class (JS sets)
   ============================================================ */
body.e-horizontal-cases .cases-grid {
  display: flex !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(124,58,237,.4) transparent;
}
body.e-horizontal-cases .case-card {
  flex: 0 0 420px;
  scroll-snap-align: start;
}

/* ============================================================
   [STAGE C-9] View Transitions API — smooth page navigation
   ============================================================ */
@supports (view-transition-name: none) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: .45s;
    animation-timing-function: var(--ease);
  }
  .nav-logo { view-transition-name: brand-logo; }
  .hero-title { view-transition-name: hero-title; }
}

/* ============================================================
   Section depth — subtle radial glow at section tops
   ============================================================ */
.section {
  position: relative;
}
.section::before {
  content: '';
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  width: 61.8%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,58,237,.5), rgba(6,182,212,.4), transparent);
  opacity: .6;
}

/* ============================================================
   Buttons — refined hover with shimmer
   ============================================================ */
.btn-primary {
  position: relative; overflow: hidden;
}
.btn-primary::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.3) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease);
  pointer-events: none;
}
.btn-primary:hover::after { transform: translateX(120%); }

/* ============================================================
   Disable enhance features on touch / mobile / print
   ============================================================ */
@media (pointer: coarse), (hover: none) {
  .e-cursor-dot, .e-cursor-ring { display: none; }
  html, body { cursor: auto; }
}
@media print {
  body::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; }
  .hero-title span.gradient-text { animation: none; }
  .logo-img { transition: none; }
}