/* ───────────── Section transitions (kirifuda-style horizontal slide) ─────────────
   Each .kt-section starts shifted off-screen and slides in when scrolled into view.
   Direction alternates left/right. Inspired by kirifuda.co.jp transition rhythm. */

.kt-section {
  opacity: 0;
  transform: translate3d(8vw, 0, 0);
  transition:
    opacity 700ms cubic-bezier(.2,.7,.2,1),
    transform 1000ms cubic-bezier(.2,.7,.2,1);
  will-change: transform, opacity;
}
.kt-section:nth-of-type(even) {
  transform: translate3d(-8vw, 0, 0);
}
.kt-section.is-in,
.kt-section:nth-of-type(even).is-in,
.kt-section:nth-of-type(odd).is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* hero never slides */
.hero.kt-section { opacity: 1; transform: none; }

/* mode: vertical fade-up only */
body[data-trans="fade"] .kt-section {
  transform: translate3d(0, 36px, 0);
  transition: opacity 700ms cubic-bezier(.2,.7,.2,1), transform 900ms cubic-bezier(.2,.7,.2,1);
}
body[data-trans="fade"] .kt-section.is-in { transform: translate3d(0,0,0); }

/* mode: zoom (clip-path inset that opens up) */
body[data-trans="zoom"] .kt-section {
  transform: none;
  clip-path: inset(8% 6% 8% 6% round 24px);
  transition: clip-path 1000ms cubic-bezier(.2,.7,.2,1), opacity 700ms ease;
}
body[data-trans="zoom"] .kt-section.is-in {
  clip-path: inset(0 0 0 0 round 0);
}

/* mode: off — show everything immediately */
body[data-trans="off"] .kt-section {
  opacity: 1; transform: none; clip-path: none; transition: none;
}

/* Reduced-motion users always see content — no transform, no opacity gate */
@media (prefers-reduced-motion: reduce) {
  .kt-section,
  body[data-trans="fade"] .kt-section,
  body[data-trans="zoom"] .kt-section {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* extra: density modifier */
body[data-density="compact"] .section { padding: clamp(60px, 9vh, 120px) 0; }
body[data-density="comfy"]   .section { padding: clamp(80px, 12vh, 160px) 0; }
body[data-density="loose"]   .section { padding: clamp(120px, 18vh, 220px) 0; }

/* radius variable applied to cards */
body { --r: 22px; }
.svc, .case-media, .promise-card, .why-portrait, .menu-tg { border-radius: var(--r) !important; }

/* uppercase variant */
body[data-uppercase="off"] .kicker,
body[data-uppercase="off"] .nav-close-btn,
body[data-uppercase="off"] .nav-toggle-label,
body[data-uppercase="off"] .foot,
body[data-uppercase="off"] .stack-tag { text-transform: none; }

/* grain overlay */
body[data-grain="on"]::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 200;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.35'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.35;
}

/* italic hero off */
body[data-italichero="off"] .hero h1 span { font-style: normal !important; }

/* hero alignment */
body[data-heroalign="center"] .hero-content {
  text-align: center;
  left: 0; right: 0;
}
body[data-heroalign="center"] .hero h1,
body[data-heroalign="center"] .hero .sub { margin-left: auto; margin-right: auto; }

/* logo dot color */
body[data-logodot="terra"]  .logo .dot { background: #C26B4A; }
body[data-logodot="forest"] .logo .dot { background: #3A4A3D; }
body[data-logodot="sky"]    .logo .dot { background: #A8C5D9; }
body[data-logodot="off"]    .logo .dot { display: none; }

/* strip toggle */
body[data-stripvisible="off"] .strip { display: none; }

/* dark section tone */
body[data-darktone="cool"] .dark-section { background: #1A2028; }
body[data-darktone="black"] .dark-section { background: #0d0a08; }