/* Projektszenen: Event, Food mit Smartphone, FPV, Scroll Choreografie */

.work { outline: none; }
.project { position: relative; }

h2 {
  font-family: var(--display);
  font-size: clamp(1.9rem, 4vw, 3.6rem);
  letter-spacing: -.05em;
  line-height: 1;
  font-weight: 600;
}
.bignum {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(3.2rem, 8vw, 8.5rem);
  line-height: .8;
  letter-spacing: -.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(29, 31, 34, .28);
  margin-bottom: clamp(14px, 2.4vw, 30px);
  font-variant-numeric: tabular-nums;
}
.project-desc { max-width: 30rem; color: var(--mut); font-size: clamp(.98rem, 1.2vw, 1.08rem); line-height: 1.6; }
.project-info { display: grid; gap: 18px; justify-items: start; align-content: end; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags li {
  font-size: .8rem;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid rgba(29, 31, 34, .14);
  color: var(--ink);
}
.facts { font-size: .8rem; color: var(--mut); font-variant-numeric: tabular-nums; min-height: 1.2em; }
.facts:empty { display: none; }

/* Kleine Kennzeichnung neben dem FPV Video */
.info-kicker { display: inline-flex; align-items: center; gap: 12px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dark-mut); }
.info-kicker span { color: var(--lemon); font-variant-numeric: tabular-nums; letter-spacing: .04em; }

/* Einsatzbereiche FPV */
.usecases { display: grid; gap: 10px; }
.usecases-label { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dark-mut); }
.usecase-list { display: flex; flex-wrap: wrap; gap: 8px 20px; max-width: 30rem; }
.usecase-list li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  letter-spacing: -.02em;
  color: var(--dark-ink);
}
.usecase-list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lemon); }

/* Raster: Info und Bühne nebeneinander ab 1100px */
.project-grid { display: grid; gap: 28px; }
@media (min-width: 1100px) {
  .project-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 4vw, 80px); align-items: center; }
  .project-grid.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .project-grid.flip > .project-info { order: 2; }
  .project-info { padding-bottom: 8px; }
}

/* Bühne */
.stage {
  position: relative;
  background: #0d0e10;
  border-radius: clamp(12px, 1.3vw, 22px);
  overflow: hidden;
}
.stage video { display: block; background: #0d0e10; }

.missing {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 3;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  font-size: .95rem;
  color: var(--dark-mut);
  background: radial-gradient(120% 120% at 30% 20%, #23262b, #121316);
}
.is-missing .missing { display: flex; }
.is-missing video { visibility: hidden; }

/* Hochkante Videos als schwebende Karten mit weichem Lichtschein aus dem Video */
.stage.stage-v {
  --sh: min(calc(var(--vh) - var(--hh) - 7rem), 820px);
  height: var(--sh);
  display: grid;
  place-items: center;
  background: none;
  border-radius: 0;
  overflow: visible;
  isolation: isolate;
}
.stage-v .ambient, .stage-v .ambient-live {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--sh) * .5625 * 1.08);
  height: calc(var(--sh) * .96);
  max-width: none;
  object-fit: cover;
  z-index: -1;
  border-radius: 40px;
  transform: translate(-50%, -46%);
  filter: blur(56px) saturate(1.5);
  opacity: .55;
  pointer-events: none;
}
.stage-v .ambient-live { opacity: 0; transition: opacity 1.2s ease; }
.stage-v .ambient-live.on { opacity: .62; }
.project-fpv .stage-v .ambient { opacity: .7; }
.project-fpv .stage-v .ambient-live.on { opacity: .85; }
.p-frame {
  position: relative;
  height: 100%;
  aspect-ratio: 9 / 16;
  max-width: 100%;
  overflow: hidden;
  container-type: inline-size;
  border-radius: clamp(16px, 1.6vw, 26px);
  background: #000;
  box-shadow: 0 50px 90px -40px rgba(20, 22, 26, .7), 0 0 0 1px rgba(29, 31, 34, .06);
  transform: translateZ(0);
}
.project-fpv .p-frame { box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .08); }
.p-frame video { width: 100%; height: 100%; object-fit: cover; }
.stage-v:fullscreen { height: 100%; background: #000; }
.stage-v:-webkit-full-screen { height: 100%; background: #000; }
.stage-v:fullscreen .p-frame { border-radius: 0; }

@media (max-width: 1099px) {
  .stage.stage-v { --sh: min(calc(var(--vh) - var(--hh) - 9rem), 760px); }
}
@media (max-width: 759px) {
  .stage.stage-v { --sh: auto; height: auto; display: block; }
  .stage-v .ambient, .stage-v .ambient-live { display: none; }
  .p-frame {
    width: min(100%, calc((var(--vh) - var(--hh) - 6rem) * 9 / 16));
    height: auto;
    margin: 0 auto;
    box-shadow: 0 30px 60px -30px rgba(20, 22, 26, .6);
  }
}

/* Projekt 1 */
.project-event { padding: clamp(32px, 8vh, 110px) 0 clamp(72px, 13vh, 160px); }

/* Projekt 2 */
.food-scene {
  position: relative;
  display: grid;
  gap: 28px;
  justify-items: center;
  padding: clamp(40px, 8vh, 90px) var(--gut);
  background: var(--bg);
}
.food-scene::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(90vw, 760px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(230, 223, 159, .75), rgba(230, 223, 159, 0));
  pointer-events: none;
}
.scene-shade { display: none; }
.food-text { position: relative; display: grid; gap: 16px; justify-items: start; width: 100%; max-width: var(--maxw); }
.food-side { display: none; }
.phone-col { position: relative; display: grid; gap: 22px; justify-items: center; }

.phone {
  --h: min(calc(var(--vh) - var(--hh) - 11rem), 680px);
  position: relative;
  height: var(--h);
  aspect-ratio: 9 / 18;
  padding: calc(var(--h) * .012);
  border-radius: calc(var(--h) * .078);
  background: linear-gradient(145deg, #45484e, #1a1b1e 45%, #2b2d31);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .1),
    inset 0 0 0 calc(var(--h) * .004) #0c0d0f,
    0 50px 80px -34px rgba(20, 22, 26, .55),
    0 18px 30px -16px rgba(20, 22, 26, .35);
}
.phone::before, .phone::after {
  content: "";
  position: absolute;
  width: 3px;
  background: #2a2c30;
  border-radius: 2px;
}
.phone::before { left: -3px; top: 17%; height: 7%; box-shadow: 0 calc(var(--h) * .085) 0 #2a2c30; }
.phone::after { right: -3px; top: 24%; height: 11%; }

.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--h) * .066);
  background: #000;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.phone-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(125deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, 0) 32%);
  pointer-events: none;
}
.phone-screen video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  height: auto;
  object-fit: cover;
  background: #000;
}
.phone-screen .missing { font-size: .8rem; }
.phone-island {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: calc(var(--h) * .024);
  width: 27%;
  height: calc(var(--h) * .026);
  transform: translateX(-50%);
  background: #000;
  border-radius: 999px;
}
.phone-home {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: calc(var(--h) * .02);
  width: 32%;
  height: 4px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, .72);
  border-radius: 999px;
}
.phone-progress {
  position: absolute;
  z-index: 2;
  left: 7%;
  right: 7%;
  top: calc(var(--h) * .056);
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .28);
  overflow: hidden;
}
.phone-progress i {
  display: block;
  height: 100%;
  background: #fff;
  transform: scaleX(var(--pp, 0));
  transform-origin: left;
}
.phone-tap {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: inherit;
}
.phone-tap:focus-visible { outline: 2px solid var(--lemon); outline-offset: -4px; }

.sound-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 0 24px 0 20px;
  font: inherit;
  font-size: .95rem;
  color: var(--bg);
  background: var(--ink);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transform: translate3d(var(--mx), var(--my), 0);
  transition: transform .5s var(--out), background .25s ease;
}
.sound-btn:hover { background: #2c2f33; }
.sound-btn[aria-pressed="true"] { background: var(--lemon); color: var(--ink); }
.sound-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.sound-bars i { display: block; width: 3px; height: 4px; border-radius: 1px; background: currentColor; }
.sound-btn[aria-pressed="true"] .sound-bars i { animation: eq .9s ease-in-out infinite; }
.sound-btn[aria-pressed="true"] .sound-bars i:nth-child(2) { animation-delay: -.3s; }
.sound-btn[aria-pressed="true"] .sound-bars i:nth-child(3) { animation-delay: -.6s; }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 14px; } }

@media (min-width: 900px) {
  .food-scene {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding-block: clamp(48px, 8vh, 90px);
  }
  .food-text { grid-column: 1; align-self: end; max-width: 26rem; justify-self: start; padding-bottom: 12px; }
  .phone-col { grid-column: 2; }
  .food-side { display: block; grid-column: 3; justify-self: end; align-self: end; padding-bottom: 92px; }
  .food-hint { display: inline-block; font-size: .8rem; color: var(--mut); writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .04em; }
}

/* Projekt 3 */
.project-fpv {
  color: var(--dark-ink);
}
.fpv-body { background: var(--dark); padding: clamp(48px, 9vh, 110px) 0 clamp(64px, 11vh, 130px); }

/* FPV Hero: Vollbild Loop, an den Bildschirm gekoppelt, damit der Übergang aus dem Smartphone nahtlos ist.
   Mit Effekten bleibt das Video länger stehen, der Titel hält unten links, erst am Ende geht es weich ins Dunkle. */
.fpv-hero {
  position: relative;
  height: var(--vh);
  min-height: 520px;
  color: var(--dark-ink);
}
.fx .fpv-hero { height: calc(var(--vh) * 1.7); }
/* Ohne Effekte zeigt der Hero ein Standbild der Szene */
.fpv-hero { background: var(--dark) url("../media/poster-fpvloop-v.jpg") center / cover no-repeat; }
@media (orientation: landscape) { .fpv-hero { background-image: url("../media/poster-fpvloop-h.jpg"); } }
.fx .fpv-hero { background: none; }
.fpv-loop {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.9) saturate(1.1);
  background: var(--dark);
}
.fpv-hero-stick {
  position: relative;
  z-index: 1;
  height: var(--vh);
  min-height: 520px;
  display: grid;
  align-items: end;
  background: linear-gradient(to bottom, rgba(20, 22, 26, 0) 55%, rgba(20, 22, 26, .42) 100%);
}
.fx .fpv-hero-stick { position: sticky; top: 0; }
.fpv-hero-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--vh) * .5);
  z-index: 0;
  background: linear-gradient(to bottom, rgba(20, 22, 26, 0), var(--dark));
  pointer-events: none;
}
.fpv-hero-copy { position: relative; padding-bottom: clamp(56px, 11vh, 120px); }
.fpv-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(12px, 2vh, 22px);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(243, 240, 232, .9);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
.fpv-num { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.fpv-kicker-line { width: 36px; height: 1px; background: currentColor; opacity: .7; }
.fpv-hero-title {
  font-size: clamp(3.2rem, 11vw, 11rem);
  line-height: .9;
  letter-spacing: -.055em;
  text-shadow: 0 12px 50px rgba(0, 0, 0, .3);
}
.fl { display: inline-block; overflow: hidden; padding: 0 .06em .14em 0; margin-bottom: -.12em; vertical-align: top; }
.fl > span { display: inline-block; }
.js .fl > span { transform: translate3d(0, 108%, 0); transition: transform 1.4s var(--out); }
.js .fpv-hero .fl:nth-child(2) > span { transition-delay: .14s; }
.js .fpv-hero .fpv-kicker { opacity: 0; transform: translateY(12px); transition: opacity 1s ease .3s, transform 1s var(--out) .3s; }
.js .fpv-hero.in .fl > span, .force-in .fl > span { transform: none; }
.js .fpv-hero.in .fpv-kicker, .force-in .fpv-hero .fpv-kicker { opacity: 1; transform: none; }
.fpv-hero-cue {
  position: absolute;
  right: var(--gut);
  bottom: clamp(56px, 11vh, 120px);
  display: none;
  align-items: center;
  gap: 12px;
  font-size: .8rem;
  color: rgba(243, 240, 232, .85);
}
.fpv-hero-cue i { position: relative; width: 1px; height: 34px; overflow: hidden; background: rgba(243, 240, 232, .25); }
.fpv-hero-cue i::after { content: ""; position: absolute; inset: 0; background: var(--lemon); animation: cue 2s var(--ease) infinite; }
@media (min-width: 760px) { .fpv-hero-cue { display: inline-flex; } }

/* Szene im Food Bereich: das Smartphone fliegt in dieselbe FPV Aufnahme */
.scene-shade .fpv-loop { position: absolute; inset: 0; }
.project-fpv .bignum { -webkit-text-stroke-color: rgba(243, 240, 232, .3); }
.project-fpv .project-desc, .project-fpv .facts { color: var(--dark-mut); }
.project-fpv .tags li { border-color: rgba(243, 240, 232, .2); color: var(--dark-ink); }
.fpv-frame { transform-origin: 50% 0; }
.ext-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  margin-top: 6px;
  padding: 0 20px;
  color: var(--ink);
  background: var(--lemon);
  text-decoration: none;
  border-radius: 999px;
  font-size: .92rem;
  transform: translate3d(var(--mx), var(--my), 0);
  transition: transform .5s var(--out), background .25s ease;
}
.ext-link:hover, .ext-link:focus-visible { background: #efe9b0; }
.ext-link[hidden] { display: none; }
/* Abschluss nach FPV: Ideen in Bewegung wird als Flugbahn gezeichnet.
   Echte Vektorkonturen der Schrift, die Linie fährt jeden Buchstaben ab, danach füllt er sich.
   Der Punkt am Ende ist der gelbe Markenpunkt. Gleiche Farbe wie der FPV Bereich, keine Kante. */
.project-fpv { position: relative; z-index: 2; }
.outro-band {
  position: relative;
  z-index: 1;
  background: var(--dark);
  color: var(--dark-ink);
  padding: clamp(40px, 9vh, 120px) 0 calc(clamp(56px, 11vh, 140px) + 56px);
}
.fp-wrap { display: grid; gap: clamp(18px, 3vh, 34px); }
.fp-svg { display: block; width: 100%; height: auto; overflow: visible; }
.fp-narrow { display: none; }
@media (max-width: 759px) { .fp-wide { display: none; } .fp-narrow { display: block; } }
.fp-g {
  fill: var(--dark-ink);
  fill-opacity: 1;
  stroke: var(--lemon);
  stroke-width: 22;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-opacity: 0;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 0;
}
.fp-dot { fill: var(--lemon); transform-box: fill-box; transform-origin: center; }
.fp-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dark-mut);
}
.fp-sub i { width: 5px; height: 5px; border-radius: 50%; background: var(--lemon); }

/* Mit JS und Bewegung: erst Linie zeichnen, dann füllen */
.js .outro-band:not(.fp-done) .fp-g { fill-opacity: 0; stroke-opacity: 1; stroke-dashoffset: 1; }
.js .outro-band:not(.fp-done) .fp-dot { transform: scale(0); }
.js .outro-band:not(.fp-done) .fp-sub { opacity: 0; transform: translateY(10px); }
.js .outro-band.fp-on .fp-g {
  stroke-dashoffset: 0;
  fill-opacity: 1;
  stroke-opacity: 0;
  transition:
    stroke-dashoffset 1.5s cubic-bezier(.45, 0, .2, 1) calc(var(--g) * 70ms),
    fill-opacity .9s ease calc(var(--g) * 70ms + 1.05s),
    stroke-opacity .9s ease calc(var(--g) * 70ms + 1.4s);
}
.js .outro-band.fp-on .fp-dot { transform: scale(1); transition: transform .7s cubic-bezier(.34, 1.56, .64, 1) 2.3s; }
.js .outro-band.fp-on .fp-sub { opacity: 1; transform: none; transition: opacity .8s ease 2.5s, transform .9s var(--out) 2.5s; }
@media (prefers-reduced-motion: reduce) {
  .js .outro-band .fp-g { fill-opacity: 1 !important; stroke-opacity: 0 !important; stroke-dashoffset: 0 !important; transition: none !important; }
  .js .outro-band .fp-dot { transform: none !important; }
  .js .outro-band .fp-sub { opacity: 1 !important; transform: none !important; }
}

.about {
  position: relative;
  z-index: 3;
  margin-top: -56px;
  border-radius: clamp(24px, 3vw, 44px) clamp(24px, 3vw, 44px) 0 0;
  background: var(--bg);
  box-shadow: 0 -30px 60px -40px rgba(0, 0, 0, .6);
}

/* Hinweis im Food Bereich: zeigt, dass es nach unten weitergeht, und füllt sich mit dem Fortschritt */
.food-cue { display: none; }
.fx .food-cue {
  --fp: 0;
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 7px 18px 7px 7px;
  border-radius: 999px;
  background: rgba(29, 31, 34, .9);
  color: var(--bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .55);
  opacity: var(--co, 0);
  transform: translate3d(-50%, calc((1 - var(--co, 0)) * 16px), 0);
  pointer-events: none;
  white-space: nowrap;
}
.fc-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: conic-gradient(var(--lemon) calc(var(--fp) * 360deg), rgba(243, 240, 232, .18) 0);
}
.fc-ring::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #1d1f22; }
.fc-ring svg { position: relative; width: 18px; height: 18px; color: var(--lemon); animation: fc-bob 1.6s var(--ease) infinite; }
@keyframes fc-bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
.fc-text { display: grid; line-height: 1.2; }
.fc-text b { font-weight: 500; font-size: .86rem; }
.fc-text small { font-size: .72rem; color: rgba(243, 240, 232, .65); }
.fc-mouse { display: none; }
.has-cursor .fc-mouse { display: inline; }
.has-cursor .fc-touch { display: none; }
@media (min-width: 900px) {
  .fx .food-cue { left: auto; right: var(--gut); bottom: clamp(40px, 9vh, 100px); transform: translate3d(0, calc((1 - var(--co, 0)) * 16px), 0); }
  .fx .food-side { display: none; }
}
@media (prefers-reduced-motion: reduce) { .fc-ring svg { animation: none; } }

/* Scroll Choreografie (nur mit JS und ohne reduzierte Bewegung) */
.sentinel { position: absolute; left: 0; right: 0; top: 78%; bottom: 0; pointer-events: none; }

.fx .teaser { will-change: transform; transform: translate3d(0, calc(var(--hy, 0) * var(--k, 0) * 1px), 0); }

.fx .project-event .stage { transform: scale(calc(.9 + var(--ev, 1) * .1)); will-change: transform; }

.fx .project-food { height: 210vh; height: calc(var(--vh) * 2.1); }
@media (max-width: 899px) { .fx .project-food { height: 185vh; height: calc(var(--vh) * 1.85); } }
.fx .food-scene {
  position: sticky;
  top: 0;
  height: var(--vh);
  overflow: hidden;
  padding: calc(var(--hh) + 8px) var(--gut) 20px;
  align-content: center;
}
.fx .scene-shade {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--vh);
  background: var(--dark);
  opacity: var(--sa, 0);
  pointer-events: none;
}
.fx .scene-shade .fpv-loop { transform: scale(calc(1.3 - var(--x, 0) * .3)); }
.fx .food-text, .fx .food-side { opacity: calc(1 - var(--x, 0) * 1.7); transform: translateY(calc(var(--x, 0) * -30px)); }
.fx .food-scene::before { opacity: calc(var(--e, 1) * (1 - var(--x, 0))); }

/* Der Blick fliegt in das Smartphone hinein, danach öffnet sich der FPV Bereich */
.fx .phone-col {
  will-change: transform, opacity;
  opacity: min(clamp(0, calc(var(--e, 1) * 1.6), 1), clamp(0, calc((.95 - var(--x, 0)) / .55), 1));
  transform:
    translate3d(0, calc((1 - var(--e, 1)) * 22vh), 0)
    rotate(calc((1 - var(--e, 1)) * 3deg))
    scale(calc(.92 + var(--e, 1) * .08 + var(--q, 0) * .1 + var(--x, 0) * 3.3));
}
.fx .sound-btn { opacity: clamp(0, calc(1 - var(--x, 0) * 4), 1); }

.fx .project-fpv { position: relative; z-index: 2; margin-top: calc(var(--vh) * -.12); }
.fx .fpv-frame {
  will-change: transform;
  transform: perspective(1400px) rotateX(calc((1 - var(--p, 1)) * 9deg)) scale(calc(.86 + var(--p, 1) * .14));
}
@media (min-width: 1100px) {
  .fx .project-fpv .project-info { opacity: clamp(0, calc(var(--p, 1) * 1.6), 1); transform: translateY(calc((1 - var(--p, 1)) * 40px)); }
}

@media (max-width: 899px) {
  .fx .food-scene { gap: 12px; justify-items: center; align-content: center; }
  .fx .phone { --h: min(calc(var(--vh) - var(--hh) - 17.5rem), 640px); }
  .fx .phone-col { gap: 14px; }
  .fx .food-scene { padding-bottom: 76px; }
  .fx .food-text { gap: 10px; }
  .fx .food-text .tags, .fx .food-text .project-desc, .fx .food-text .bignum { display: none; }
  .phone { --h: min(calc(var(--vh) - var(--hh) - 11rem), 560px); }
}

@media (max-width: 380px) {
  .tags li { font-size: .76rem; padding: 5px 10px; }
  .sound-btn { font-size: .88rem; padding-inline: 18px; }
}