/* ═══════════════════════════════════════════════════════════════
   ATELIER DO LAGO — Award layer (choreographed motion, brand, chrome)
   Loads after style.css. Vanilla, CSP-safe (no inline styles needed).
   ═══════════════════════════════════════════════════════════════ */

/* ── brand: original mark + wordmark as CSS masks (tintable) ── */
.brand{display:block}
.brand-row{display:flex;align-items:center;gap:.95rem;color:var(--ink);transition:color .5s var(--ease)}
.brand:hover .brand-row{color:var(--gold-2)}
.brand-mark,.brand-word{display:block;flex:none;line-height:0}
.brand-mark svg,.brand-word svg{display:block;width:100%;height:auto;fill:currentColor}
.brand-mark{width:1.5rem}
.brand-word{width:9.8rem;opacity:.94}
.brand-sep{width:1px;height:1.6rem;background:var(--line-2);flex:none;transform:scaleY(0);transform-origin:top}
/* entrance: mark settles, line draws, wordmark slides from a mask */
body.ready .brand-mark{animation:awMark 1.1s var(--ease) .15s both}
body.ready .brand-sep{animation:awSep .7s var(--ease) .55s both}
.brand-wrap{overflow:hidden;display:block}
body.ready .brand-word{animation:awWord 1s var(--ease) .7s both}
@keyframes awMark{from{opacity:0;transform:translateY(-6px) scale(.86)}to{opacity:1;transform:none}}
@keyframes awSep{to{transform:scaleY(1)}}
@keyframes awWord{from{transform:translateX(-14%);opacity:0}to{transform:none;opacity:.94}}
footer .brand-row{color:var(--ink)}
footer .brand-mark{width:1.9rem}
footer .brand-word{width:11.4rem}
@media(max-width:760px){.brand-word{width:7.8rem}.brand-mark{width:1.25rem}.brand-sep{height:1.3rem}}

/* ── preloader (veil with counter + mark) ───────────────────── */
.veil{transition:transform 1s var(--ease-io)}
.veil .vlogo{display:none}
.veil .vmark{position:absolute;left:50%;top:50%;width:clamp(3rem,6vw,4.6rem);transform:translate(-50%,-56%);color:var(--gold);line-height:0;
  animation:awPulse 2.2s var(--ease-io) infinite;transition:opacity .35s}
.veil .vmark svg{width:100%;height:auto;display:block}
.veil .vcount{position:absolute;right:clamp(1.4rem,4vw,3.2rem);bottom:clamp(1.2rem,3vw,2.4rem);
  font-family:var(--serif);font-weight:300;font-size:clamp(3rem,9vw,8rem);line-height:1;color:var(--ink);
  letter-spacing:-.01em;transition:opacity .35s;font-variant-numeric:tabular-nums}
.veil .vcount i{font-style:normal;font-size:.28em;color:var(--gold);vertical-align:super;margin-left:.15em;letter-spacing:.2em}
.veil .vline{position:absolute;left:clamp(1.4rem,4vw,3.2rem);right:clamp(1.4rem,4vw,3.2rem);bottom:clamp(1rem,2.6vw,2rem);
  height:1px;background:var(--line-2);transform-origin:left}
.veil .vline::after{content:'';position:absolute;inset:0;background:var(--gold);transform:scaleX(var(--p,0));transform-origin:left;
  transition:transform .12s linear}
.veil .vtag{position:absolute;left:clamp(1.4rem,4vw,3.2rem);bottom:clamp(1.3rem,3.2vw,2.5rem);font-size:.66rem;
  letter-spacing:.5em;text-transform:uppercase;color:var(--muted)}
body.ready .veil .vmark,body.ready .veil .vcount,body.ready .veil .vline,body.ready .veil .vtag{opacity:0}
@keyframes awPulse{50%{opacity:.55;transform:translate(-50%,-56%) scale(.96)}}

/* ── split-text choreography ────────────────────────────────── */
.aw-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em;margin-bottom:-.06em}
.aw-w>span{display:inline-block;transform:translateY(112%);will-change:transform;
  transition:transform 1.15s var(--ease);transition-delay:calc(var(--i,0)*.055s)}
.aw-in .aw-w>span{transform:none}
.hero h1.fade-up{animation:none;opacity:1;transform:none}
.hero h1 .aw-w>span{transition-duration:1.4s;transition-delay:calc(.35s + var(--i,0)*.09s)}

/* ── image reveals (clip wipe + tone) ───────────────────────── */
.aw-img{clip-path:inset(0 0 100% 0);filter:brightness(.55) saturate(.7);
  transition:clip-path 1.35s var(--ease),filter 1.4s var(--ease),transform 1.3s var(--ease)!important}
.aw-img.aw-in{clip-path:inset(0 0 0 0);filter:none}
.card img.aw-img.aw-in{filter:saturate(.92)}
.member .ph img.aw-img.aw-in{filter:grayscale(1)}
.member:hover .ph img.aw-img.aw-in{filter:grayscale(0)}
.team-duo img.aw-img.aw-in,.dog-card img.aw-img.aw-in{filter:grayscale(1)}
.feat-img img{will-change:transform}

/* ── section rules that draw themselves ────────────────────── */
.sec-head{position:relative;padding-top:1.4rem}
.sec-head::before{content:'';position:absolute;top:0;left:0;width:100%;height:1px;background:var(--line-2);
  transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease) .1s}
.sec-head.in::before{transform:scaleX(1)}
.ev-block,.step,.more-item,.cline{position:relative}
.stat .n{font-variant-numeric:tabular-nums}

/* ── header choreography ────────────────────────────────────── */
header{transition:transform .65s var(--ease),background .5s,backdrop-filter .5s,border-color .5s}
header.aw-hide{transform:translateY(-100%)}
header.aw-hide .lang-hint{opacity:0}

/* ── hero choreography ──────────────────────────────────────── */
.hero{isolation:isolate;transform:translateZ(0)}
.hero-inner,.hero-foot{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.hero h1{font-size:clamp(3.2rem,9.8vw,8.8rem);letter-spacing:-.005em;line-height:.98}
.hero-inner{padding-top:clamp(7rem,14vh,10rem)}
.hero .sub{margin-top:2rem}

/* ── ticker ─────────────────────────────────────────────────── */
.aw-tick{margin-top:-1px;border-block:1px solid var(--line);background:var(--bg)}
.aw-tick .track{animation-duration:48s}
.aw-tick span{color:var(--muted);font-size:clamp(1rem,1.6vw,1.45rem);letter-spacing:.24em}
.aw-tick span::after{color:var(--gold)}

/* ── cursor "view" label ───────────────────────────────────── */
.cursor-ring{display:grid;place-items:center}
.cursor-ring .aw-cur-lbl{font-family:var(--sans);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;
  color:#fff;opacity:0;transform:scale(.6);transition:opacity .3s,transform .4s var(--ease);white-space:nowrap}
.cursor-ring.aw-view{width:84px;height:84px;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.75);
  backdrop-filter:blur(2px)}
.cursor-ring.aw-view .aw-cur-lbl{opacity:1;transform:none}

/* ── floating hover preview (archive list, prev/next) ──────── */
.aw-preview{position:fixed;top:0;left:0;z-index:1500;width:min(26vw,340px);aspect-ratio:4/3;pointer-events:none;
  overflow:hidden;opacity:0;transform:translate(-50%,-50%) scale(.85) rotate(-3deg);
  transition:opacity .45s var(--ease),transform .6s var(--ease);will-change:transform}
.aw-preview img{width:100%;height:100%;object-fit:cover;display:block}
.aw-preview.on{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}
@media(hover:none){.aw-preview{display:none}}

/* ── footer call ────────────────────────────────────────────── */
footer{margin-top:clamp(5rem,10vw,9rem)}
.aw-talk{display:block;width:var(--wrap);margin:0 auto;padding:clamp(3.5rem,8vw,7rem) 0 clamp(2.5rem,5vw,4rem);
  border-bottom:1px solid var(--line);position:relative}
.aw-talk .k{font-size:.72rem;letter-spacing:.5em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:1.2rem}
.aw-talk .t{font-family:var(--serif);font-weight:300;font-size:clamp(3.4rem,11vw,10rem);line-height:.95;letter-spacing:-.01em;
  color:var(--ink);display:flex;align-items:baseline;gap:.25em;transition:color .5s var(--ease)}
.aw-talk .t i{font-style:normal;display:inline-block;transition:transform .7s var(--ease);color:var(--gold)}
.aw-talk:hover .t{color:var(--gold-2)}
.aw-talk:hover .t i{transform:translateX(.25em)}
.aw-talk .s{display:block;margin-top:1.4rem;font-size:.92rem;color:var(--muted);max-width:32rem}

/* ── smooth scroll wrapper ──────────────────────────────────── */
html.aw-smooth{scroll-behavior:auto}
html.aw-smooth #aw-scroll{position:fixed;top:0;left:0;width:100%;will-change:transform}
html.aw-smooth body{overflow-x:visible}

/* ── legal page var fixes ───────────────────────────────────── */
.legal-wrap p{color:var(--muted)}
.legal-wrap a{color:var(--gold-2)}

/* ── reduced motion ─────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .aw-w>span{transform:none}
  .aw-img{clip-path:none;filter:none}
  .sec-head::before{transform:scaleX(1)}
  .veil .vmark{animation:none}
}

/* ── hero project tag (slideshow caption) ─────────────────── */
.proj-tag b{display:inline-flex;align-items:center;gap:.6em}
.proj-tag a{color:var(--gold-2);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .4s}
.proj-tag a:hover{border-color:var(--gold-2)}
.proj-tag .sep{color:var(--muted)}
.proj-tag span:not(.sep){color:var(--muted);letter-spacing:.2em}
.proj-tag b.sw{animation:awTag .9s var(--ease) both}
@keyframes awTag{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── hero legibility over bright renders ───────────────────── */
.hero-media::after{background:
  linear-gradient(90deg,rgba(10,10,11,.62) 0%,rgba(10,10,11,.28) 45%,rgba(10,10,11,.05) 75%),
  linear-gradient(180deg,rgba(10,10,11,.45) 0%,rgba(10,10,11,.1) 35%,rgba(10,10,11,.5) 78%,var(--bg) 100%)}
.hero h1{text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero .sub{color:#e6e1d8;text-shadow:0 1px 12px rgba(0,0,0,.45)}

/* ── scroll cue: slow, soft travelling line instead of a pulsing one ── */
.scrollcue::after{animation:awCue 3.6s cubic-bezier(.65,0,.35,1) infinite;transform-origin:top}
@keyframes awCue{0%{transform:scaleY(0);opacity:0}25%{opacity:1}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1) translateY(100%);opacity:0}}

/* ── page curtain (subpage transitions) ─────────────────────── */
.veil{transform:translate3d(0,0,0);transform-origin:center;transition:transform .9s cubic-bezier(.76,0,.24,1)}
body.ready .veil{transform:translate3d(0,-101%,0)}
body.leaving .veil{transform:translate3d(0,0,0)}
.veil::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.7}
.veil .vtitle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;overflow:hidden;padding:.1em .2em;
  font-family:var(--serif);font-weight:300;font-size:clamp(2.2rem,6.5vw,6rem);letter-spacing:.02em;color:var(--ink);line-height:1.1}
.veil .vtitle span{display:inline-block;transform:translateY(110%);opacity:0;animation:awVt .9s cubic-bezier(.22,1,.36,1) .25s forwards}
.veil.out .vtitle span{animation-delay:.3s}
@keyframes awVt{to{transform:none;opacity:1}}
.veil.held .vtitle span{animation:none;transform:none;opacity:1}
.veil.sub .vmark{left:clamp(1.4rem,4vw,3.2rem);top:auto;bottom:clamp(2.6rem,5vw,4rem);width:1.5rem;transform:none;animation:none;color:var(--gold);opacity:.9}
.veil.sub .vtag{left:clamp(3.6rem,4vw + 2.2rem,5.6rem);bottom:clamp(2.75rem,5vw + .2rem,4.2rem)}
body.ready .veil .vtitle{opacity:0;transition:opacity .3s}
@media(prefers-reduced-motion:reduce){.veil .vtitle span{animation:none;transform:none;opacity:1}}
.veil.out .vcount,.veil.out .vline{display:none}

/* ═══ intro: a drop into the lake (first visit) ═══════════════ */
.veil.intro .vlago{position:absolute;left:50%;top:50%;width:clamp(4.6rem,8vw,6.6rem);height:calc(clamp(4.6rem,8vw,6.6rem)*1.14);transform:translate(-50%,-62%)}
.veil.intro .vmark{position:absolute;left:0;top:0;width:100%;transform:none;animation:none;color:var(--gold);opacity:0;
  clip-path:inset(100% 0 0 0)}
.veil.intro.play .vmark{animation:lagoMark 1.1s cubic-bezier(.22,1,.36,1) .15s forwards}
@keyframes lagoMark{0%{opacity:0;clip-path:inset(100% 0 0 0)}100%{opacity:1;clip-path:inset(0 0 0 0)}}
.veil.intro .vdrop{position:absolute;left:50%;top:-38vh;width:5px;height:11px;margin-left:-2.5px;border-radius:50% 50% 50% 50%/40% 40% 60% 60%;
  background:var(--gold-2);opacity:0;box-shadow:0 0 12px rgba(201,168,106,.5)}
.veil.intro.play .vdrop{animation:lagoDrop .95s cubic-bezier(.5,0,.9,.4) .05s forwards}
@keyframes lagoDrop{0%{opacity:0;top:-38vh;transform:scaleY(1)}15%{opacity:1}92%{opacity:1;top:calc(60% - 10px);transform:scaleY(1.7)}100%{opacity:0;top:calc(60% - 4px);transform:scaleY(.3)}}
.veil.intro .vrip{position:absolute;left:50%;top:60%;width:1em;height:1em;font-size:clamp(4.6rem,8vw,6.6rem);border-radius:50%;
  border:1px solid var(--gold);transform:translate(-50%,-50%) scale(.1);opacity:0;will-change:transform,opacity}
.veil.intro.play .vrip{animation:lagoRip 2.4s cubic-bezier(.16,.8,.3,1) forwards}
.veil.intro.play .vrip:nth-child(3){animation-delay:1s}
.veil.intro.play .vrip:nth-child(4){animation-delay:1.22s;border-color:var(--gold-2)}
.veil.intro.play .vrip:nth-child(5){animation-delay:1.48s}
.veil.intro.play .vrip:nth-child(6){animation-delay:1.8s;border-color:var(--gold-2)}
@keyframes lagoRip{0%{transform:translate(-50%,-50%) scale(.1);opacity:0}8%{opacity:.5}100%{transform:translate(-50%,-50%) scale(14);opacity:0}}
.veil.intro .vword{position:absolute;left:50%;top:calc(100% + 1.6rem);transform:translateX(-50%);width:clamp(12rem,24vw,19rem);overflow:hidden;clip-path:inset(0)}
.veil.intro .vword span{display:block;color:var(--ink);opacity:.94;transform:translateY(125%);line-height:0}
.veil.intro .vword svg{width:100%;height:auto;display:block}
.veil.intro.play .vword span{animation:lagoWord 1.1s cubic-bezier(.22,1,.36,1) 1.25s forwards}
@keyframes lagoWord{to{transform:none}}
.veil.intro .vtag{left:50%;transform:translateX(-50%);bottom:clamp(2.2rem,5vw,3.6rem);color:var(--gold);opacity:0;letter-spacing:.55em;text-indent:.55em}
.veil.intro.play .vtag{animation:lagoTag 1.2s ease 1.6s forwards}
@keyframes lagoTag{to{opacity:.85}}
.veil.intro .vline{left:50%;right:auto;width:min(22rem,60vw);transform:translateX(-50%);bottom:clamp(1.6rem,4vw,2.8rem);background:rgba(201,168,106,.18)}
.veil.intro .vline::after{transform-origin:center}
body.ready .veil.intro .vlago,body.ready .veil.intro .vtag,body.ready .veil.intro .vline{opacity:0;transition:opacity .35s}
@media(prefers-reduced-motion:reduce){.veil.intro .vmark,.veil.intro .vword span{opacity:1;transform:none;clip-path:none}.veil.intro .vdrop,.veil.intro .vrip{display:none}}

/* ═══ cursor: gold dot + breathing ring, native cursor hidden ═══ */
@media(hover:hover) and (pointer:fine){
  html.aw-cur,html.aw-cur a,html.aw-cur button,html.aw-cur [role=button],html.aw-cur label{cursor:none}
  html.aw-cur input,html.aw-cur textarea,html.aw-cur select{cursor:auto}
}
.cursor{width:5px;height:5px;background:var(--gold-2);mix-blend-mode:normal;box-shadow:0 0 0 1px rgba(10,10,11,.35);
  transition:transform .3s var(--ease),opacity .3s}
.cursor-ring{width:38px;height:38px;border:1px solid rgba(201,168,106,.7);mix-blend-mode:normal;box-shadow:0 0 0 1px rgba(10,10,11,.25) inset;
  transition:width .45s var(--ease),height .45s var(--ease),background .35s,border-color .35s,opacity .3s,transform .25s var(--ease)}
.cursor-ring::after{content:'';position:absolute;inset:-1px;border-radius:50%;border:1px solid rgba(201,168,106,.35);animation:curBreath 2.8s ease-in-out infinite}
@keyframes curBreath{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.22);opacity:0}}
.cursor-ring.hov{width:54px;height:54px;background:rgba(201,168,106,.14);border-color:var(--gold-2)}
.cursor-ring.hov::after{animation:none;opacity:0}
html.cur-hov .cursor{transform:translate(-50%,-50%) scale(0)}
.cursor-ring.down{transform:translate(-50%,-50%) scale(.78)}
.cursor-ring.aw-view{width:92px;height:92px;background:rgba(10,10,11,.45);border-color:var(--gold-2);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.cursor-ring .aw-cur-lbl{color:var(--gold-2)}
html.cur-out .cursor,html.cur-out .cursor-ring,html.cur-hide .cursor,html.cur-hide .cursor-ring{opacity:0}

/* ── footer credit ──────────────────────────────────────────── */
.copy{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;align-items:center}
.copy .credit{margin-left:auto;color:var(--muted);text-decoration:none;letter-spacing:.12em;font-size:.72rem;text-transform:uppercase;
  border-bottom:1px solid transparent;transition:color .35s,border-color .35s}
.copy .credit:hover{color:var(--gold-2);border-color:var(--gold-2)}
@media(max-width:600px){.copy .credit{margin-left:0}}
/* hairline fix: hero frames get their own compositing layer, overlays overshoot the clip edge */
.pd-hero,.phero,.feat-img{isolation:isolate;transform:translateZ(0)}
.pd-hero::after,.phero .bg::after{inset:-1px -1px -3px}
.pd-hero>img,.phero .bg img,.phero .bg video{bottom:auto;top:-2px}
.feat-img{background:var(--bg)}
.pd-hero::after,.phero .bg::after{transform:translateZ(0)}
/* mobile menu: lock page scroll, keep overlay opaque and viewport-fixed (header backdrop-filter must not become its containing block) */
@media(max-width:880px){
  body.menu-lock{position:fixed;left:0;right:0;width:100%;overflow:hidden}
  html.menu-open header,html.menu-open header.solid{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;transform:none;transition:none}
  .menu{background:#0a0a0b;backdrop-filter:none;-webkit-backdrop-filter:none}
  .menu.mobile{touch-action:none;overscroll-behavior:contain}
}

/* ── Lesbarkeit (Feedback 10/2026): mehr Kontrast, etwas größere Kleintexte ── */
:root{--muted:#b4ada4;--faint:#857e76}
.menu a{font-size:.84rem;color:#d8d2c9}
.menu a:hover,.menu a.active{color:#fff}
.lang-btn{font-size:.8rem;color:#d8d2c9}
.lk-top{font-size:.66rem;color:var(--muted)}
header:not(.solid) .menu a,header:not(.solid) .lang-btn,header:not(.solid) .lk-top,header:not(.solid) .lk-big{text-shadow:0 1px 14px rgba(0,0,0,.75),0 0 2px rgba(0,0,0,.6)}
.eyebrow{font-size:.76rem}
.num{font-size:.76rem;color:var(--muted)}
.proj-tag{font-size:.78rem}
.proj-tag span:not(.sep){color:#d8d2c9}
.scrollcue{font-size:.72rem;color:var(--muted)}
.stat .l,.filters button,.more-item .ty,.more-item .yr,.member .role{font-size:.78rem}
.more-item .ty,.more-item .yr{color:var(--muted)}
.feat-txt .k{font-size:.76rem}
.card .info .k{font-size:.74rem;text-shadow:0 1px 10px rgba(0,0,0,.7)}
.card .info .k .mt{color:#d8d2c9}
.pd-meta .l,.pd-nav .l,.cline .l,.foot h5{font-size:.74rem;color:var(--muted)}
.copy{font-size:.8rem;color:var(--muted)}
.copy .credit{color:var(--muted);font-size:.74rem}
.veil .vtag{font-size:.7rem}
.hero .eyebrow,.hero .sub,.hero h1,.phero .wrap,.pd-hero .inner{text-shadow:0 2px 18px rgba(0,0,0,.6)}
.phero .bg::after{background:linear-gradient(180deg,rgba(10,10,11,.78),rgba(10,10,11,.6) 55%,var(--bg))}
.pd-hero::after{background:linear-gradient(180deg,rgba(10,10,11,.58),rgba(10,10,11,.12) 45%,var(--bg))}
@media(max-width:880px){.menu a{font-size:1.15rem;color:#ece7de;text-shadow:none}}
/* Bildnachweise auf der Projektseite */
.pd-credits{display:flex;flex-wrap:wrap;gap:.6rem 2.4rem;margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--line);font-size:.86rem;color:var(--ink)}
.pd-credits b{display:block;font-weight:400;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-bottom:.3rem}
.pd-credits a{color:var(--gold-2);text-decoration:none;border-bottom:1px solid rgba(230,210,168,.35);transition:border-color .3s}
.pd-credits a:hover{border-color:var(--gold-2)}

/* ── Zugänglichkeit & Kleinigkeiten (Review 10/2026) ── */
:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}
input:focus-visible,textarea:focus-visible{outline:none;border-bottom-color:var(--gold-2)}
.skip{position:absolute;left:-200vw;top:0;z-index:3000;background:#0a0a0b;color:var(--gold-2);padding:.8rem 1.2rem;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase}
.skip:focus{left:1rem;top:1rem}
.form-err{color:#e0a28c;display:none}.form-err.show{display:block}
.mm-open{font-size:.7rem}.lang-hint{font-size:.72rem}.pd-credits b{font-size:.74rem}
.lang-btn{padding:.6rem .4rem;min-height:36px}
.burger{min-width:44px;min-height:44px;justify-content:center}
.scrolly figure img,.gal img{aspect-ratio:16/10;object-fit:cover;background:#121214}
.ev-block .gal img{aspect-ratio:3/2}
@media(max-width:880px){.menu{overflow-y:auto;-webkit-overflow-scrolling:touch;justify-content:flex-start;padding-top:6rem}}