/* ==========================================================================
   KUROHANA HOUSE — ELEVATION v3
   Loaded after site.css. Surgical refinement on an already-strong dark
   editorial system: washi-paper texture, Japanese-numeral menus, watermark
   testimonials, a sensory-journey hero, and magnetic tactility.
   ========================================================================== */

:root {
  /* Push photography out of the muddy zone — warmer, crisper */
  --img-tone: saturate(1.04) contrast(1.05) brightness(0.96);
  --img-tone-hero: saturate(1.02) contrast(1.06) brightness(0.9);
  --edge-light: inset 0 1px 0 rgba(237, 229, 211, 0.06);
  --shadow-lift: 0 30px 70px rgba(0, 0, 0, 0.55), 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(237, 229, 211, 0.08);
  --serif-jp: "Noto Serif JP", "Fraunces", serif;
}

/* -------- 1. Washi-paper grain (tactile, injected) -------- */
.kh-grain {
  position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px;
}

/* -------- 2. HERO — sensory-journey reveal + vignette -------- */
.hero__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 30%, transparent 45%, rgba(10, 8, 7, 0.5) 100%);
}
.hero__overline, .hero__title, .hero__lead, .hero__ctas, .hero__meta {
  opacity: 0; transform: translateY(22px);
  animation: khRise 1s var(--ease-out) forwards;
}
.hero__overline { animation-delay: 0.35s; }
.hero__title { animation-delay: 0.5s; }
.hero__lead { animation-delay: 0.68s; }
.hero__ctas { animation-delay: 0.84s; }
.hero__meta { animation-delay: 0.98s; }
@keyframes khRise { to { opacity: 1; transform: none; } }
/* brushstroke scroll hint */
.hero__scrollhint { transition: opacity var(--t-slow) var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .hero__overline, .hero__title, .hero__lead, .hero__ctas, .hero__meta { opacity: 1; transform: none; animation: none; }
}

/* -------- 3. Japanese-numeral course list (signature) -------- */
.course-list { counter-reset: course; }
.course-list li {
  grid-template-columns: 2.2rem 1fr auto;
  align-items: center;
  transition: border-color var(--t-med) var(--ease);
}
.course-list li::before {
  content: counter(course, cjk-ideographic);
  font-family: var(--serif-jp);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--bronze);
  opacity: 0.85;
  text-align: center;
}
.course-list li:hover { border-color: var(--line-strong); }
.course-list li:hover::before { color: var(--gold); opacity: 1; }

/* -------- 4. Testimonial — watermark quote mark -------- */
.testimonial { position: relative; overflow: hidden; transition: transform var(--t-med) var(--ease-soft), box-shadow var(--t-med) var(--ease-soft), border-color var(--t-med); }
.testimonial__mark {
  position: absolute; top: -0.6rem; right: 0.4rem; z-index: 0;
  font-family: var(--serif); font-size: 7rem; line-height: 1;
  color: var(--bronze); opacity: 0.1; margin: 0; pointer-events: none;
}
.testimonial__rating, .testimonial__body, .testimonial__attr { position: relative; z-index: 1; }
.testimonial:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: var(--line-strong); }
.testimonial__rating { color: var(--gold); letter-spacing: 0.2em; }

/* -------- 5. Card depth on hover (exp / menu) -------- */
.exp-card, .menu-card { transition: background var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease-soft), transform var(--t-med) var(--ease-soft), border-color var(--t-med); }
.exp-card:hover, .menu-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.exp-card__index { font-family: var(--serif); font-size: 2.4rem; font-weight: 320; }

/* -------- 6. Buttons — lit edge + tactile press -------- */
.btn { transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease), border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), transform var(--t-fast) var(--ease); will-change: transform; }
.btn[data-magnetic] { transform: translate(var(--mx, 0), var(--my, 0)); }
.btn:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 30px rgba(0, 0, 0, 0.4); }
.btn:active { transform: translateY(1px) scale(0.99); }

/* -------- 7. Philosophy — framed typographic moment -------- */
.philosophy { position: relative; }
.philosophy::before, .philosophy::after {
  content: ""; position: absolute; width: 24px; height: 24px; border: 1px solid var(--line-strong); pointer-events: none;
}
.philosophy::before { top: 0; left: clamp(1rem, 4vw, 3rem); border-right: 0; border-bottom: 0; }
.philosophy::after { bottom: 0; right: clamp(1rem, 4vw, 3rem); border-left: 0; border-top: 0; }
.mark-jp { color: var(--bronze); font-family: var(--serif-jp); }
.philosophy__quote em { color: var(--gold); font-style: italic; }

/* -------- 8. Section headings — italic gold accent -------- */
.sec-head h2 em, .hero__title em, .final-cta h2 em, .atmos__body h2 em, .beverage h2 em { color: var(--gold); font-style: italic; }

/* -------- 9. Gallery — featured asymmetric tile breakout -------- */
.gallery-tile { transition: transform var(--t-med) var(--ease-soft), filter var(--t-med) var(--ease); filter: var(--img-tone); }
.gallery-tile:hover { transform: scale(1.012); filter: saturate(1.08) brightness(1.02); z-index: 2; }
.gallery-tile--wide.gallery-tile--tall { position: relative; }
.gallery-tile--wide.gallery-tile--tall::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(201, 168, 113, 0.18);
}

/* -------- 10. Trust strip — quiet lift -------- */
.trust__item { transition: color var(--t-med) var(--ease); }
.trust__item:hover strong { color: var(--gold); }

/* -------- 11. Staggered reveal children -------- */
[data-stagger] > * { opacity: 0; transform: translateY(20px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
[data-stagger].is-in > * { opacity: 1; transform: none; }
[data-stagger].is-in > *:nth-child(1) { transition-delay: 0.04s; }
[data-stagger].is-in > *:nth-child(2) { transition-delay: 0.12s; }
[data-stagger].is-in > *:nth-child(3) { transition-delay: 0.20s; }
[data-stagger].is-in > *:nth-child(4) { transition-delay: 0.28s; }
@media (prefers-reduced-motion: reduce) { [data-stagger] > * { opacity: 1; transform: none; } }