/* =====================================================================
   Kurosei — Elevation Layer
   World-class refinement. Non-destructive, cascading enhancements.
   Targets: Film-stock hero grading, film grain, magnetic CTAs,
   italic-bronze emphasis, subtle parallax, staggered reveals.
   ===================================================================== */

/* ---- 1. Token Enrichment ---- */
:root {
  /* Refined palette — deepen accents, add shadow scale */
  --bronze-rich:    #9A7C52;     /* Richer, slightly deeper bronze */
  --bronze-glow:    #C9B07A;     /* Luminous accent for emphasis */
  --accent-warm:    #D4A574;     /* Warm secondary accent */

  /* Shadow and elevation scale */
  --shadow-xs:      0 2px 4px rgba(0, 0, 0, 0.12);
  --shadow-sm:      0 4px 8px rgba(0, 0, 0, 0.18);
  --shadow-md:      0 8px 16px rgba(0, 0, 0, 0.24);
  --shadow-lg:      0 12px 32px rgba(0, 0, 0, 0.32);

  /* Motion easings */
  --ease-silk:      cubic-bezier(0.25, 0.46, 0.45, 0.94);  /* smooth, organic */
  --ease-snap:      cubic-bezier(0.34, 1.56, 0.64, 1);     /* bouncy magnetic */
  --ease-float:     cubic-bezier(0.43, 0.13, 0.23, 0.96);  /* ethereal */
}

/* ---- 2. Film-Stock Hero Grade & Parallax ---- */
.hero__media img {
  /* Lift the veil — warmer, richer, inviting; film stock aesthetic */
  filter: brightness(0.68) contrast(1.12) saturate(1.05) hue-rotate(2deg);
  transform: scale(1.03);
  animation: heroSettle 1.6s var(--ease-out) both, heroHum 6s var(--ease-silk) 1.6s infinite;
}

@keyframes heroHum {
  0%, 100% { transform: scale(1.03); }
  50%      { transform: scale(1.04); }
}

/* Parallax shift on hero image (clipped within scale) */
.hero__media {
  will-change: transform;
}

/* ---- 3. Film Grain Overlay (injected by JS) ---- */
.film-grain {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background-image:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" result="noise"/></filter><rect width="300" height="300" fill="black" filter="url(%23noise)" opacity="0.04"/></svg>');
  background-size: 300px 300px;
  opacity: 0.04;
  mix-blend-mode: overlay;
}

/* ---- 4. Italic Emphasis (Bronze) on Display Headings ---- */
h1 em, h2 em, .display em, .hero__title em {
  font-style: italic;
  font-weight: 300;
  color: var(--bronze-glow);
  letter-spacing: -0.01em;
  transition: color var(--t-med) var(--ease);
}

h1:hover em, h2:hover em {
  color: var(--bronze-rich);
}

/* ---- 5. Refined Focus Rings ---- */
:focus-visible {
  outline: 2px solid var(--bronze-glow);
  outline-offset: 4px;
  border-radius: 2px;
}

button:focus-visible, a:focus-visible {
  outline: 2px solid var(--bronze-glow);
  outline-offset: 4px;
}

/* ---- 6. Button Refinement — Magnetic + Lift ---- */
.btn {
  position: relative;
  transition: all var(--t-med) var(--ease-snap);
  overflow: visible;
}

.btn::before {
  content: '';
  position: absolute;
  inset: -6px;
  background: rgba(165, 138, 92, 0.04);
  border-radius: 3px;
  z-index: -1;
  opacity: 0;
  transition: opacity var(--t-med) var(--ease-snap), transform var(--t-med) var(--ease-snap);
  pointer-events: none;
}

.btn:hover::before {
  opacity: 1;
  transform: scale(1.12);
}

.btn:active {
  transform: scale(0.98);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn--ghost:hover {
  color: var(--bronze-glow);
  transform: translateY(-2px);
  box-shadow: var(--shadow-xs);
}

/* ---- 7. Card/Section Compositional Depth ---- */
.split__media figure {
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  transition: box-shadow var(--t-med) var(--ease-silk), transform var(--t-med) var(--ease-silk);
}

.split__media figure:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.split__media img {
  transition: transform 2s var(--ease-silk), filter 2s var(--ease-silk);
  filter: brightness(0.96) contrast(1.02) saturate(0.97);
}

.split__media figure:hover img {
  transform: scale(1.03);
  filter: brightness(1) contrast(1.05) saturate(1.02);
}

/* Gallery cards with lift */
.gallery {
  --gallery-gap: clamp(1rem, 2.4vw, 2rem);
}

.gallery figure {
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  transition: all var(--t-med) var(--ease-silk);
  box-shadow: var(--shadow-xs);
}

.gallery figure:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.gallery img {
  transition: filter 1.4s var(--ease-silk);
  filter: brightness(0.95) contrast(1.01) saturate(0.98);
}

.gallery figure:hover img {
  filter: brightness(1) contrast(1.04) saturate(1.05);
}

/* ---- 8. Dividers & Accents — Refined ---- */
.rule, hr {
  background: var(--smoke);
  transition: background var(--t-med) var(--ease);
}

section:hover .rule {
  background: rgba(165, 138, 92, 0.2);
}

/* Footer top hairline in accent */
.site-footer {
  border-top: 1px solid var(--bronze);
  transition: border-color var(--t-med) var(--ease);
}

.site-footer:hover {
  border-color: var(--bronze-glow);
}

/* ---- 9. Staggered Reveal Animation (triggered via .is-inview) ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease-silk), transform 0.6s var(--ease-silk);
}

[data-reveal].is-inview {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delay via nth-child (paired with JS data-stagger) */
[data-stagger] > [data-reveal]:nth-child(1) { transition-delay: 0ms; }
[data-stagger] > [data-reveal]:nth-child(2) { transition-delay: 100ms; }
[data-stagger] > [data-reveal]:nth-child(3) { transition-delay: 200ms; }
[data-stagger] > [data-reveal]:nth-child(4) { transition-delay: 300ms; }
[data-stagger] > [data-reveal]:nth-child(5) { transition-delay: 400ms; }

/* ---- 10. Parallax for Large Images ---- */
[data-parallax] {
  will-change: transform;
  position: relative;
  overflow: hidden;
}

[data-parallax] img {
  transform: scale(1.08);
  transition: transform 0.1s linear;
}

/* ---- 11. Link Hover Refinement ---- */
a:not(.btn) {
  position: relative;
  transition: color var(--t-fast) var(--ease-silk);
}

a:not(.btn):hover {
  color: var(--bronze-glow);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

.link-arrow .arrow {
  display: inline-block;
  width: 1.2em;
  height: 1px;
  background: currentColor;
  position: relative;
  transition: width var(--t-med) var(--ease-snap), transform var(--t-med) var(--ease-snap);
}

.link-arrow .arrow::after {
  content: '';
  position: absolute;
  right: -3px;
  top: -3px;
  width: 6px;
  height: 6px;
  border: 1px solid currentColor;
  transform: rotate(45deg);
  border-left: none;
  border-bottom: none;
}

.link-arrow:hover .arrow {
  width: 1.6em;
  transform: translateX(2px);
}

/* ---- 12. Typography Micro-Details ---- */
.eyebrow {
  transition: color var(--t-med) var(--ease-silk);
}

.eyebrow::before {
  transition: opacity var(--t-med) var(--ease-silk);
}

a:hover .eyebrow,
section:hover .eyebrow {
  color: var(--bronze-glow);
}

a:hover .eyebrow::before {
  opacity: 1;
}

/* ---- 13. Selection Color (refined to bronze) ---- */
::selection {
  background: var(--bronze-glow);
  color: var(--ink);
}

/* ---- 14. Reduce Motion Respect ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  [data-parallax] img {
    transform: scale(1);
  }

  .btn::before {
    opacity: 0 !important;
  }

  .split__media figure:hover {
    transform: none;
  }

  .hero__media img {
    animation: none;
  }
}

/* ---- 15. Print Overrides ---- */
@media print {
  .film-grain {
    display: none;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}