@font-face {
  font-family: "Graze";
  src: url("../assets/fonts/Graze-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* GLOBAL */
* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: hidden;            /* <- verhindert echtes Runterscrollen */
  overscroll-behavior: none;
}

body {
  margin: 0;
  font-family: "Graze", system-ui, sans-serif;
  background: #000;
  color: #fff;
}

.layout {
  width: 100%;
}

#story {
  display: flex;
  flex-direction: column;
}

/* INTRO */
.intro-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  z-index: 10000;
  opacity: 1;
  visibility: visible;
  animation: intro-fade-out 1s ease forwards;
  animation-delay: 3.5s;
}

.intro-screen h1 {
  color: #fff;
  font-size: clamp(2.8rem, 7vw, 4.8rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  opacity: 0;
  transform: translateY(12px);
  animation: intro-title-in 1.4s ease forwards;
  animation-delay: 0.8s;
}

@keyframes intro-title-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes intro-fade-out {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

body.intro-active .sound-btn{
  top: 55%;
  left: 50%;
  right: auto;

  transform: translateX(-50%);
  opacity: 0.9;
}
x
body.intro-active .sound-btn{
  transition-delay: 0.4s;
}

/* STEPS / BILDER – Grundlayout */
.step {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: grid;
  align-content: center;
  padding: 6vh 6vw;
  overflow: hidden;
}

.step img {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -2;
}

/* Dunkler Verlauf für Lesbarkeit */
.step::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.65) 0%,
    rgba(0,0,0,0.25) 35%,
    rgba(0,0,0,0) 60%
  );
  z-index: -1;
}

.step h2 {
  position: absolute;
  top: 6vh;      
  left: 6vw;     
  z-index: 4;

  font-size: 3rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0.55;
  margin: 0;
}

.text-layer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10vh;

  z-index: 3;
  text-align: center;
}

.text-layer p {
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  line-height: 1.32;
  letter-spacing: 0.03em;

  max-width: 26ch;
  margin: 0;
}

/* ILLUSTRATIONEBENE */
.illustration-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

/* MOBILE */
@media (max-width: 900px) {
  .step {
    padding: 4vh 5vw;
  }

  .text-layer h2 {
    font-size: 1.4rem;
  }
}

/* --- CINEMATIC SCROLL REVEAL --- */

/* CINEMATIC + MOTION BLUR */
.step {
  background: #fff;
  opacity: 0;
  transform: translateY(80px);
  filter: blur(8px);
  transition:
    opacity 2.4s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 2.4s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 2.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.step.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0px);
}

/* Nur Hintergrundbild */

.step {
  background: #fff;
  opacity: 0;
  transform: translateY(60px);
  filter: blur(3px);
  transition:
    opacity 1.6s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1.6s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 1.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.step.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0px);
}

/* Hintergrundbild */
.step > img {
  opacity: 0;
  transform: scale(1.02) translateY(8px);
  filter: blur(4px);
  transition:
    opacity 1.8s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1.8s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 1.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.step.is-visible > img {
  opacity: 1;
  transform: scale(1) translateY(0);
  filter: blur(0px);
}

/* Text */
.text-layer {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(2px);
  transition:
    opacity 1.4s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.step.is-visible .text-layer {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0px);
  transition-delay: 0.2s;
}

.illustration-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 1;
  transform: none;
  transition: none;
}

.illu{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;

  opacity: 0;
  filter: blur(4px);

  transition:
    opacity 1.6s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1.6s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 1.6s cubic-bezier(0.22, 0.61, 0.36, 1);

  transition-delay: 0.25s;
}
/* Capitolo 2: von links rein – langsam */
.handschuh-nah{
  transform: translateX(-90px);
  opacity: 0;
  filter: blur(5px);

  transition:
    transform 2.8s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 2.2s ease,
    filter 2.2s ease;

  transition-delay: 0.25s;
}

/* Wenn Step sichtbar: reinfahren */
.step.is-visible .handschuh-nah{
  opacity: 1;
  transform: translate(0, 0);
  filter: blur(0);
}

/* Capitolo 3: von oben langsam */
.handschuh-aufheben{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;

  opacity: 0;
  transform: translateY(-120px);
  filter: blur(6px);

  transition:
    transform 2.8s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 2.2s ease,
    filter 2.2s ease;
}

.step.is-visible .handschuh-aufheben{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Capitolo 4: von links rein */
.cap3-left{
    transform: translateX(-90px);
}

/* Wenn Step sichtbar: reinfahren */
.step.is-visible .illu{
  opacity: 1;
  transform: translate(0, 0);
  filter: blur(0);
}

/* Capitolo 5: weg ins Brocki */
.from-bottom-first{
  transform: translateY(140px);
  transition-delay: 0.25s;
}
.from-bottom-right-late{
  transform: translate(140px, 140px);
  transition-delay: 0.65s;
}
.step.is-visible .illu{
  opacity: 1;
  transform: translate(0, 0);
  filter: blur(0);
}
/* Capitolo 6: von links rein */
.illu{
    transform: translateX(-90px);
}

/* Wenn Step sichtbar: reinfahren */
.step.is-visible .eingang-ins-brocki{
  opacity: 1;
  transform: translate(0, 0);
  filter: blur(0);
}

/* Capitolo 7: entgegenkommen */
.frau-an-kasse{
  transform: translateX(140px) scale(0.98);
}

.mann-an-kasse{
  transform: translateX(-140px) scale(0.98);
}

.step.is-visible .illu{
  opacity: 1;
  transform: translateX(0) scale(1);
  filter: blur(0);
}
/* Capitolo 8: frau im treppenhaus */
.frau-treppe-hoch{
 transition:
    transform 2.8s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 2.2s ease,
    filter 2.2s ease;
}

.step.is-visible .illu{
  opacity: 1;
  transform: translate(0, 0) scale(1);
  filter: blur(0);
}

/* Capitolo 8: frau mit kiste */
.frau-mit-kiste{
    transform: translateX(-90px);
}

/* Wenn Step sichtbar: reinfahren */
.step.is-visible .illu{
  opacity: 1;
  transform: translate(0, 0);
  filter: blur(0);
}

/* Capitolo 9: frau auf sofa */
.frau-auf-sofa{
  transform: translateY(180px) scale(0.97);
}

.step.is-visible .illu{
  opacity: 1;
  transform: translate(0, 0) scale(1);
  filter: blur(0);
}

/* Capitolo 10: frau auf sofa over-shoulder*/
.frau-over-shoulder{
  transform: translateY(180px) scale(0.97);
}

.step.is-visible .illu{
  opacity: 1;
  transform: translate(0, 0) scale(1);
  filter: blur(0);
}

/* Capitolo 12: frau im spiegel */
.frau-im-spiegel{
  transform: translateY(180px) scale(0.97);
}

.step.is-visible .illu{
  opacity: 1;
  transform: translate(0, 0) scale(1);
  filter: blur(0);
}

/* Capitolo 13 – Autoren */
.laura{
  width: 40%;
  height: auto;
  bottom: 10%;
  left: 10%;
  top: auto;
  transform: translateY(40px);
}

.selina{
  width: 40%;
  height: auto;
  bottom: 0;
  right: 10%;
  top: auto;
  transform: translateY(40px);
}

/* Autoren-Namen */
.author-name{
  position: absolute;
  bottom:12%;              /* Bauchhöhe */
  font-size: 2rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0.85;
  color: #fff;
  pointer-events: none;
}

/* links / rechts ausrichten */
.author-laura{
  left: 27%;
}

.author-selina{
  right: 27%;
  text-align: right;
}

/* Frau: cinematic reveal wie das Hintergrundbild */
.frau {
  position: absolute;      
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;     
  pointer-events: none;

  opacity: 0;
  transform: translateY(60px);
  filter: blur(4px);

  transition:
    opacity 1.8s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1.8s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 1.8s cubic-bezier(0.22, 0.61, 0.36, 1);

  transition-delay: 0.25s;
}

.step.is-visible .frau {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.text-layer p {
  font-size: clamp(1.85rem, 3vw, 2.75rem);
  line-height: 1.28;
  letter-spacing: 0.03em;

  max-width: 24ch;
  margin: 0 auto;
}

.text-layer .focus {
  display: inline-block;
  margin-top: 0.35em;

  font-size: 1.3em;
  letter-spacing: 0.16em;
  text-transform: uppercase;

  opacity: 0.95;
}

.text-layer h2 {
  position: absolute;
  top: -75vh;             
  left: 6vw; 
  font-size: 2.5rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0.5;

  margin-bottom: 1rem;
}

/* --- SINGLE PANEL (NO SCROLL) SETUP --- */
.panel-group{
  position: relative;
  height: 100vh;
}

.stage{
  position: relative;   /* <- nicht sticky */
  height: 100vh;
  overflow: hidden;
}

/* Steps liegen übereinander */
.stage .step{
  position: absolute;
  inset: 0;
  min-height: 100vh;
}

/* Nur 1 Step aktiv */
.stage .step{
  opacity: 0;
  pointer-events: none;
}

.stage .step.is-visible{
  opacity: 1;
  pointer-events: auto;
}

.sound-btn{
  position: fixed;
  top: 40px;
  right: 50px;
  z-index: 20000;

  width: 90px;
  height: 90px;

  padding: 0;
  border-radius: 999px;

  display: grid;
  place-items: center;

  opacity: 0.85;
  backdrop-filter: blur(6px);

  transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.sound-btn:active{
  transform: translateY(1px);
}

.sound-btn img{
  width: 90px;
  height: 90px;
  display: block;
}

.sound-btn{
  background: transparent;
  border: none;
  backdrop-filter: none;
}

/* =========================
   MOBILE – CLEAN BLOCK (keine Transform-Killer)
========================= */
@media (max-width: 768px){

  /* =========================
     TYPO + UI
  ========================= */

  /* INTRO TITLE */
  .intro-screen h1{
    font-size: clamp(1.8rem, 7vw, 2.6rem);
    letter-spacing: 0.12em;
    line-height: 1.15;
  }

  /* Kapitel-Titel */
  .step h2{
    font-size: 1.4rem;
    letter-spacing: 0.18em;
    top: 4vh;
    left: 5vw;
  }

  /* Text unten */
  .text-layer{
    bottom: 8vh;
    padding: 0 6vw;
  }

  .text-layer p{
    font-size: 1.15rem;
    line-height: 1.35;
    max-width: 100%;
    letter-spacing: 0.02em;
  }

  /* Autoren-Namen */
  .author-name{
    font-size: 1rem;
    letter-spacing: 0.2em;
    bottom: 10%;
  }

  /* Sound Button */
  .sound-btn{
    width: 64px;
    height: 64px;
    top: 16px;
    right: 16px;
  }

  .sound-btn img{
    width: 32px;
    height: 32px;
  }

  .step{
    background: transparent;
  }

  /* Background: minimal überziehen */
  .step > img{
    width: 104% !important;
    height: 104% !important;
    left: -2% !important;
    top: -2% !important;

    object-fit: cover !important;
    object-position: 50% 50% !important;

  }


  /* =========================
     CAPITOLO 1 – Frau im Fokus (ohne schwebend)
  ========================= */

  .stage > .step:nth-of-type(1) .illustration-layer{
    overflow: hidden;
  }

  .stage > .step:nth-of-type(1) img.frau{
    top: auto !important;
    bottom: -2vh !important;
    left: 0 !important;
    right: 0 !important;

    width: 180% !important;
    height: 200% !important;

    object-fit: contain !important;
    object-position: left bottom !important;

  }


  /* =========================
     CAPITOLO 4/5/6 – Illu leicht runter
  ========================= */

  .stage .step:nth-of-type(4) .illustration-layer{ transform: translateY(4%); }
  .stage .step:nth-of-type(5) .illustration-layer{ transform: translateY(8%); }
  .stage .step:nth-of-type(6) .illustration-layer{ transform: translateY(5%); }


  /* =========================
     CAPITOLO 8 – Background + Illu müssen matchen
  ========================= */

  .stage .step:nth-of-type(8){
    overflow: hidden;
  }

  .stage .step:nth-of-type(8) > img{
    width: 108% !important;
    height: 108% !important;
    left: -4% !important;
    top: -4% !important;

    object-fit: cover !important;
    object-position: 55% 35% !important;
  }

  .stage .step:nth-of-type(8) .illu.frau-treppe-hoch{
    width: 108% !important;
    height: 108% !important;
    left: -4% !important;
    top: -4% !important;

    object-fit: cover !important;
    object-position: 55% 35% !important;

  }


  @media (max-width: 768px){

  /* CAPITOLO 9 – Background + Illu MATCH */
  .stage .step:nth-of-type(9){
    overflow: hidden;
  }
  .stage .step:nth-of-type(9) > img{
    width: 106% !important;
    height: 106% !important;
    left: -3% !important;
    top: -3% !important;

    object-fit: cover !important;
    object-position: 47% 50% !important; 
  }

  .stage .step:nth-of-type(9) .illu{
    width: 400% !important;
    height: 106% !important;
    left: -142% !important;
    top: -3% !important;

    object-fit: contain !important;
  }
  .stage .step:nth-of-type(9) .illustration-layer{
    transform: translateY(3%);
  }

}

  /* =========================
     CAPITOLO 10 – Illu etwas runter
  ========================= */

  .stage .step:nth-of-type(10) .illustration-layer{
    transform: translateY(6%);
  }


  /* =========================
     CAPITOLO 12 – Frau im Spiegel frei positionierbar 
  ========================= */

  .stage .step:nth-of-type(12) .illu.frau-im-spiegel{
    inset: auto !important;
    width: 300% !important;
    height: auto !important;

    left: -40% !important;
    bottom: -3% !important;

    object-fit: contain !important;
  }


  /* =========================
     CAPITOLO 13 – Autoren: sichtbar & kleiner + Namen kleiner
  ========================= */

  .stage .step.authors{
    overflow: hidden;
  }

  .stage .step.authors .illu.laura,
  .stage .step.authors .illu.selina{
    inset: auto !important;
    height: auto !important;
    width: 240% !important;
    bottom: -2% !important;
    object-fit: contain !important;
  }

  .stage .step.authors .illu.laura{
    left: -50% !important;
  }

  .stage .step.authors .illu.selina{
    right: -50% !important;
  }

  .stage .step.authors .author-name{
    font-size: 1.1rem !important;
    letter-spacing: 0.14em !important;
    bottom: 14% !important;
  }

  .stage .step.authors .author-laura{ left: 22% !important; }
  .stage .step.authors .author-selina{ right: 22% !important; }

}