/* ============================================================
   Forsthaus Mähring — CINEMATIC LAYER
   World-class motion: hero cinema · pinned scrollytelling ·
   scroll-driven reveals · micro-interactions · seamless seams.
   Animates ONLY transform / opacity / clip-path. 60fps.
   ============================================================ */

/* Bigger, grander headings — the type is the stage */
h2.section-title { font-size: clamp(2.4rem, 6vw, 5.4rem); line-height: 1.02; letter-spacing: -0.004em; }
.sec-head { max-width: 860px; }

/* Refined master easing for the existing reveals */
.reveal { transform: translateY(38px); transition: opacity 1.05s cubic-bezier(.16,1,.3,1), transform 1.05s cubic-bezier(.16,1,.3,1); }
.reveal.d1 { transition-delay: .10s; }
.reveal.d2 { transition-delay: .20s; }
.reveal.d3 { transition-delay: .30s; }
.reveal.d4 { transition-delay: .40s; }

/* ─────────────────────────────────────────────────────────
   TITLE WIPE — section titles rise + clip-reveal upward
   ───────────────────────────────────────────────────────── */
.clip-up {
  clip-path: inset(-2% -5% 102% -5%);
  transform: translateY(0.32em);
  transition: clip-path 1.05s cubic-bezier(.16,1,.3,1), transform 1.05s cubic-bezier(.16,1,.3,1);
  will-change: clip-path, transform;
}
.clip-up.in { clip-path: inset(-12% -5% -14% -5%); transform: none; }

/* ─────────────────────────────────────────────────────────
   UNVEIL — images scale 1.08 → 1.0 behind a clipping frame
   (shadow lives on the frame so it is never clipped away)
   ───────────────────────────────────────────────────────── */
.unveil { overflow: hidden; border-radius: var(--r-img); box-shadow: var(--shadow-soft); }
.unveil img { display: block; width: 100%; border-radius: 0; box-shadow: none;
  transform: scale(1.085); transition: transform 1.6s cubic-bezier(.16,1,.3,1); will-change: transform; }
.unveil.in img { transform: scale(1); }

/* ============================================================
   HERO CINEMA
   ============================================================ */
.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero .hero-parallax { position: absolute; inset: -10% 0; z-index: 0; will-change: transform; }
.hero .hero-parallax img {
  width: 100%; height: 100%; object-fit: cover; object-position: 64% 42%;
}
@media (prefers-reduced-motion: no-preference) {
  .hero .hero-parallax img.kb { animation: kenburns 20s ease-out both; transform-origin: 55% 45%; }
}
@keyframes kenburns { from { transform: scale(1.0); } to { transform: scale(1.10); } }

/* line-by-line headline reveal */
.hero h1 { font-size: clamp(2.8rem, 7.6vw, 6rem); line-height: 0.92; max-width: 16ch; }
.hero h1 .h1-tag { font-size: 0.46em; line-height: 1.06; margin-top: 0.14em; }
.hero h1 .h1-tag em { color: #EAD7B4; }
.reveal-line { display: block; overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.16em; }
.reveal-line > span {
  display: block; transform: translateY(118%);
  transition: transform 1.15s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--i, 0) * 0.14s + 0.15s);
  will-change: transform;
}
.hero.lead-in .reveal-line > span { transform: none; }

/* staggered rise for eyebrow / sub / buttons / badge */
.hero .hero-rise {
  opacity: 0; transform: translateY(28px);
  transition: opacity 1s ease, transform 1.1s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--i, 0) * 0.11s + 0.35s);
  will-change: transform, opacity;
}
.hero.lead-in .hero-rise { opacity: 1; transform: none; }

.hero-inner { will-change: transform, opacity; z-index: 3; }
.scroll-cue { transition: opacity .5s ease; }

/* guaranteed text scrim behind hero copy — a real element so it renders
   predictably and stays legible under ANY imagery tweak. Directional:
   deep at the bottom-left where the type lives, airy toward upper-right. */
.hero-scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to top,
      rgba(12,16,9,0.90) 0%,
      rgba(12,16,9,0.62) 38%,
      rgba(12,16,9,0.34) 62%,
      rgba(12,16,9,0.12) 84%,
      rgba(12,16,9,0) 96%),
    linear-gradient(105deg,
      rgba(12,16,9,0.62) 0%,
      rgba(12,16,9,0.34) 48%,
      rgba(12,16,9,0) 74%);
}
.hero .eyebrow { text-shadow: 0 1px 18px rgba(0,0,0,0.5); }
.hero-sub { text-shadow: 0 1px 22px rgba(0,0,0,0.5); }
.hero h1 { text-shadow: 0 3px 44px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.35); }

/* ============================================================
   PINNED SCROLLYTELLING — Geschichte
   media pins; text beats scroll past and drive a crossfade
   ============================================================ */
.scrolly { position: relative; }
.scrolly-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 110px);
  align-items: start;
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--pad-x);
}
.scrolly-media { position: sticky; top: 0; height: 100vh; height: 100svh;
  display: flex; align-items: center; }
.sm-frame {
  position: relative; width: 100%; aspect-ratio: 4 / 5;
  border-radius: var(--r-img); overflow: hidden; box-shadow: var(--shadow-soft);
}
.sm-frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.07);
  transition: opacity 1.1s ease, transform 1.7s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.sm-frame img.show { opacity: 1; transform: scale(1); }
.sm-est {
  position: absolute; left: 22px; bottom: 18px; z-index: 2;
  font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1;
  color: #FCF9F1; font-weight: 500; letter-spacing: .02em;
  text-shadow: 0 2px 24px rgba(0,0,0,.45);
  display: flex; align-items: baseline; gap: 12px;
}
.sm-est small { font-family: var(--sans); font-size: 11px; letter-spacing: .26em;
  text-transform: uppercase; font-weight: 600; color: #E9D8B6; }

.scrolly-text { padding: 30vh 0 34vh; display: flex; flex-direction: column; gap: 38vh; }
.beat {
  opacity: .22; transform: translateY(20px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.beat.active { opacity: 1; transform: none; }
.beat h3 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 14px; }
.beat .lead { margin-bottom: 0; }
.beat .signature { margin-top: 30px; }

@media (max-width: 860px) {
  .scrolly-grid { grid-template-columns: 1fr; gap: 0; }
  .scrolly-media { height: 62vh; top: 56px; margin-bottom: 6vh; }
  .sm-frame { aspect-ratio: 3 / 4; }
  .scrolly-text { padding: 4vh 0 8vh; gap: 16vh; }
  .beat { opacity: 1; transform: none; } /* legible without the pin choreography */
}

/* ============================================================
   MICRO-INTERACTIONS
   ============================================================ */
/* magnetic / lift buttons (JS nudges --mx/--my within a tiny range) */
.btn { will-change: transform; }
.btn[data-magnetic] { transform: translate3d(var(--mx, 0), var(--my, 0), 0); }
.btn[data-magnetic]:hover { transform: translate3d(var(--mx, 0), calc(var(--my, 0) - 2px), 0); }

/* gallery: calmer zoom */
.gal-item img { transition: transform 1s cubic-bezier(.16,1,.3,1), filter .5s ease; }
.gal-item:hover img { transform: scale(1.03); }

/* highlight cards: image scales in on reveal, gentle on hover */
.hl-card img { transform: scale(1.12); transition: transform 1.7s cubic-bezier(.16,1,.3,1); }
.hl-card.in img { transform: scale(1); }
.hl-card.in:hover img { transform: scale(1.05); }
.hl-card { transition: transform .6s cubic-bezier(.16,1,.3,1), box-shadow .6s ease; }
.hl-card:hover { transform: translateY(-6px); box-shadow: 0 34px 70px -30px rgba(28,28,26,.5); }

/* closing parallax layer */
.closing-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.closing .closing-parallax { position: absolute; inset: -11% 0; z-index: 0; will-change: transform; }
.closing .closing-parallax img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.closing-inner > .wrap > * { will-change: transform, opacity; }

/* lightbox: fade + scale in */
.lightbox img { transform: scale(.92); transition: transform .45s cubic-bezier(.16,1,.3,1); }
.lightbox.open img { transform: scale(1); }

/* ============================================================
   SEAMLESS SEAMS — soft cream ↔ cream-2 transitions
   ============================================================ */
.bg-cream2 { position: relative; }
.bg-cream2::before, .bg-cream2::after {
  content: ""; position: absolute; left: 0; right: 0; height: 140px;
  pointer-events: none; z-index: 0;
}
.bg-cream2::before { top: 0;    background: linear-gradient(to bottom, var(--cream), transparent); }
.bg-cream2::after  { bottom: 0; background: linear-gradient(to top,    var(--cream), transparent); }
.bg-cream2 > .wrap { position: relative; z-index: 1; }

/* ============================================================
   REDUCED MOTION — show everything, animate nothing
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .clip-up { clip-path: none !important; transform: none !important; }
  .unveil img, .hl-card img, .sm-frame img { transform: none !important; }
  .sm-frame img { opacity: 0; }
  .sm-frame img.show { opacity: 1; }
  .reveal-line > span { transform: none !important; }
  .hero .hero-rise { opacity: 1 !important; transform: none !important; }
  .beat { opacity: 1 !important; transform: none !important; }
  .hero .hero-parallax, .closing .closing-parallax { transform: none !important; }
}

/* ============================================================
   SZENEN — scroll-scrubbed full-bleed showcase (iPhone-style)
   ============================================================ */
.showcase { position: relative; height: 360vh; background: var(--ink); }
.showcase-stage {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  overflow: hidden; background: var(--ink);
}
.scene { position: absolute; inset: 0; opacity: 0; will-change: opacity; }
.scene[data-scene="0"] { opacity: 1; }
.scene-media { position: absolute; inset: 0; overflow: hidden; }
.scene-media img { width: 100%; height: 100%; object-fit: cover; will-change: transform; transform: scale(1.04); }
.scene::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,13,8,0.82) 0%, rgba(11,13,8,0.30) 42%, rgba(11,13,8,0.18) 68%, rgba(11,13,8,0.42) 100%);
}
.scene-caption {
  position: absolute; left: 0; right: 0; bottom: 15vh; z-index: 2;
  text-align: center; padding: 0 8vw; will-change: transform;
}
.sc-idx {
  display: inline-block; font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase; color: #E9D8B6; margin-bottom: 20px;
}
.scene-caption h2 {
  color: #FCF9F1; font-size: clamp(2.4rem, 6.2vw, 5.6rem); line-height: 1.04;
  font-weight: 500; margin: 0 0 16px; text-shadow: 0 3px 40px rgba(0,0,0,0.4);
}
.scene-caption p {
  color: rgba(255,255,255,0.86); font-size: clamp(1.05rem, 1.6vw, 1.32rem);
  line-height: 1.6; max-width: 46ch; margin: 0 auto; text-shadow: 0 1px 20px rgba(0,0,0,0.4);
}
.showcase-progress {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 6vh; z-index: 3;
  display: flex; gap: 10px;
}
.showcase-progress span {
  width: 40px; height: 2px; border-radius: 2px; background: rgba(255,255,255,0.28);
  overflow: hidden; position: relative;
}
.showcase-progress span::after {
  content: ""; position: absolute; inset: 0; background: var(--brass);
  transform: scaleX(0); transform-origin: left; transition: transform .2s linear;
}
.showcase-progress span.on::after { transform: scaleX(1); }
@media (max-width: 600px) { .showcase-progress span { width: 26px; } }

@media (prefers-reduced-motion: reduce) {
  .showcase { height: auto; }
  .showcase-stage { position: relative; height: 100vh; }
  .scene { opacity: 0; }
  .scene[data-scene="0"] { opacity: 1; }
  .scene-media img { transform: none !important; }
  .scene-caption { transform: none !important; }
}

/* ============================================================
   STATEMENT — pinned sentence, words light up on scroll,
   background image expands (Apple "expand")
   ============================================================ */
.statement { position: relative; height: 230vh; background: var(--ink); }
.statement-stage {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.statement-bg { position: absolute; inset: 0; overflow: hidden; }
.statement-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.45; transform: scale(1); will-change: transform; }
.statement-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,12,8,0.66), rgba(10,12,8,0.5)); }
.statement-line {
  position: relative; z-index: 2; max-width: 18ch; text-align: center;
  font-family: var(--serif); font-weight: 500; color: #FCF9F1;
  font-size: clamp(2.4rem, 6.4vw, 6rem); line-height: 1.06; letter-spacing: -0.02em;
  padding: 0 6vw; margin: 0; text-shadow: 0 2px 40px rgba(0,0,0,0.4);
}
.statement-line span { display: inline-block; opacity: 0.16; transition: opacity .35s ease; }
.statement-line span.lit { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .statement { height: auto; }
  .statement-stage { position: relative; height: 80vh; }
  .statement-bg img { transform: none !important; }
  .statement-line span { opacity: 1 !important; }
}