/* lucasf.ink – Projekt-Unterseiten
   Die Farb-Tokens entsprechen denen der Startseite (index.html).
   Wer dort Farben aendert, muss sie hier mitziehen. */

:root{
  --page:#EEF1F6;
  --label:#161A21;
  --secondary:rgba(22,26,33,.6);
  --glass:rgba(255,255,255,.52);
  --glass-hover:rgba(255,255,255,.66);
  --edge:rgba(255,255,255,.75);
  --sheen:rgba(255,255,255,.38);
  --sheen-edge:rgba(22,32,60,.055);
  --shadow:0 10px 30px rgba(22,32,60,.12), 0 2px 6px rgba(22,32,60,.06);
  --shadow-lift:0 26px 60px rgba(22,32,60,.22), 0 6px 14px rgba(22,32,60,.10);
  --blob-1:#6FA8FF;
  --blob-2:#FF9EC4;
  --blob-3:#7FE3C4;
  --blob-4:#FFC482;
  --blob-alpha:.5;
  --grain:.05;
  --chip:rgba(255,255,255,.6);
  --chip-hover:rgba(255,255,255,.9);
  --win-bar:#ECEEF2;
  --win-url:#FFFFFF;
  --win-text:#6B7280;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --page:#0B0D12;
    --label:#F2F4F8;
    --secondary:rgba(235,238,245,.62);
    --glass:rgba(255,255,255,.07);
    --glass-hover:rgba(255,255,255,.12);
    --edge:rgba(255,255,255,.16);
    --sheen:rgba(255,255,255,.05);
    --sheen-edge:rgba(0,0,0,.14);
    --shadow:0 14px 40px rgba(0,0,0,.55);
    --shadow-lift:0 28px 70px rgba(0,0,0,.7);
    --blob-1:#2E63FF;
    --blob-2:#B23BC8;
    --blob-3:#0E9E86;
    --blob-4:#D4641A;
    --blob-alpha:.22;
    --grain:.08;
    --chip:rgba(255,255,255,.08);
    --chip-hover:rgba(255,255,255,.18);
    --win-bar:#262B35;
    --win-url:#171B22;
    --win-text:#9AA3B2;
  }
}
:root[data-theme="dark"]{
  --page:#0B0D12;
  --label:#F2F4F8;
  --secondary:rgba(235,238,245,.62);
  --glass:rgba(255,255,255,.07);
  --glass-hover:rgba(255,255,255,.12);
  --edge:rgba(255,255,255,.16);
  --sheen:rgba(255,255,255,.05);
  --sheen-edge:rgba(0,0,0,.14);
  --shadow:0 14px 40px rgba(0,0,0,.55);
  --shadow-lift:0 28px 70px rgba(0,0,0,.7);
  --blob-1:#2E63FF;
  --blob-2:#B23BC8;
  --blob-3:#0E9E86;
  --blob-4:#D4641A;
  --blob-alpha:.22;
  --grain:.08;
  --chip:rgba(255,255,255,.08);
  --chip-hover:rgba(255,255,255,.18);
  --win-bar:#262B35;
  --win-url:#171B22;
  --win-text:#9AA3B2;
}

/* Projektfarben: zwei Toene, die langsam pendeln (wie auf den Kacheln) */
@property --t1{syntax:"<color>";inherits:true;initial-value:#8A94A8}
@property --t2{syntax:"<color>";inherits:true;initial-value:#8A94A8}
@property --gx1{syntax:"<percentage>";inherits:false;initial-value:10%}
@property --gy1{syntax:"<percentage>";inherits:false;initial-value:5%}
@property --gx2{syntax:"<percentage>";inherits:false;initial-value:90%}
@property --gy2{syntax:"<percentage>";inherits:false;initial-value:95%}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  min-height:100dvh;
  background:var(--page);
  color:var(--label);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI",Roboto,sans-serif;
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
  animation:tint 14s ease-in-out infinite alternate;
}
@keyframes tint{
  from{--t1:var(--t1a);--t2:var(--t2a)}
  to{--t1:var(--t1b);--t2:var(--t2b)}
}
img,video{display:block;max-width:100%}
a{color:inherit}

/* Hintergrund wie auf der Startseite */
.bg{
  position:fixed;
  inset:-25%;
  z-index:-2;
  filter:blur(110px);
  animation:hue 26s ease-in-out infinite alternate;
}
@keyframes hue{from{filter:blur(110px) hue-rotate(0deg)}to{filter:blur(110px) hue-rotate(70deg)}}
.blob{position:absolute;border-radius:50%;opacity:var(--blob-alpha)}
.b1{width:46vmax;height:46vmax;left:-6%;top:-4%;background:var(--t1);animation:drift1 28s ease-in-out infinite}
.b2{width:40vmax;height:40vmax;right:-8%;top:6%;background:var(--blob-2);animation:drift2 34s ease-in-out infinite}
.b3{width:44vmax;height:44vmax;left:8%;bottom:-12%;background:var(--blob-3);animation:drift3 31s ease-in-out infinite}
.b4{width:34vmax;height:34vmax;right:2%;bottom:-6%;background:var(--t2);animation:drift4 39s ease-in-out infinite}
/* Scroll-Parallaxe: jede Wolke wandert einen festen, kleinen Bruchteil der
   gescrollten Strecke (--sy in px) mit, auf jeder Seite gleich weit.
   "translate" addiert sich zur Drift-Animation. */
.blob{translate:0 calc(var(--sy, 0px) * var(--pf, 0))}
.b1{--pf:-.05}
.b2{--pf:-.03}
.b3{--pf:-.06}
.b4{--pf:-.04}
@keyframes drift1{50%{transform:translate3d(14vw,10vh,0) scale(1.18)}}
@keyframes drift2{50%{transform:translate3d(-12vw,16vh,0) scale(.86)}}
@keyframes drift3{50%{transform:translate3d(16vw,-12vh,0) scale(1.12)}}
@keyframes drift4{50%{transform:translate3d(-14vw,-8vh,0) scale(1.22)}}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Kopfzeile ---------- */
.top{
  position:fixed;
  top:calc(14px + env(safe-area-inset-top));
  left:calc(14px + env(safe-area-inset-left));
  right:calc(14px + env(safe-area-inset-right));
  z-index:10;
  display:flex;
  justify-content:space-between;
  align-items:center;
  pointer-events:none;
}
.top > *{pointer-events:auto}
.pill-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:40px;
  padding:0 16px 0 12px;
  border-radius:999px;
  font-size:14px;
  font-weight:590;
  text-decoration:none;
  color:var(--label);
  background:var(--glass);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--edge);
  box-shadow:var(--shadow);
  transition:background-color .25s ease, transform .45s cubic-bezier(.16,1,.3,1);
}
.pill-btn svg{width:16px;height:16px}
@media (hover:hover){.pill-btn:hover{background:var(--glass-hover);transform:translateX(-2px)}}
.theme{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  padding:0;
  border-radius:50%;
  color:var(--label);
  background:var(--glass);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--edge);
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:background-color .25s ease, transform .45s cubic-bezier(.16,1,.3,1);
}
.theme svg{width:18px;height:18px}
.theme .moon{display:none}
.theme.is-dark .sun{display:none}
.theme.is-dark .moon{display:block}
@media (hover:hover){.theme:hover{background:var(--glass-hover);transform:rotate(-12deg)}}
.corner{display:flex;gap:8px}
@media (hover:hover){.mailto:hover{transform:translateY(-2px)}}
:where(a,button):focus-visible{outline:2px solid var(--label);outline-offset:3px;border-radius:8px}


/* ---------- Seite ---------- */
.page{
  max-width:1140px;
  margin:0 auto;
  /* Platz fuer die festen Knoepfe oben */
  padding:calc(78px + env(safe-area-inset-top)) 18px 40px;
}
.glass{
  position:relative;
  border-radius:28px;
  background:
    radial-gradient(150% 120% at var(--gx1) var(--gy1), color-mix(in srgb, var(--t1) 16%, transparent), transparent 75%),
    radial-gradient(140% 120% at var(--gx2) var(--gy2), color-mix(in srgb, var(--t2) 13%, transparent), transparent 75%),
    var(--glass);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  backdrop-filter:blur(26px) saturate(180%);
  border:1px solid var(--edge);
  box-shadow:var(--shadow), inset 0 1px 0 var(--edge);
  animation:roam 23s ease-in-out infinite alternate;
}
@keyframes roam{
  0%{--gx1:8%;--gy1:4%;--gx2:92%;--gy2:96%}
  50%{--gx1:46%;--gy1:-6%;--gx2:58%;--gy2:108%}
  100%{--gx1:-4%;--gy1:48%;--gx2:104%;--gy2:52%}
}

.intro{
  display:grid;
  grid-template-columns:1fr auto;
  gap:28px;
  align-items:center;
  padding:clamp(24px,4vw,44px);
}
.intro.no-icon{grid-template-columns:1fr}
/* Logos, die bis an den Rand gehen, bekommen Luft, damit die runden Ecken nichts abschneiden */
.app-icon--pad{padding:12%;object-fit:contain}
/* Das Projekt-Logo sitzt rechts, nicht vorne links */
.app-icon{
  order:2;
  align-self:start;
  width:clamp(84px,12vw,132px);
  height:auto;
  aspect-ratio:1;
  border-radius:24%;
  box-shadow:0 18px 40px -12px color-mix(in srgb, var(--t1) 60%, transparent), 0 0 0 1px var(--edge);
}
h1{
  margin:0;
  font-size:clamp(34px,6vw,60px);
  font-weight:700;
  letter-spacing:-.035em;
  line-height:1.02;
}
.kicker{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:20px;
  padding:4px 11px 4px 9px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
  background:var(--chip);
  border:1px solid var(--edge);
}
.kicker::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--t1);
  box-shadow:0 0 10px var(--t1);
}
.lead{
  margin:24px 0 0;
  max-width:720px;
  font-size:clamp(17px,2vw,20px);
  color:var(--secondary);
}
.lead + .lead{margin-top:12px}
/* Chromatischer Glow, wie auf der Startseite */
.lead{
  text-shadow:
    -.5px 0 rgba(255,77,160,.24),
    .5px 0 rgba(77,121,255,.24),
    0 0 22px rgba(160,125,255,.18);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .lead{text-shadow:-.6px 0 rgba(255,90,170,.42),.6px 0 rgba(90,150,255,.42),0 0 24px rgba(170,140,255,.3)}
}
:root[data-theme="dark"] .lead{text-shadow:-.6px 0 rgba(255,90,170,.42),.6px 0 rgba(90,150,255,.42),0 0 24px rgba(170,140,255,.3)}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 18px;
  border-radius:999px;
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  color:#fff;
  background:linear-gradient(120deg, var(--t1), var(--t2));
  box-shadow:0 12px 26px -10px color-mix(in srgb, var(--t1) 70%, transparent);
  transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
.btn svg{width:15px;height:15px}
.btn--ghost{
  color:var(--label);
  background:var(--chip);
  border:1px solid var(--edge);
  box-shadow:none;
}
@media (hover:hover){.btn:hover{transform:translateY(-2px)}}

section{margin-top:clamp(36px,6vw,64px)}
h2{
  margin:0 0 20px;
  font-size:clamp(24px,3.4vw,34px);
  font-weight:680;
  letter-spacing:-.025em;
  line-height:1.1;
}
.sub{margin:-12px 0 22px;color:var(--secondary)}

/* Textspalten mit Werkzeugen */
.cols{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:20px;
}
.cols .glass{padding:26px 28px}
.cols h3{margin:0 0 10px;font-size:18px;letter-spacing:-.01em}
.cols p{margin:0 0 12px;color:var(--secondary)}
.cols p:last-child{margin-bottom:0}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.chips li{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 12px 6px 10px;
  border-radius:999px;
  font-size:14px;
  font-weight:560;
  background:var(--chip);
  border:1px solid var(--edge);
}
.chips li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--t2)}
.credits-box{padding:26px 28px}
.chips--plain li{font-size:13px;font-weight:520;padding:5px 11px}
.chips--plain li::before{display:none}
.steps{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;gap:12px}
.steps li{position:relative;padding-left:40px;color:var(--secondary)}
.steps li b{color:var(--label)}
.steps li::before{
  counter-increment:s;
  content:counter(s);
  position:absolute;
  left:0;
  top:0;
  width:28px;
  height:28px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:13px;
  font-weight:700;
  color:#fff;
  background:linear-gradient(120deg, var(--t1), var(--t2));
}

/* Credits und Collaborators */
/* Credits schmal (1/3), Collaborators breit (2/3) mit zwei Spalten;
   der Hauptpartner oben ueber die volle Breite */
.cols--credits{grid-template-columns:1fr 2fr}
.collabs--grid{grid-template-columns:1fr 1fr}
.collabs--grid li:first-child{grid-column:1 / -1}
.credits{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.credits li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline}
.credits .n{
  padding:3px 9px;
  border-radius:999px;
  font-size:12px;
  font-weight:650;
  white-space:nowrap;
  background:var(--chip);
  border:1px solid var(--edge);
}
.credits b{display:block;color:var(--label)}
.credits li > span:last-child{font-size:14px;color:var(--secondary)}
.fine{margin:16px 0 0;font-size:13px;color:var(--secondary)}
.fine--top{margin:-4px 0 16px}
.collabs{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.collab{
  display:flex;
  align-items:center;
  gap:12px;
  padding:9px 12px;
  border-radius:16px;
  text-decoration:none;
  background:var(--chip);
  border:1px solid var(--edge);
  transition:background-color .25s ease, transform .45s cubic-bezier(.16,1,.3,1);
}
.collab .ig{
  flex:none;
  width:36px;
  height:36px;
  border-radius:11px;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(135deg,#F9CE34,#EE2A7B 55%,#6228D7);
}
.collab .ig svg{width:19px;height:19px}
.collab .who{flex:1;min-width:0;font-size:14px;color:var(--secondary)}
.collab .who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.collab .who b{display:block;font-size:15px;line-height:1.4;padding-bottom:1px;color:var(--label);overflow:hidden;text-overflow:ellipsis}
.collab .out{flex:none;width:16px;height:16px;color:var(--secondary)}
@media (hover:hover){.collab:hover{background:var(--chip-hover);transform:translateY(-2px)}}

/* ---------- Galerien ---------- */
.gallery{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.gallery--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.gallery--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.gallery--1{grid-template-columns:1fr}
figure{margin:0}
figcaption{margin-top:10px;font-size:14px;color:var(--secondary)}
.zoom{
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:none;
  color:inherit;
  text-align:left;
  cursor:zoom-in;
}
.shot{
  overflow:hidden;
  border-radius:18px;
  border:1px solid var(--edge);
  box-shadow:var(--shadow);
  transition:transform .55s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
}
.shot img,.shot video{width:100%;height:100%;object-fit:cover}
@media (hover:hover){
  .zoom:hover .shot,.zoom:hover .browser{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
}
.tall{aspect-ratio:9/16;background:#000}

.wide{aspect-ratio:16/9;background:#000}
.cine{aspect-ratio:1920/804;background:#000}
/* Logo-Kacheln: Logo mittig auf ruhigem Grund */
.logo-card{aspect-ratio:1;display:grid;place-items:center;background:#000}
.logo-card img{width:100%;height:100%;object-fit:cover}
.logo-card--hell,.logo-card--dunkel{padding:14%}
.logo-card--hell{background:#F7F7F4}
.logo-card--dunkel{background:#0E0F12}
.logo-card--hell img,.logo-card--dunkel img{object-fit:contain}
.logo-card--dunkel img{filter:invert(1)}
/* Textkachel zwischen Videos, gleiche Hoehe wie die Hochformate daneben */
/* Textkachel neben den Reels: eine ruhige, grosse Aussage in den Projektfarben */
.note-tile{
  grid-column:span 2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(28px,4vw,52px);
  background:
    radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--t1) 26%, transparent), transparent 70%),
    radial-gradient(120% 100% at 100% 100%, color-mix(in srgb, var(--t2) 22%, transparent), transparent 70%),
    var(--glass);
}
.note-kicker{
  font-size:12px;
  font-weight:650;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--secondary);
}
.note-big{
  margin:14px 0 0;
  font-size:clamp(24px,2.8vw,34px);
  font-weight:680;
  letter-spacing:-.025em;
  line-height:1.15;
  color:var(--label);
}
.note-small{margin:16px 0 0;font-size:15px;line-height:1.5;color:var(--secondary);max-width:34ch}
.collab .ig--yt{background:#FF0000}
.collab .ig--yt svg{width:20px;height:20px}
.collabs--row{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.collabs--row li:first-child{grid-column:auto}

/* Browserfenster */
.browser{
  overflow:hidden;
  border-radius:14px;
  background:var(--win-url);
  box-shadow:0 22px 50px -16px rgba(10,14,30,.45), 0 0 0 1px var(--edge);
  transition:transform .55s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
}
.browser .bar{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;background:var(--win-bar)}
.browser .bar i{width:11px;height:11px;border-radius:50%;background:#FF5F57}
.browser .bar i:nth-child(2){background:#FEBC2E}
.browser .bar i:nth-child(3){background:#28C840}
.browser .url{
  flex:0 1 46%;
  min-width:0;
  height:22px;
  margin-left:14px;
  padding:0 10px;
  border-radius:7px;
  font-size:12px;
  line-height:22px;
  color:var(--win-text);
  background:var(--win-url);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.browser img{width:100%;height:auto}

/* Shorts mit Ton-Knopf */
.short{position:relative;cursor:pointer}
.short .play{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
  transition:opacity .3s ease;
}
.short .play span{
  width:52px;
  height:52px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  background:rgba(0,0,0,.32);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.35);
}
.short .play svg{width:20px;height:20px;margin-left:2px}
.short.is-playing .play{opacity:0}
.sound{
  position:absolute;
  right:10px;
  bottom:10px;
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  padding:0;
  color:#fff;
  background:rgba(0,0,0,.4);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.3);
  cursor:pointer;
}
.sound svg{width:17px;height:17px}
.sound .on{display:none}
.sound[aria-pressed="true"] .on{display:block}
.sound[aria-pressed="true"] .off{display:none}

/* Grosse Ansicht */
.lightbox{
  width:100vw;
  height:100dvh;
  max-width:none;
  max-height:none;
  margin:0;
  padding:0;
  border:0;
  overflow:hidden;
  color:#fff;
  background:transparent;
}
.lightbox[open]{display:grid;place-items:center}
.lightbox::backdrop{background:rgba(5,7,15,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.lightbox figure{
  display:grid;
  justify-items:center;
  gap:12px;
  padding:calc(60px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom));
  animation:zoomIn .4s cubic-bezier(.16,1,.3,1);
}
@keyframes zoomIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}
.lightbox img,.lightbox video{
  max-width:calc(100vw - 32px);
  max-height:calc(100dvh - 130px);
  width:auto;
  height:auto;
  border-radius:14px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.lightbox figcaption{color:rgba(255,255,255,.75)}
.lightbox .close{
  position:fixed;
  top:calc(14px + env(safe-area-inset-top));
  right:14px;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  padding:0;
  border-radius:50%;
  color:#fff;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  cursor:pointer;
}
.lightbox .close svg{width:16px;height:16px}

/* ---------- Footer: Social-Kacheln wie auf der Startseite ---------- */
.site-foot{
  max-width:1140px;
  margin:0 auto;
  padding:30px 18px calc(28px + env(safe-area-inset-bottom));
}
.social{display:flex;justify-content:center;gap:10px}
.social-btn{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--label);
  background:var(--glass);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--edge);
  box-shadow:var(--shadow);
  transition:background-color .25s ease, transform .45s cubic-bezier(.16,1,.3,1);
}
.social-btn svg{width:18px;height:18px}
.social-btn:focus-visible{outline:2px solid var(--label);outline-offset:3px}
@media (hover:hover){.social-btn:hover{background:var(--glass-hover);transform:translateY(-2px)}}
.legal{display:flex;justify-content:center;gap:22px;margin-top:18px;font-size:13px}
.legal a{color:var(--secondary);text-decoration:none}
@media (hover:hover){.legal a:hover{color:var(--label)}}

/* ---------- Schmal ---------- */
@media (max-width:860px){
  .cols,.cols--credits{grid-template-columns:1fr}
  .gallery--3,.gallery--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .collabs--grid{grid-template-columns:1fr}
  .intro{grid-template-columns:1fr;gap:18px}
  .app-icon{position:absolute;top:22px;right:22px;width:60px}
  .intro:not(.no-icon) h1{padding-right:72px}
  .gallery,.gallery--3{grid-template-columns:1fr}
  .gallery--4{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .note-tile{grid-column:1 / -1}
  .browser .bar{height:26px}
  .browser .bar i{width:9px;height:9px}
  .browser .url{height:16px;line-height:16px;font-size:10px}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  body,.bg,.blob,.glass,.lightbox figure{animation:none}
  .shot,.browser,.btn,.pill-btn,.theme{transition:none}
}