/*
  Animationen – reines CSS, kein JavaScript.
  Scroll-gesteuerte Effekte stehen in @supports-Blöcken: Browser ohne Unterstützung
  zeigen einfach die fertige Seite. Bei „Bewegung reduzieren“ ist alles abgeschaltet.
  Scroll-Effekte laufen in beide Richtungen (beim Hoch- wie beim Runterscrollen).
*/

:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

/* Seitenwechsel (Startseite ↔ Datenschutz) weich überblenden */

@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vt-out .3s var(--ease-in-out) both; }
::view-transition-new(root) { animation: vt-in .7s var(--ease-out) both; }

@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; translate: 0 2rem; } }

/* Kopfbereich: Auftritt beim Laden – die Zeilen steigen aus ihrer Maske */

.hero-title .word { animation: rise 1.3s var(--ease-out) .1s both; }
.hero-title .line:nth-child(2) .word { animation-delay: .22s; }
.hero-meta,
.hero-foot { animation: fade-up 1s var(--ease-out) .6s both; }

@keyframes rise    { from { translate: 0 105%; } }
@keyframes fade-up { from { opacity: 0; translate: 0 1rem; } }

/* Links: Linie zieht von links ein, beim Verlassen nach rechts raus */

.site-nav a,
.footer-row a {
  background: linear-gradient(currentColor 0 0) no-repeat 100% 100% / 0 1px;
  transition: background-size .5s var(--ease-out);
}
.site-nav a:hover,
.footer-row a:hover,
.site-nav a:focus-visible,
.footer-row a:focus-visible {
  background-size: 100% 1px;
  background-position: 0 100%;
}

.button { transition: scale .4s var(--ease-out); }
.button:hover { scale: 1.04; }

/* Galerie: Foto zoomt beim Hovern im Rahmen */
.gallery .frame > * { transition: scale 1.2s var(--ease-out); }
.gallery figure:hover .frame > * { scale: 1.05; }

/* Lesefortschritt: Haarlinie am oberen Rand */

.scroll-progress { display: none; }

@supports (animation-timeline: scroll()) {
  .scroll-progress {
    display: block;
    position: fixed;
    inset: 0 0 auto;
    z-index: 30;
    height: 2px;
    background: linear-gradient(90deg, var(--hazel-ink), var(--toffee-ink));
    transform-origin: 0 50%;
    animation: grow-x linear both;
    animation-timeline: scroll(root);
  }

  /* Navigation bekommt beim Scrollen eine Haarlinie */
  .nav-bar {
    animation: nav-line linear both;
    animation-timeline: scroll(root);
    animation-range: 0 80px;
  }
}

@keyframes grow-x { from { transform: scaleX(0); } }
@keyframes nav-line { to { box-shadow: 0 1px 0 var(--line); } }

/* Scroll-gesteuert */

@supports (animation-timeline: view()) {

  /* Kopfbereich: Zeilen driften beim Runterscrollen auseinander */
  .hero { view-timeline: --hero; }
  .hero-title .line {
    animation: drift-left linear both;
    animation-timeline: --hero;
    animation-range: exit 0% exit 100%;
  }
  .hero-title .line:nth-child(2) { animation-name: drift-right; }

  /* Überschriften steigen aus der Maske – unten herein, oben hinaus */
  .mask { view-timeline: --mask; }
  .mask > span {
    animation: mask-rise linear both;
    animation-timeline: --mask;
  }

  /* Texte blenden ein und aus */
  .reveal {
    animation: fade-io linear both;
    animation-timeline: view();
  }

  /* Fotos: Vorhang öffnet sich nach oben, Bild läuft im Rahmen mit (Parallax) */
  .profile-media {
    view-timeline: --media;
    animation: wipe linear both;
    animation-timeline: --media;
  }
  .profile-media > * {
    scale: 1.15;
    animation: parallax linear both;
    animation-timeline: --media;
  }

  /* Steckbrief-Zeilen: Linie zeichnet sich, Inhalt gleitet herein */
  .facts > div {
    view-timeline: --row;
    animation: fade-io linear both;
    animation-timeline: --row;
  }
  .facts > div::before,
  .facts > div:last-child::after {
    animation: draw linear both;
    animation-timeline: --row;
  }

  /* Illustration „Zusammen“: Ebenen bewegen sich unterschiedlich schnell (Tiefe) */
  .story-art { view-timeline: --art; }
  .art-sun,
  .art-hills,
  .art-cat {
    animation: art-depth linear both;
    animation-timeline: --art;
  }
  .art-sun          { --depth: 46px; }
  .art-hills--far   { --depth: 26px; }
  .art-hills--mid   { --depth: 14px; }
  .art-hills--near  { --depth: 0px; }
  .art-cat {
    animation-name: art-cat;
    animation-range: entry 20% cover 50%;
  }
  .art-cat--hazel { animation-range: entry 35% cover 55%; }

  /* Wortmarke im Footer */
  .footer-mark { view-timeline: --mark; }
  .footer-mark span {
    animation: rise linear both;
    animation-timeline: --mark;
    animation-range: entry 0% entry 100%;
  }
  .footer-mark span:last-child { animation-range: entry 30% entry 100%; }
}

/* Farbwelten: Der Seitenhintergrund blendet beim Scrollen fließend in die Farbe der Katze,
   deren Abschnitt gerade im Bild ist. Drei feste Ebenen hinter dem Inhalt, gesteuert von den
   View-Timelines der Abschnitte. Ohne Unterstützung haben die Abschnitte feste Hintergründe. */
@supports (timeline-scope: --a) and (animation-timeline: view()) {
  body { timeline-scope: --cat-hazel, --cat-toffee, --cat-both; }

  .profile--hazel  { view-timeline: --cat-hazel; background: transparent; }
  .profile--toffee { view-timeline: --cat-toffee; background: transparent; }

  .tint {
    display: block;
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    animation: tint linear both;
  }
  .tint--hazel  { background: var(--hazel-bg);  animation-timeline: --cat-hazel; }
  .tint--toffee { background: var(--toffee-bg); animation-timeline: --cat-toffee; }

  /* „Zusammen“: beide Farbwelten als Verlauf, der beim Scrollen von warm nach kühl wandert */
  .story { view-timeline: --cat-both; background: transparent; }
  .tint--both {
    background: linear-gradient(110deg, var(--hazel-bg) 15%, var(--toffee-bg) 85%);
    background-size: 200% 100%;
    animation: tint linear both, story-shift linear both;
    animation-timeline: --cat-both, --cat-both;
  }
}

@keyframes tint {
  entry 0%   { opacity: 0; }
  entry 60%  { opacity: 1; }
  exit 40%   { opacity: 1; }
  exit 100%  { opacity: 0; }
}

@keyframes story-shift {
  from { background-position: 0% 0; }
  to   { background-position: 100% 0; }
}

/* Galerie: vertikales Scrollen bewegt die Bilder horizontal.
   Nur auf breiten Bildschirmen im Querformat und ohne „Bewegung reduzieren“ – sonst
   (Handy, Tablet hochkant) bleibt es eine wischbare Leiste. */
@media (min-width: 48rem) and (orientation: landscape) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .gallery-section {
      height: 220vh;
      padding-block: 0;
      view-timeline: --gallery;
    }
    .gallery-sticky {
      position: sticky;
      top: 0;
      height: 100vh;
      height: 100svh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      /* Platz für die Navigation oben */
      padding-top: 4.5rem;
      padding-bottom: 1.5rem;
      overflow: clip;
      container-type: inline-size;
    }
    .gallery-sticky > * { flex-shrink: 0; }
    .gallery {
      width: max-content;
      overflow: visible;
      scroll-snap-type: none;
      animation: gallery-x linear both;
      animation-timeline: --gallery;
      animation-range: contain 0% contain 100%;
    }
    .gallery .frame > * {
      scale: 1.12;
      animation: pan linear both;
      animation-timeline: --gallery;
      animation-range: contain 0% contain 100%;
    }
    .gallery figure:hover .frame > * { scale: 1.17; }

    .gallery-progress { display: block; }
    .gallery-progress::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--hazel-ink), var(--toffee-ink));
      transform-origin: left;
      animation: grow-x linear both;
      animation-timeline: --gallery;
      animation-range: contain 0% contain 100%;
    }
  }
}

@keyframes drift-left  { to { transform: translateX(-12vw); opacity: .15; } }
@keyframes drift-right { to { transform: translateX(12vw); opacity: .15; } }

@keyframes mask-rise {
  entry 0%   { translate: 0 105%; }
  entry 100% { translate: 0 0; }
  exit 0%    { translate: 0 0; }
  exit 100%  { translate: 0 -105%; }
}

@keyframes fade-io {
  entry 0%   { opacity: 0; translate: 0 1.5rem; }
  entry 100% { opacity: 1; translate: 0 0; }
  exit 0%    { opacity: 1; translate: 0 0; }
  exit 100%  { opacity: 0; translate: 0 -1.5rem; }
}

@keyframes wipe {
  entry 0%  { clip-path: inset(100% 0 0 0); }
  entry 85% { clip-path: inset(0); }
  exit 15%  { clip-path: inset(0); }
  exit 100% { clip-path: inset(0 0 100% 0); }
}

@keyframes art-depth {
  from { translate: 0 var(--depth); }
  to   { translate: 0 calc(var(--depth) * -1); }
}

@keyframes art-cat {
  from { opacity: 0; translate: 0 14px; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes parallax {
  from { translate: 0 -6%; }
  to   { translate: 0 6%; }
}

@keyframes draw {
  entry 0%   { transform: scaleX(0); }
  entry 100% { transform: scaleX(1); }
}

@keyframes gallery-x { to { transform: translateX(calc(-100% + 100cqw)); } }

@keyframes pan {
  from { translate: 5% 0; }
  to   { translate: -5% 0; }
}

/* Bewegung reduzieren: alles aus */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  .scroll-progress { display: none; }
  /* ohne Animation keine überblendenden Farbebenen, sondern feste Abschnittsfarben */
  .tint { display: none !important; }
  .profile { background: var(--section-bg) !important; }
  .story { background: linear-gradient(110deg, var(--hazel-bg) 15%, var(--toffee-bg) 85%) !important; }
}