/* ============================================
   HOFZWANZIG Animation States
   Redesign "Elbufer" — Phase 1
   GSAP ScrollTrigger initial states + CSS transitions
   ============================================ */

/* ---- GSAP INITIAL STATES ---- */
/* These classes set the "before" state. GSAP animates TO the final state. */

.fade-up {
  opacity: 0;
  transform: translateY(30px);
}

.fade-in {
  opacity: 0;
}

.fade-left {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-right {
  opacity: 0;
  transform: translateX(30px);
}

.scale-in {
  opacity: 0;
  transform: scale(0.95);
}

/* Reveal: uses transform + opacity instead of clip-path.
   clip-path triggers PAINT. transform + opacity are compositor-only. */
.clip-reveal {
  opacity: 0;
  transform: translateX(-40px) scale(0.97);
  transition: none; /* GSAP handles timing */
}
.clip-reveal--bottom {
  opacity: 0;
  transform: translateY(40px) scale(0.97);
}
.clip-reveal--left {
  opacity: 0;
  transform: translateX(40px) scale(0.97);
}

/* ---- ANIMATED STATE (after GSAP triggers) ---- */
/* Fallback for no-JS: show everything */
.no-js .fade-up,
.no-js .fade-in,
.no-js .fade-left,
.no-js .fade-right,
.no-js .scale-in,
.no-js .clip-reveal,
.no-js .clip-reveal--bottom,
.no-js .clip-reveal--left {
  opacity: 1;
  transform: none;
}

/* ---- CSS-ONLY TRANSITIONS (no GSAP needed) ---- */

/* Header: glass-to-solid + hide on scroll down */
.site-header {
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1),
              background 300ms ease,
              padding 300ms ease,
              box-shadow 300ms ease,
              border-color 300ms ease;
}
.site-header.site-header--scrolled {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
  padding-top: var(--space-3xs);
  padding-bottom: var(--space-3xs);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.site-header--hidden {
  transform: translateY(-100%);
}

/* Native smooth scroll for anchor links */
html { scroll-behavior: smooth; }

/* Image warm overlay on hover */
.img-warm-hover {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
}
.img-warm-hover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--overlay-warm);
  opacity: 0;
  transition: opacity var(--transition-slow);
  pointer-events: none;
}
.img-warm-hover:hover::after {
  opacity: 0.15;
}

/* Staggered children animation helper */
.stagger > * {
  opacity: 0;
  transform: translateY(20px);
}


/* ---- STUFE 1: IMAGE HOVER ZOOM ---- */
.img-hover-zoom {
  overflow: hidden;
}
.img-hover-zoom img,
.img-hover-zoom .triptych__image {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.img-hover-zoom:hover img,
.img-hover-zoom:hover .triptych__image {
  transform: scale(1.05);
}

/* ---- STUFE 1: SCROLL INDICATOR PULSE ---- */
.scroll-indicator {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: rgba(255,255,255,0.5);
  font-size: 10px;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.scroll-indicator__line {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,0.4);
  position: relative;
  overflow: hidden;
}
.scroll-indicator__line::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  animation: scroll-line 2s ease-in-out infinite;
}
@keyframes scroll-line {
  0% { top: -100%; }
  50% { top: 100%; }
  100% { top: 100%; }
}

/* ---- STUFE 2: SPLIT-WORD INITIAL STATE ---- */
.split-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
}

/* ---- STUFE 3: ENHANCED VIEW TRANSITIONS ---- */
::view-transition-old(root) {
  animation: vt-out 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
::view-transition-new(root) {
  animation: vt-in 350ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes vt-out {
  from { opacity: 1; transform: scale(1); filter: blur(0); }
  to { opacity: 0; transform: scale(0.97); filter: blur(4px); }
}
@keyframes vt-in {
  from { opacity: 0; transform: scale(1.03); filter: blur(4px); }
  to { opacity: 1; transform: scale(1); filter: blur(0); }
}

/* ============================================
   IU SIGNATURE: FILM GRAIN + VIGNETTE
   Analog warmth layer — pure CSS, 0 JS
   ============================================ */
/* Grain: CSS-only noise via tiny repeating background.
   NO SVG feTurbulence (kills compositing budget).
   NO fixed overlay (forces recomposite on every scroll frame). */
.grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  /* Tiny 100x100 noise PNG encoded as data URI — tiles seamlessly */
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAABlBMVEUAAAAAAAClZ7nPAAAAAnRSTlMAGovxNEIAAAA0SURBVHja7c0xDQAACAOw+jfdKRhDH0SBTqJAJ1GgkygoKCgoKCgoKCgoKCgoKCgoKPwPFwPdAAFMnHDqAAAAAElFTkSuQmCC");
  background-repeat: repeat;
  background-size: 100px 100px;
  /* contain: strict isolates this layer — browser doesn't recomposite on scroll */
  contain: strict;
  will-change: auto;
}
/* Hide the SVG inside grain overlay — we use CSS background now */
.grain-overlay svg { display: none; }
.vignette-overlay {
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  background: radial-gradient(
    ellipse 70% 60% at 50% 50%,
    transparent 40%,
    rgba(26, 22, 19, 0.12) 100%
  );
  /* Isolate compositing layer — same fix as grain overlay */
  contain: strict;
  will-change: auto;
}

/* ============================================
   IMAGE DESATURATION → COLOR ON SCROLL
   Images start muted, reveal full color in viewport
   ============================================ */
/* Desaturation: uses opacity-based overlay instead of CSS filter.
   CSS filter triggers PAINT every frame during transition.
   Opacity is compositor-only = GPU-accelerated = 0 jank. */
.img-desat {
  position: relative;
}
.img-desat::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-bg-warm, #f5f0eb);
  opacity: 0.35;
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  border-radius: inherit;
  /* Compositor-only: opacity transition = GPU */
  will-change: opacity;
}
.img-desat.is-colored::after {
  opacity: 0;
}

/* ============================================
   WATERMARK TYPOGRAPHY
   Oversized decorative text behind sections
   ============================================ */
.watermark {
  position: absolute;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  line-height: 0.85;
  color: var(--color-primary);
  opacity: 0.04;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
}
.watermark--left {
  left: -2vw;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(8rem, 18vw, 22rem);
}
.watermark--right {
  right: -2vw;
  top: 30%;
  transform: translateY(-50%);
  font-size: clamp(6rem, 14vw, 18rem);
}
.watermark--center {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(10rem, 22vw, 28rem);
}

/* ============================================
   HORIZONTAL SCROLL GALLERY
   Pinned section with GSAP horizontal scroll
   ============================================ */
.hscroll-section {
  overflow: hidden;
}
.hscroll-section .container {
  position: relative;
  z-index: 1;
}
.hscroll-gallery {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  /* Hide scrollbar but keep functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.hscroll-gallery::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}
.hscroll-gallery__item {
  flex: 0 0 clamp(280px, 30vw, 420px);
  height: clamp(320px, 40vh, 480px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  scroll-snap-align: center;
}
.hscroll-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.hscroll-gallery__item:hover img {
  transform: scale(1.06);
}
.hscroll-gallery__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26,22,19,0.3) 0%, transparent 40%);
  pointer-events: none;
}
/* Counter badge on gallery items */
.hscroll-gallery__counter {
  position: absolute;
  bottom: var(--space-sm);
  left: var(--space-sm);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--type-xl);
  color: rgba(255,255,255,0.6);
  z-index: 2;
  line-height: 1;
}

/* Mobile: gallery items wider for better touch UX */
@media (max-width: 768px) {
  .hscroll-gallery__item {
    flex: 0 0 80vw;
  }
}

/* ============================================
   ENHANCED TRIPTYCH — taller, text-reveal hover
   ============================================ */
.triptych__overlay h3 {
  transform: translateY(0);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.triptych__overlay p {
  transform: translateY(10px);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.05s,
              opacity 0.5s ease 0.05s;
}
.triptych__overlay .btn {
  transform: translateY(15px);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s,
              opacity 0.5s ease 0.1s,
              background 0.3s ease,
              border-color 0.3s ease;
}
.triptych__panel:hover .triptych__overlay p,
.triptych__panel:hover .triptych__overlay .btn {
  transform: translateY(0);
  opacity: 1;
}

/* ============================================
   SECTION TRANSITION CLIPS
   Warm sections overlap previous sections
   ============================================ */
.section--reveal {
  position: relative;
  z-index: 2;
  clip-path: inset(0 0 0 0);
}

/* ---- REDUCED MOTION ---- */
@media (prefers-reduced-motion: reduce) {
  .fade-up,
  .fade-in,
  .fade-left,
  .fade-right,
  .scale-in {
    opacity: 1;
    transform: none;
  }
  .clip-reveal,
  .clip-reveal--bottom,
  .clip-reveal--left {
    opacity: 1;
    transform: none;
  }
  .stagger > * {
    opacity: 1;
    transform: none;
  }
  .hero__bg {
    animation: none;
  }
  .grain-overlay,
  .vignette-overlay {
    display: none;
  }
  .img-desat::after {
    display: none;
  }
  .triptych__overlay p,
  .triptych__overlay .btn {
    opacity: 1;
    transform: none;
    transition: none;
  }
}