/* ============================================================
   SKADI STUDIO — CRYSTAL LIGHT SYSTEM
   Fundament-Prototyp · 7 Effekte
   Leitidee: Licht ist die einzige aktive Kraft.
   Der Besucher bringt das Licht. Das Werk wartet im Dunkeln.
   ============================================================ */

:root{
  --cl-light: rgba(255,255,255,0.92);
  --cl-glow: rgba(255,255,255,0.06);
  --cl-edge: rgba(255,255,255,0.55);
}

/* Reduced-motion: alles ruhig, keine Bewegung, volle Sichtbarkeit */
@media (prefers-reduced-motion: reduce){
  .cl-reveal, .cl-reveal *{opacity:1 !important; -webkit-mask:none !important; mask:none !important;}
  .gwork__media img{--gw-blur:0px !important; filter:brightness(0.92) contrast(1.03) !important;}
  #cl-cursor, .cl-spark{display:none !important;}
}

/* ------------------------------------------------------------
   EFFEKT 1 — CRYSTAL EDGE (Lichtkante statt Rahmen)
   Eine einzelne feine Lichtlinie an genau einer Kante.
   ------------------------------------------------------------ */
.cl-edge{position:relative}
.cl-edge::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,
    transparent 0%, var(--cl-edge) 22%, rgba(255,255,255,0.85) 50%,
    var(--cl-edge) 78%, transparent 100%);
  opacity:0.30;pointer-events:none;
  transition:opacity 1.2s var(--ease);
}
.cl-edge:hover::after{opacity:0.7}

/* Werk-Medien bekommen die Kante an der Oberseite */
.gwork__media{position:relative}
.gwork__media::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:3;
  background:linear-gradient(90deg,
    transparent, rgba(255,255,255,0.5) 45%, rgba(255,255,255,0.8) 50%,
    rgba(255,255,255,0.5) 55%, transparent);
  opacity:0;transition:opacity 1.4s var(--ease);pointer-events:none;
}
.gwork:hover .gwork__media::after{opacity:0.85}

/* ------------------------------------------------------------
   EFFEKT 2 — LICHTFINGER-CURSOR + VERWEIL-ENTHÜLLUNG
   Cursor = weicher Lichtschein. Über Werken größer.
   ------------------------------------------------------------ */
#cl-cursor{
  position:fixed;top:0;left:0;width:480px;height:480px;
  margin-left:-240px;margin-top:-240px;
  border-radius:50%;pointer-events:none;z-index:9000;
  background:radial-gradient(circle, rgba(255,255,255,0.10) 0%,
    rgba(255,255,255,0.04) 30%, transparent 65%);
  opacity:0;transition:opacity 0.8s var(--ease), width 0.8s var(--ease), height 0.8s var(--ease);
  mix-blend-mode:screen;will-change:transform;
}
body.cl-has-cursor #cl-cursor{opacity:1}
#cl-cursor.cl-cursor--small{width:240px;height:240px;margin-left:-120px;margin-top:-120px}
#cl-cursor.cl-cursor--work{width:560px;height:560px;margin-left:-280px;margin-top:-280px;
  background:radial-gradient(circle, rgba(255,255,255,0.08) 0%,
    rgba(255,255,255,0.03) 34%, transparent 64%);}

/* Werk-Enthüllung: Bild bleibt klar sichtbar, Cursor-Licht setzt nur einen Akzent.
   Dezente Grunddämpfung, damit Hover-Aufhellung überhaupt spürbar ist.
   --gw-blur: entkoppelt den "Reflex zum Gesicht"-Blur von der Helligkeit. */
.gwork__media img{--gw-blur:0px}
.cl-dim .gwork__media img{
  filter:blur(var(--gw-blur)) brightness(0.88) contrast(1.03);
  transition:filter 1.2s var(--ease);
}
.cl-dim .gwork:hover .gwork__media img{filter:blur(var(--gw-blur)) brightness(1.06) contrast(1.06)}
/* Lichtkern als sehr dezenter Glanz, additiv, ohne das Bild zu verdunkeln */
.cl-dim .gwork__media::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(circle 40% at var(--cl-x,50%) var(--cl-y,50%),
    rgba(255,255,255,0.14) 0%, transparent 68%);
  opacity:0;transition:opacity 0.7s var(--ease);
}
.cl-dim .gwork:hover .gwork__media::before{opacity:1}

/* ------------------------------------------------------------
   EFFEKT 3 — AUFTAUCHEN AUS DEM SCHWARZ (Scroll-Reveal)
   Sanftes Erscheinen. Maske nur auf Text-Containern, nie auf Bildern.
   ------------------------------------------------------------ */
.cl-reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity 1.3s var(--ease), transform 1.3s var(--ease);
}
.cl-reveal.cl-lit{
  opacity:1;
  transform:translateY(0);
}

/* ------------------------------------------------------------
   EFFEKT 14 — VOM REFLEX ZUM GESICHT
   Werk-Bild tritt aus der Unschärfe: erst ein Feld aus Reflexen,
   dann wird das Gesicht scharf. Nur die Blur-Variable wechselt,
   die Helligkeit bleibt der cl-dim/cl-near-Logik überlassen.
   ------------------------------------------------------------ */
.cl-reveal:not(.cl-lit) .gwork__media img{--gw-blur:6px}
.cl-reveal.cl-lit .gwork__media img{
  --gw-blur:0px;
  transition:filter 1.9s var(--ease);
}

/* ------------------------------------------------------------
   EFFEKT 4 — WERK TRITT EINZELN INS LICHT (auf der Galerie-Seite)
   Hier im Prototyp: Teaser-Werke heben sich beim Sichtwerden.
   (Greift auf .cl-reveal zurück + eigene Helligkeit)
   ------------------------------------------------------------ */
.gwork{transition:opacity 1.2s var(--ease)}
.cl-dim .gwork{opacity:0.62}
.cl-dim .gwork.cl-near{opacity:1}

/* ------------------------------------------------------------
   EFFEKT 5 — STILLES GLIMMEN EINZELNER KRISTALLE
   Sehr selten glimmt ein Punkt auf einer ruhigen Fläche auf.
   ------------------------------------------------------------ */
.cl-spark{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:rgba(255,255,255,0.95);
  box-shadow:0 0 6px 2px rgba(255,255,255,0.6);
  opacity:0;pointer-events:none;z-index:4;
  animation:cl-spark-glow 2.4s var(--ease) forwards;
}
@keyframes cl-spark-glow{
  0%{opacity:0;transform:scale(0.4)}
  35%{opacity:0.9;transform:scale(1)}
  100%{opacity:0;transform:scale(0.6)}
}

/* ------------------------------------------------------------
   EFFEKT 6 — MUSEUMS-LABEL (Beschriftung wie ein Exponat-Schild)
   Werktitel wird beim Hover wie von einem Spot beleuchtet.
   ------------------------------------------------------------ */
.gwork__caption{position:relative}
.gwork__index{
  font-family:var(--sans);font-style:normal;
  font-size:10px;letter-spacing:0.34em;text-transform:uppercase;
  color:var(--silver);opacity:0.6;
  transition:opacity 1s var(--ease), color 1s var(--ease);
}
.gwork:hover .gwork__index{opacity:1;color:var(--bone)}
.gwork__title{transition:color 1s var(--ease), text-shadow 1s var(--ease)}
.gwork:hover .gwork__title{
  text-shadow:0 0 28px rgba(255,255,255,0.18);
}

/* ------------------------------------------------------------
   EFFEKT 7 — EYEBROW NEU + REFRAKTIONS-STREIF
   Statt "— LABEL": ein Lichtpunkt, der beim Erscheinen aufglimmt.
   ------------------------------------------------------------ */
.cl-eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--sans);font-size:11px;letter-spacing:0.32em;
  text-transform:uppercase;color:var(--silver);
}
.cl-eyebrow::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:rgba(255,255,255,0.9);
  box-shadow:0 0 0 0 rgba(255,255,255,0.5);
  animation:cl-eye-pulse 4.5s var(--ease) infinite;
}
@keyframes cl-eye-pulse{
  0%,100%{box-shadow:0 0 4px 1px rgba(255,255,255,0.3); opacity:0.7}
  50%{box-shadow:0 0 10px 3px rgba(255,255,255,0.55); opacity:1}
}
/* Strich-Eyebrow der bestehenden Seite im Prototyp ausblenden, wenn ersetzt */
.cl-eyebrow--replace .eyebrow{display:none}

/* Refraktions-Streif über Werken (vereinheitlicht gshimmer) */
.gwork__shimmer{
  position:absolute;inset:0;pointer-events:none;opacity:0;z-index:2;
  background:linear-gradient(115deg, transparent 38%,
    rgba(255,255,255,0.14) 49%, rgba(255,255,255,0.04) 52%, transparent 64%);
  transform:translateX(-110%);
}
.gwork:hover .gwork__shimmer{opacity:1;animation:cl-refract 2.4s var(--ease)}
@keyframes cl-refract{to{transform:translateX(110%)}}

/* Manifest aus Dunkel (Bonus, gehört zu Effekt 3-Familie) */
.cl-manifest span{transition:color 0.9s var(--ease), opacity 0.9s var(--ease)}

/* ============================================================
   ZWEITE WELLE
   ============================================================ */

/* ------------------------------------------------------------
   EFFEKT 8 — DIE SCHWELLE (Hero taucht aus dem Schwarz auf)
   Beim Laden ist alles fast schwarz; Licht hebt das Hero-Werk.
   ------------------------------------------------------------ */
.cl-threshold .hero__bg-img{
  filter:brightness(0.30) contrast(1.08);
  transform:scale(1.06);
  transition:filter 2.4s var(--ease), transform 2.8s var(--ease);
}
.cl-threshold.cl-opened .hero__bg-img{
  filter:brightness(0.62) contrast(1.05);
  transform:scale(1);
}
/* Hero-Inhalt erscheint, nachdem das Licht aufgegangen ist */
.cl-threshold .hero__content > *{
  opacity:0;transform:translateY(18px);
  transition:opacity 1.4s var(--ease), transform 1.4s var(--ease);
}
.cl-threshold.cl-opened .hero__content > *{opacity:1;transform:translateY(0)}
.cl-threshold.cl-opened .hero__content > *:nth-child(1){transition-delay:0.15s}
.cl-threshold.cl-opened .hero__content > *:nth-child(2){transition-delay:0.30s}
.cl-threshold.cl-opened .hero__content > *:nth-child(3){transition-delay:0.45s}
.cl-threshold.cl-opened .hero__content > *:nth-child(4){transition-delay:0.60s}
.cl-threshold.cl-opened .hero__content > *:nth-child(5){transition-delay:0.75s}

/* Ein einzelner Lichtschein, der beim Öffnen über den Hero streicht */
.cl-threshold .hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(circle 50% at 70% 40%,
    rgba(255,255,255,0.10) 0%, transparent 60%);
  opacity:0;transition:opacity 2.4s var(--ease);
}
.cl-threshold.cl-opened .hero::before{opacity:1}

/* ------------------------------------------------------------
   EFFEKT 9 — STILLER SCHWARZER RAUM (Übergang zwischen Räumen)
   Eine fast leere, tiefschwarze Sektion mit einem Lichtreflex.
   ------------------------------------------------------------ */
.cl-void{
  position:relative;
  min-height:46vh;
  background:var(--black);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.cl-void__line{
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(20px,2.6vw,32px);line-height:1.5;
  font-variation-settings:"opsz" 144,"SOFT" 90;
  color:rgba(232,226,213,0.0);
  text-align:center;max-width:24ch;padding:0 var(--gutter);
  letter-spacing:0.01em;
  transition:color 2s var(--ease);
}
.cl-void.cl-lit .cl-void__line{color:rgba(232,226,213,0.78)}
/* Lichtreflex, der sich beim Sichtbarwerden langsam ausbreitet */
.cl-void::before{
  content:"";position:absolute;top:50%;left:50%;
  width:2px;height:2px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:rgba(255,255,255,0.9);
  box-shadow:0 0 40px 8px rgba(255,255,255,0.12);
  opacity:0;transition:opacity 2.4s var(--ease);
}
.cl-void.cl-lit::before{opacity:0.6}

/* ------------------------------------------------------------
   EFFEKT 10 — FORMULARFELD-LICHTKANTEN
   Felder sind fast schwarz; bei Fokus zieht eine Lichtkante entlang.
   ------------------------------------------------------------ */
.cl-field{position:relative}
.cl-field input, .cl-field select, .cl-field textarea{
  transition:border-color 0.6s var(--ease), background 0.6s var(--ease);
}
/* Lichtlinie, die bei Fokus die Unterkante entlangläuft */
.cl-field::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:linear-gradient(90deg, transparent,
    rgba(255,255,255,0.85) 50%, transparent);
  transform:scaleX(0);transform-origin:center;
  opacity:0;transition:transform 0.8s var(--ease), opacity 0.8s var(--ease);
  pointer-events:none;z-index:2;
}
.cl-field:focus-within::after{transform:scaleX(1);opacity:0.7}

/* ------------------------------------------------------------
   EFFEKT 11 — GALERIE: WERK TRITT EINZELN INS LICHT (verstärkt)
   Auf der Werke-Seite deutlicher als im Teaser.
   ------------------------------------------------------------ */
.gallery--rooms .gwork{transition:opacity 1.4s var(--ease), filter 1.4s var(--ease)}
.gallery--rooms.cl-dim .gwork{opacity:0.42;filter:brightness(0.7)}
.gallery--rooms.cl-dim .gwork.cl-near{opacity:1;filter:brightness(1)}

/* ------------------------------------------------------------
   EFFEKT 12 — PAGEHEAD: TITEL TRITT INS LICHT
   Seitentitel der Unterseiten erscheinen aus dem Dunkel.
   ------------------------------------------------------------ */
.cl-pagehead .pagehead__title,
.cl-pagehead .pagehead__eyebrow,
.cl-pagehead .pagehead__intro,
.cl-pagehead .cl-eyebrow{
  opacity:0;transform:translateY(20px);
  transition:opacity 1.5s var(--ease), transform 1.5s var(--ease);
}
.cl-pagehead.cl-lit .pagehead__title{opacity:1;transform:none;transition-delay:0.1s}
.cl-pagehead.cl-lit .pagehead__eyebrow,
.cl-pagehead.cl-lit .cl-eyebrow{opacity:1;transform:none}
.cl-pagehead.cl-lit .pagehead__intro{opacity:1;transform:none;transition-delay:0.25s}

/* ------------------------------------------------------------
   EFFEKT 13 — FOOTER VERDUNKELT (das Werk ist abgeschlossen)
   ------------------------------------------------------------ */
.footer{position:relative}
.footer::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg, transparent,
    rgba(255,255,255,0.18) 50%, transparent);
  opacity:0.4;
}

/* ------------------------------------------------------------
   NAV — schwebende Glasvitrine mit Lichtkante
   ------------------------------------------------------------ */
.nav{transition:background 0.6s var(--ease), backdrop-filter 0.6s var(--ease)}
.nav::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg, transparent,
    rgba(255,255,255,0.30) 50%, transparent);
  opacity:0;transition:opacity 0.8s var(--ease);
}
.nav.cl-nav-lit::after{opacity:1}

/* ============================================================
   KLANG DES ATELIERS — Stück von Skadi (auf der Atelier-Seite)
   Leitidee: Der Kristallpunkt ist der Auslöser. Bei Wiedergabe
   glimmt er, Licht wandert die Unterkante entlang. Kein Player.
   ============================================================ */
.atelier-sound{
  --as-pt:56px;
  position:relative;
  display:flex;align-items:center;gap:22px;
  margin:48px 0 4px;
  padding:22px 0 26px;
  border:0;
}
.atelier-sound::before,
.atelier-sound::after{
  content:"";position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,
    rgba(26,24,20,.14) 16%,rgba(26,24,20,.14) 84%,transparent);
}
.atelier-sound::before{top:0}
.atelier-sound::after{bottom:0}

/* Der Kristallpunkt = Auslöser */
.atelier-sound__trigger{
  flex:0 0 auto;width:var(--as-pt);height:var(--as-pt);
  border-radius:50%;cursor:pointer;
  background:radial-gradient(circle at 38% 34%, #1b1b1e, #0c0c0d 72%);
  border:1px solid rgba(26,24,20,.30);
  display:grid;place-items:center;position:relative;
  box-shadow:inset 0 0 12px rgba(0,0,0,.6);
  transition:border-color .5s var(--ease), box-shadow .6s var(--ease);
}
.atelier-sound__trigger::after{               /* Lichtreflex-Kante */
  content:"";position:absolute;inset:-1px;border-radius:50%;
  background:conic-gradient(from 210deg, transparent,
    rgba(255,255,255,.5) 12%, transparent 26%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));
  opacity:.5;transition:opacity .5s var(--ease);
}
.atelier-sound__trigger:hover{
  border-color:rgba(26,24,20,.55);
  box-shadow:0 0 26px rgba(216,200,168,.30), inset 0 0 12px rgba(0,0,0,.6);
}
.atelier-sound__trigger:hover::after{opacity:.85}
.atelier-sound__trigger:focus-visible{outline:1px solid var(--ink);outline-offset:4px}

/* Icon Play -> Pause (CSS-Morph) */
.atelier-sound__icon{position:relative;width:16px;height:16px}
.atelier-sound__icon i{position:absolute;top:0;transition:all .45s var(--ease)}
.atelier-sound__icon i:nth-child(1){
  left:3px;width:0;height:0;border-style:solid;border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent var(--bone);background:transparent;}
.atelier-sound__icon i:nth-child(2){left:0;width:0;height:0;opacity:0;border-color:transparent;}
.atelier-sound.is-playing .atelier-sound__icon i:nth-child(1){
  left:2px;width:4px;height:16px;border:0;background:var(--bone);}
.atelier-sound.is-playing .atelier-sound__icon i:nth-child(2){
  left:10px;width:4px;height:16px;opacity:1;border:0;background:var(--bone);}

/* Glimmen bei Wiedergabe — wie ein glimmender Kristall (Effekt-7-Familie) */
@keyframes as-crystal-glow{
  0%,100%{box-shadow:0 0 18px rgba(216,200,168,.22), inset 0 0 12px rgba(0,0,0,.6)}
  50%    {box-shadow:0 0 42px rgba(216,200,168,.55), inset 0 0 12px rgba(0,0,0,.6)}
}
.atelier-sound.is-playing .atelier-sound__trigger{
  border-color:rgba(26,24,20,.6);
  animation:as-crystal-glow 3.4s var(--ease) infinite;
}
.atelier-sound.is-playing .atelier-sound__trigger::after{opacity:.9}

.atelier-sound__meta{display:flex;flex-direction:column;gap:9px;min-width:0}
.atelier-sound__title{
  font-family:var(--serif);font-weight:300;font-size:21px;line-height:1.2;
  color:var(--ink);letter-spacing:.005em;
}
.atelier-sound__time{
  font-family:var(--sans);font-size:11px;letter-spacing:.16em;
  color:var(--ink-soft);font-variant-numeric:tabular-nums;
}

/* Fortschritt = Licht, das die Unterkante entlangwandert */
.atelier-sound__edge{
  position:absolute;left:0;bottom:0;height:1px;width:0%;
  background:linear-gradient(90deg,rgba(216,200,168,0),#C9A86A);
  box-shadow:0 0 8px rgba(201,168,106,.6);
  transition:width .15s linear;pointer-events:none;
}
.atelier-sound audio{display:none}

@media (prefers-reduced-motion: reduce){
  .atelier-sound.is-playing .atelier-sound__trigger{animation:none}
  .atelier-sound__edge{transition:none}
  .atelier-sound__icon i,.atelier-sound__trigger{transition:none}
}
@media (max-width:600px){
  .atelier-sound{gap:16px;--as-pt:50px;margin-top:40px}
  .atelier-sound__title{font-size:18px}
}

/* ============================================================
   PLAN B — BILDLOSE WERK-KARTE (Licht-Rahmen)
   Für Werke ohne (freigegebenes) Foto: ein leerer, dunkler
   Rahmen mit Crystal-Edge und einem einzelnen Lichtpunkt.
   Verwendung: <a class="gwork__media gwork__media--portrait cl-edge gwork__media--ph"> … </a>
   ohne <img>, optional data-ph="Titel".
   ============================================================ */
.gwork__media--ph{
  background:
    radial-gradient(120% 80% at 50% 38%, rgba(184,184,188,.06), transparent 60%),
    linear-gradient(180deg,#0d0d0f,#070708);
  display:flex;align-items:center;justify-content:center;
}
.gwork__media--ph::after{               /* Lichtpunkt in der Mitte */
  content:"";width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.92);
  box-shadow:0 0 26px 6px rgba(184,184,188,.22),0 0 6px 1px rgba(255,255,255,.5);
  animation:cl-eye-pulse 5s var(--ease) infinite;
}
.gwork__media--ph .gwork__ph-label{
  position:absolute;left:0;right:0;bottom:18px;text-align:center;
  font-family:var(--sans);font-size:10px;letter-spacing:.32em;text-transform:uppercase;
  color:rgba(184,184,188,.45);
}
@media (prefers-reduced-motion:reduce){ .gwork__media--ph::after{animation:none} }