/* ============================================================
   Sarella Vargas — Onepager  ·  css/styles.css
   ------------------------------------------------------------
   INHALT
   1. Variablen & Grundlagen        (Farben, Schriften)
   2. Navigation
   3. Prolog & Bühne                (Verse, Spotlight, Zündung)
   4. Inhalt: Sektionen & Anblenden
   5. Showreel (Lichtspalt + eingebettetes Video)
   6. Galerie (Blätter eins–fünf)
   7. Vita
   8. Kontakt & Footer
   9. Mobile & Reduced Motion
   10. Sicherheitsnetz ohne JS
   ------------------------------------------------------------
   Farben/Schriften änderst du oben bei :root — alles andere
   hängt daran. Details: siehe CLAUDE.md
   ============================================================ */

  :root{
    --tief:#0b0b0c; --licht:#f2efe9; --asche:#7c7973; --warm:#f4e8cf;
    --cormorant:'Cormorant', serif; --manrope:'Manrope', sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{background:var(--tief);color:var(--licht);font-family:var(--manrope);font-weight:200;line-height:1.9;letter-spacing:.01em;overflow-x:hidden;
    transition:background 3s ease .8s}
  body.erleuchtet{background:#151318} /* Saallicht: der Raum wird spürbar, bleibt aber Bühne */
  a{color:inherit;text-decoration:none}
  .cap{font-size:.6rem;letter-spacing:.42em;text-transform:uppercase;color:var(--asche);font-weight:300}

  nav{position:fixed;inset:0 0 auto;z-index:70;display:flex;justify-content:space-between;padding:1.6rem 2.4rem;
    opacity:0;transition:opacity 1.4s ease .4s}
  body.erleuchtet nav{opacity:1}
  nav .cap{color:var(--licht);opacity:.7}
  nav a.cap{transition:opacity .3s;margin-left:1.8rem}
  nav a.cap:hover{opacity:1}

  /* ===================== PROLOG & BÜHNE ===================== */
  .buehne{height:100vh;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:default}

  /* Die Verszeilen im Dunkeln */
  .prolog{position:absolute;z-index:20;text-align:center;padding:0 1.4rem;transition:opacity 1.2s ease, transform 1.2s ease}
  .prolog .vers{display:block;overflow:hidden;font-family:var(--cormorant);font-weight:300;
    font-size:clamp(1.7rem,4.6vw,3.4rem);line-height:1.5}
  .prolog .heben{display:inline-block;opacity:0;transform:translateY(60%)}
  .prolog .heben.da{opacity:1;transform:none}
  /* Spannungsbogen: von schwer und langsam zu schnell und knapp */
  .h1z{transition:opacity 2.2s ease, transform 2.2s cubic-bezier(.18,.7,.25,1)}   /* langsam: das Dunkel */
  .h2z{transition:opacity 1s ease, transform 1s cubic-bezier(.2,.75,.2,1)}        /* schneller: der Atem */
  .h3z{transition:opacity .4s ease, transform .4s cubic-bezier(.3,.8,.3,1)}       /* schnell: „und dann:" */
  .h4z{transition:opacity .5s ease, transform .5s cubic-bezier(.2,.9,.25,1.15)}   /* nach der Pause: „Licht." */
  .prolog .vers em{font-style:italic;color:var(--warm)}
  body.erleuchtet .prolog{opacity:0;transform:translateY(-30px);pointer-events:none}
  .ueberspringen{position:absolute;bottom:2rem;z-index:21;font-size:.58rem;letter-spacing:.4em;text-transform:uppercase;
    color:var(--asche);background:none;border:none;cursor:pointer;font-family:var(--manrope);opacity:.7;transition:opacity .3s}
  .ueberspringen:hover{opacity:1}
  body.erleuchtet .ueberspringen{display:none}

  /* Die Figur im Licht (erscheint erst mit dem Spot) */
  .figur{position:relative;z-index:2;text-align:center;opacity:0;transform:scale(.98);transition:opacity 1.6s ease .5s, transform 1.6s ease .5s}
  body.erleuchtet .figur{opacity:1;transform:none}
  .figur .portrait{margin:0 auto 2.2rem;max-width:min(940px,92vw)}
  .figur .portrait img{display:block;width:100%;height:auto;max-height:58vh;object-fit:cover;object-position:center 30%;
    filter:grayscale(1) contrast(1.06) brightness(.96);box-shadow:0 30px 90px rgba(0,0,0,.6)}
  .figur h1{font-family:var(--cormorant);font-weight:300;font-size:clamp(2rem,5.5vw,4.2rem);line-height:1.1;letter-spacing:.03em}
  .figur h1 em{font-style:italic}
  .figur .rolle{margin-top:1.6rem}

  /* Bühnenboden-Reflex unter dem Spot */
  .boden{position:absolute;z-index:1;left:50%;bottom:12%;width:min(560px,80vw);height:90px;transform:translateX(-50%);
    background:radial-gradient(ellipse at center, rgba(244,232,207,.10), transparent 70%);
    opacity:0;transition:opacity 2s ease .8s;filter:blur(6px)}
  body.erleuchtet .boden{opacity:1}

  /* Der Spot selbst: Dunkelmaske mit Loch bei --x/--y, Radius --r */
  .spot{position:absolute;inset:0;z-index:10;pointer-events:none;
    background:radial-gradient(circle var(--r,0px) at var(--x,50%) var(--y,44%),
      transparent 0%, rgba(11,11,12,.55) 72%, rgba(11,11,12,.985) 100%);
    transition:opacity 3s ease .9s}
  /* Nach der Zündung: das Dunkel öffnet sich einen Spalt — wie leises Saallicht */
  body.erleuchtet .spot{opacity:.88}
  /* warmer Lichtkern im Spot */
  .kern{position:absolute;inset:0;z-index:9;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity 1.2s;
    background:radial-gradient(circle calc(var(--r,0px)*.7) at var(--x,50%) var(--y,44%), rgba(244,232,207,.14), transparent 70%)}
  body.erleuchtet .kern{opacity:1}
  /* Streulicht: sehr weicher, breiter Schein, als würde das Licht vom Bühnenboden zurückgeworfen */
  .streu{position:absolute;inset:0;z-index:8;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity 3.5s ease 1.2s;
    background:radial-gradient(circle calc(var(--r,0px)*2.6) at var(--x,50%) var(--y,44%), rgba(244,232,207,.055), transparent 75%)}
  body.erleuchtet .streu{opacity:1}
  /* Zünd-Flackern wie eine echte Verfolgerlampe */
  @keyframes zuenden{
    0%{opacity:0} 8%{opacity:1} 14%{opacity:.25} 22%{opacity:1}
    30%{opacity:.6} 42%{opacity:1} 100%{opacity:1}
  }
  body.zuendet .kern{animation:zuenden 1.1s ease-out both}

  .scrollhint{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:20;
    font-size:.58rem;letter-spacing:.42em;text-transform:uppercase;color:var(--asche);
    opacity:0;transition:opacity 1.4s ease 1.8s;animation:puls 3.2s infinite}
  body.erleuchtet .scrollhint{opacity:1}
  @keyframes puls{0%,100%{opacity:.35}50%{opacity:.9}}
  body:not(.erleuchtet) .scrollhint{animation:none}

  /* ===================== INHALT (Chiaroscuro) ===================== */
  main{position:relative;z-index:2}
  main section{padding:9rem clamp(1.4rem,10vw,10rem);max-width:1250px}
  .marginalie{margin-bottom:3rem}
  /* Anblenden nur, wenn JS aktiv ist (html.js) — sonst ist alles sofort sichtbar */
  html.js .anblenden{opacity:0;transform:translateY(24px);transition:opacity 1.1s ease, transform 1.1s ease}
  html.js .anblenden.da{opacity:1;transform:none}

  /* Reel — Lichtspalt öffnet sich */
  .spalt{width:100%;aspect-ratio:16/9;position:relative;cursor:pointer;overflow:hidden;background:#000;
    transition:clip-path 1.5s cubic-bezier(.2,.75,.2,1)}
  html.js .spalt{clip-path:inset(42% 0 42% 0)}
  html.js .spalt.da{clip-path:inset(0 0 0 0)}
  .spalt::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,#1d1d1c,#0a0a0a 60%)}
  .spalt::after{content:"";position:absolute;top:-30%;left:50%;transform:translateX(-50%);width:55%;height:70%;
    background:radial-gradient(ellipse at top, rgba(244,232,207,.09), transparent 65%);pointer-events:none}
  .spalt .play{position:absolute;inset:0;margin:auto;width:74px;height:74px;border-radius:50%;
    border:1px solid rgba(242,239,233,.55);display:flex;align-items:center;justify-content:center;transition:.35s;z-index:2}
  .spalt:hover .play{transform:scale(1.07);border-color:var(--warm)}
  .spalt .play::after{content:"";border-left:12px solid var(--licht);border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:4px}
  .unterschrift{margin-top:1.2rem;font-family:var(--cormorant);font-style:italic;font-size:1.05rem;color:var(--asche)}

  /* Galerie — Bilder treten einzeln ins Licht (Mini-Spot beim Hover) */
  .einzeln{display:flex;flex-direction:column;gap:11rem}
  .blatt{display:grid;grid-template-columns:repeat(12,1fr);align-items:center}
  .blatt .bild{background:#121211;position:relative;overflow:hidden}
  .blatt .bild img{width:100%;height:100%;object-fit:cover;display:block;
    filter:contrast(1.03) brightness(.92);transition:filter 1s ease}
  .blatt .bild:hover img{filter:contrast(1) brightness(1)} /* im Licht leuchten die Farben voll auf */
  .blatt .bild::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .7s;
    background:radial-gradient(circle at 50% 8%, rgba(244,232,207,.16), transparent 62%)}
  .blatt .bild:hover::after{opacity:1}
  .blatt .vers{font-family:var(--cormorant);font-style:italic;font-weight:300;font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.5;color:#cfccc5}
  .blatt.eins .bild{grid-column:1/7;aspect-ratio:3/4}
  .blatt.eins .vers{grid-column:8/13}
  .blatt.zwei .bild{grid-column:7/12;aspect-ratio:2/3} /* Hochformat — Bild bleibt ungeschnitten */
  .blatt.zwei .vers{grid-column:1/5;text-align:right}
  .blatt.drei .bild{grid-column:3/9;aspect-ratio:2/3} /* Hochformat — Bild bleibt ungeschnitten */
  .blatt.drei .vers{grid-column:10/13}
  .blatt.vier .bild{grid-column:6/12;aspect-ratio:2/3} /* Hochformat — Bild bleibt ungeschnitten */
  .blatt.vier .vers{grid-column:1/5;text-align:right}
  .blatt.fuenf .bild{grid-column:2/8;aspect-ratio:2/3} /* Hochformat — Bild bleibt ungeschnitten */
  .blatt.fuenf .vers{grid-column:9/13}

  /* Vita */
  .vita-still{max-width:640px}
  .vita-still .e{padding:1.4rem 0}
  .vita-still .e b{font-family:var(--cormorant);font-weight:400;font-size:1.6rem;display:block;line-height:1.3;transition:.3s}
  .vita-still .e span{font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;color:var(--asche)}
  .vita-still .e:hover b{font-style:italic;color:var(--warm)}

  /* Kontakt */
  .kontakt{padding-bottom:11rem}
  .kontakt h2{font-family:var(--cormorant);font-weight:300;font-size:clamp(2.2rem,6vw,4.6rem);line-height:1.2}
  .kontakt h2 em{font-style:italic;color:var(--warm)}
  .kontakt .mail{display:inline-block;margin-top:2.6rem;font-size:.85rem;letter-spacing:.3em;text-transform:uppercase;
    border-bottom:1px solid var(--licht);padding-bottom:.5rem;transition:.4s}
  .kontakt .mail:hover{color:var(--warm);border-color:var(--warm);letter-spacing:.38em}
  .kontakt .meta{margin-top:3rem;display:flex;gap:2.6rem;flex-wrap:wrap}
  footer{padding:2rem 2.4rem;display:flex;justify-content:space-between}

  @media(max-width:820px){
    main section{padding:5.5rem 1.4rem}
    .blatt{display:flex;flex-direction:column;gap:1.6rem;align-items:flex-start}
    .blatt .bild{width:100%}
    .blatt.zwei .vers,.blatt.vier .vers{text-align:left}
    .einzeln{gap:6rem}
    nav a.cap{margin-left:1rem}
  }
  @media(prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
    .prolog{display:none}
    .ueberspringen{display:none}
    body .figur{opacity:1;transform:none}
    body .kern{opacity:1}
    body nav{opacity:1}
    body .boden{opacity:1}
    body .scrollhint{opacity:1}
    .spot{background:radial-gradient(circle 320px at 50% 44%, transparent 0%, rgba(11,11,12,.55) 72%, rgba(11,11,12,.985) 100%);opacity:.88}
    .kern{background:radial-gradient(circle 220px at 50% 44%, rgba(244,232,207,.14), transparent 70%)}
    .streu{background:radial-gradient(circle 780px at 50% 44%, rgba(244,232,207,.055), transparent 75%);opacity:1}
    body{background:#151318}
    html.js .anblenden{opacity:1;transform:none}
    html.js .spalt{clip-path:none}
  }

  /* ===== SICHERHEITSNETZ: laeuft kein JS, wird nichts versteckt ===== */
  html:not(.js) .prolog, html:not(.js) .ueberspringen,
  html:not(.js) .spot, html:not(.js) .kern, html:not(.js) .streu{display:none}
  html:not(.js) .figur, html:not(.js) nav, html:not(.js) .boden, html:not(.js) .scrollhint{opacity:1;transform:none}

  /* ===== Eingebettetes Showreel-Video (wird per JS eingesetzt) ===== */
  .spalt.spielt{cursor:default}
  html.js .spalt.spielt{clip-path:inset(0 0 0 0)}
  .spalt iframe, .spalt video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;z-index:3}
  .spalt-hinweis{position:absolute;left:50%;bottom:12%;transform:translateX(-50%);z-index:4;width:92%;text-align:center;
    font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--warm);opacity:0;transition:opacity .5s}
  .spalt-hinweis.da{opacity:1}