/* ==========================================================================
   SCHMINKRAUM · FX: signature motion (load after styles.css)
   Augenaufschlag · Puderwolke · Galerie + Lightbox · Namensband · Ken Burns · Rise · Portfolio-Kachel
   Rules: content is visible without JS and without these animations; every effect has a
   reduced-motion path; only transform / scale / translate / opacity / filter animate.
   ========================================================================== */

/* ---- 1 · Augenaufschlag: the hero photo opens like an eyelid (CSS only, ~1.3 s, one soft blink) ----
   Put .fx-eye on the element that crops the photo (e.g. <div class="ph fx-eye"><img></div>),
   never on .photo.frame (its ::before is the gold frame). Lids take the section colour (--bg). */
.fx-eye{position:relative;overflow:hidden;isolation:isolate;--fx-lid:var(--bg,#120E0C)}
.fx-eye>img{display:block;width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:no-preference){
  .fx-eye::before,.fx-eye::after{content:"";position:absolute;left:-1px;right:-1px;z-index:2;height:calc(68% + 1px);pointer-events:none;
    animation:1.3s cubic-bezier(.3,0,.2,1) .6s backwards}
  /* lids rest OPEN (off-frame): if the animation never runs, nothing covers the photo.
     Each lid is solid with a half-ellipse cut-out = the curved lash line, edged by a faint gold liner. */
  .fx-eye::before{top:-1px;transform:translateY(-101%);animation-name:fx-lid-up;
    background:radial-gradient(ellipse 52% 26.5% at 50% 100%,transparent 82%,rgba(210,180,126,.42) 92%,var(--fx-lid) 100%)}
  .fx-eye::after{bottom:-1px;transform:translateY(101%);animation-name:fx-lid-down;
    background:radial-gradient(ellipse 52% 26.5% at 50% 0%,transparent 82%,rgba(210,180,126,.28) 92%,var(--fx-lid) 100%)}
  .fx-eye>img{animation:fx-eye-img 1.6s cubic-bezier(.16,1,.3,1) .55s backwards}
}
@keyframes fx-lid-up{
  0%{transform:none}
  56%{transform:translateY(-82%);animation-timing-function:cubic-bezier(.45,0,.55,1)}
  68%{transform:translateY(-64%);animation-timing-function:cubic-bezier(.2,.75,.25,1)}
  100%{transform:translateY(-101%)}
}
@keyframes fx-lid-down{
  0%{transform:none}
  56%{transform:translateY(82%);animation-timing-function:cubic-bezier(.45,0,.55,1)}
  68%{transform:translateY(64%);animation-timing-function:cubic-bezier(.2,.75,.25,1)}
  100%{transform:translateY(101%)}
}
@keyframes fx-eye-img{from{transform:scale(1.06);filter:blur(8px) brightness(.82)}}

/* ---- 2 · Puderwolke: canvas over a brush photo (assets/js/fx-powder.js) ---- */
.fx-powder{position:relative;isolation:isolate}
.fx-powder>canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;
  /* soft edges: powder fades out instead of being cut by the box */
  mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(transparent,#000 7%,#000 93%,transparent);mask-composite:intersect}
.fx-powder-brush{user-select:none;-webkit-user-drag:none}

/* ---- 3 · Galerie: CSS-columns masonry (2 / 3 / 4), no layout shift (img width+height) ---- */
.gallery{--fx-g:clamp(.55rem,1.3vw,1rem);list-style:none;columns:2;column-gap:var(--fx-g)}
@media (min-width:761px){.gallery{columns:3}}
@media (min-width:1081px){.gallery{columns:4}}
.gallery>li{break-inside:avoid;margin-bottom:var(--fx-g)}
.gallery a{display:block;overflow:hidden;background:var(--ph,#EAE3D7);cursor:zoom-in}
.gallery img{width:100%}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .gallery img{transition:scale 1s var(--ease,ease)}
  .gallery a:hover img{scale:1.035}
}

/* Lightbox: native <dialog class="gx">, built by gallery.js. Prefixed .gx-* (styles.css owns .lightbox/.lb-*). */
html:has(.gx[open]){overflow:hidden}
.gx{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:rgba(18,14,12,.965);color:#F4F0E9;overscroll-behavior:contain}
.gx[open]{display:flex;align-items:center;justify-content:center}
.gx::backdrop{background:transparent}
.gx-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:1rem;touch-action:pan-y pinch-zoom}
.gx-img{--fx-mw:calc(100vw - 9.6rem);--fx-mh:calc(100dvh - 8.5rem);
  width:min(var(--fx-mw),var(--fx-mh) * var(--ar,1.5),var(--w,2400) * 1px);height:auto;aspect-ratio:var(--ar,1.5);
  object-fit:contain;background:#1B1511;box-shadow:var(--sh,0 30px 60px -30px rgba(18,14,12,.45));user-select:none;-webkit-user-drag:none}
.gx-cap{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem 1.2rem;max-width:min(60ch,90vw);padding-inline:1rem;
  font-family:var(--sans);font-size:.88rem;letter-spacing:0;text-transform:none;text-align:center;color:var(--muted-d,#B8AC9E)}
.gx-txt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gx:focus{outline:none}
.gx-n{color:var(--gold-soft,#D2B47E);letter-spacing:.12em;font-variant-numeric:tabular-nums}
.gx-btn{position:absolute;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;color:#F4F0E9;
  background:rgba(18,14,12,.4);border:1px solid rgba(210,180,126,.32);opacity:.86;transition:opacity .25s,border-color .25s,background-color .25s}

.gx-btn:focus-visible{outline:2px solid var(--gold-soft,#D2B47E);outline-offset:3px}
.gx-btn[hidden]{display:none}
.gx-btn svg{width:22px;height:22px}
.gx-close{top:max(.9rem,env(safe-area-inset-top));right:.9rem}
.gx-prev{left:.9rem;top:50%;translate:0 -50%}
.gx-next{right:.9rem;top:50%;translate:0 -50%}
@media (max-width:760px){
  .gx-img{--fx-mw:calc(100vw - 1.2rem);--fx-mh:calc(100dvh - 13rem)}
  .gx-prev,.gx-next{top:auto;bottom:max(.9rem,env(safe-area-inset-bottom));translate:none}
  .gx-prev{left:calc(50% - 60px)}.gx-next{right:calc(50% - 60px)}
}
@media (prefers-reduced-motion:no-preference){
  .gx{opacity:0;transition:opacity .35s var(--ease,ease),overlay .35s allow-discrete,display .35s allow-discrete}
  .gx[open]{opacity:1}
  .gx:not([open]){transition-duration:.2s}
  @starting-style{.gx[open]{opacity:0}}
  .gx[open] .gx-fig{transition:scale .5s var(--ease,ease)}
  @starting-style{.gx[open] .gx-fig{scale:.965}}
}

/* ---- 4 · Namensband: rows drift in opposite directions (assets/js/fx-marquee.js) ----
   Without JS / reduced motion: a static wrapped list. JS adds .fx-on + .marquee-track wrappers. */
.marquee{--fx-gap:clamp(1.4rem,3.2vw,3rem)}
.marquee-row{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem var(--fx-gap)}
.marquee-row>li{display:flex;align-items:center;gap:var(--fx-gap);white-space:nowrap;
  font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(1.45rem,1rem + 2vw,2.8rem);line-height:1.3;font-variation-settings:"opsz" 9}
.marquee-row>li::after{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--gold,#B08A4E)}
.marquee:not(.fx-on){padding-inline:var(--gut,1rem)}
.marquee:not(.fx-on) .marquee-row>li:last-child::after{display:none}
.marquee-row+.marquee-row,.marquee-track+.marquee-track{margin-top:clamp(.4rem,1.2vw,.9rem)}
.marquee>.marquee-row:nth-child(even of .marquee-row) li,.marquee>.marquee-track:nth-child(even of .marquee-track) li{font-style:normal;color:color-mix(in srgb,currentColor 76%,transparent)}
.marquee.fx-on{overflow:hidden;mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee.fx-on .marquee-track{display:flex;width:max-content;animation:fx-marquee var(--fx-dur,60s) linear infinite}
.marquee.fx-on .marquee-row{flex-wrap:nowrap;flex:none;padding-right:var(--fx-gap)}
.marquee.fx-on .fx-rev{animation-direction:reverse}
.marquee.fx-on:focus-within .marquee-track,.marquee.is-paused .marquee-track{animation-play-state:paused}
@keyframes fx-marquee{to{translate:var(--fx-shift,-50%) 0}}
.marquee-toggle{display:grid;place-items:center;width:44px;height:44px;margin:clamp(.8rem,2vw,1.4rem) var(--gut,1rem) 0 auto;border-radius:50%;
  border:1px solid color-mix(in srgb,currentColor 28%,transparent);color:inherit;opacity:.7;transition:opacity .25s,border-color .25s}

.marquee-toggle svg{width:16px;height:16px}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none!important}
  .marquee-row[aria-hidden],.marquee-toggle{display:none}
}

/* ---- 5 · Utilities ---- */
/* .kb: slow Ken Burns for hero photos (use on the <img>; composes with .fx-eye and .hero-bg) */
@media (prefers-reduced-motion:no-preference){
  .kb{animation:fx-kb 18s ease-in-out infinite alternate}
  .fx-eye>img.kb{animation:fx-eye-img 1.6s cubic-bezier(.16,1,.3,1) .55s backwards,fx-kb 18s ease-in-out 2.15s infinite alternate}
  .hero-bg.kb{animation:settle 2.6s var(--ease) both,fx-kb 18s ease-in-out 2.6s infinite alternate}
}
@keyframes fx-kb{to{scale:1.08}}

/* .rise: items rise in while they scroll into view (scroll-driven; without support they simply stay visible) */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .rise{animation:fx-rise cubic-bezier(.16,1,.3,1) both;animation-timeline:view();animation-range:entry 0% entry 75%}
    .rise:nth-child(3n+2){animation-range:entry 8% entry 83%}
    .rise:nth-child(3n+3){animation-range:entry 16% entry 91%}
  }
}
@keyframes fx-rise{from{opacity:0;translate:0 1.75rem}}
@keyframes fx-rise-move{from{translate:0 1.75rem}}   /* Fotos: nur Bewegung, nie durchsichtig */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .rise:is(figure,img,picture,.photo,.ph,.ptile),.rise:has(> img,> picture,> figure,> .ph){animation-name:fx-rise-move}
    /* hohe Blöcke (z. B. Referenzgruppen): spätestens nach 9rem Scrollweg fertig statt erst bei 75 % ihrer Höhe */
    @supports (animation-range:entry 0% entry min(75%, 9rem)){
      .rise{animation-range:entry 0% entry min(75%,9rem)}
      .rise:nth-child(3n+2){animation-range:entry min(8%,1rem) entry min(83%,10rem)}
      .rise:nth-child(3n+3){animation-range:entry min(16%,2rem) entry min(91%,11rem)}
      .ms>.rise{animation-range:entry 0% entry min(75%,9rem)}
    }
  }
}

/* .ptile: portfolio tile. Title always visible; zoom + title lift only for fine pointers and keyboard focus */
.ptile{position:relative;display:block;overflow:hidden;isolation:isolate;aspect-ratio:4/5;background:var(--ph,#EAE3D7);color:#F4F0E9}
.ptile img{display:block;width:100%;height:100%;object-fit:cover}
.ptile::after{content:"";position:absolute;inset:38% 0 0;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(18,14,12,.8))}
.ptile-t{position:absolute;z-index:2;left:clamp(1rem,2.2vw,1.5rem);right:clamp(1rem,2.2vw,1.5rem);bottom:clamp(1.1rem,2.2vw,1.6rem);
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.3rem 1rem;
  font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(1.4rem,1.05rem + 1.1vw,2.1rem);line-height:1.08;font-variation-settings:"opsz" 9}
.ptile-t small{font-family:var(--sans);font-style:normal;font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft,#D2B47E)}
.ptile-t::after{content:"";position:absolute;left:0;bottom:-.6rem;width:2.6rem;height:1px;background:var(--gold-soft,#D2B47E);transform:scaleX(0);transform-origin:left}
@media (prefers-reduced-motion:no-preference){
  .ptile img{transition:scale 1.2s var(--ease,ease)}
  .ptile-t{transition:translate .6s var(--ease,ease)}
  .ptile-t::after{transition:transform .6s var(--ease,ease)}
  .ptile:focus-visible img{scale:1.06}
  .ptile:focus-visible .ptile-t{translate:0 -.45rem}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .ptile:hover img{scale:1.06}
  .ptile:hover .ptile-t{translate:0 -.45rem}
}
@media (hover:hover) and (pointer:fine){.ptile:hover .ptile-t::after{transform:none}}
.ptile:focus-visible .ptile-t::after{transform:none}

@media print{
  .fx-eye::before,.fx-eye::after,.fx-powder>canvas,.marquee-toggle,.gx{display:none!important}
  .rise,.kb,.marquee-track{animation:none!important}
  .marquee.fx-on{mask:none}.marquee-row{flex-wrap:wrap!important}.marquee-row[aria-hidden]{display:none}
}

/* ---- Hover nur mit Maus/Trackpad (Handy: kein hängender Hover nach dem Tippen) ---- */
@media (hover:hover) and (pointer:fine){
.gx-btn:hover{opacity:1;border-color:var(--gold-soft,#D2B47E);background:rgba(18,14,12,.7)}
.marquee.fx-on:hover .marquee-track{animation-play-state:paused}
.marquee-toggle:hover{opacity:1;border-color:var(--gold,#B08A4E)}
}