/* ============================================================================
   Projektseite «FEUSI Cup 2026» (Vorschlag 09.10.2026, nur lokal)

   Welt: Flutlichtnacht im Stadion Wankdorf. Schwarz wie der Himmel über dem
   Dach, Rasengrün und das YB-Gelb der Sitzreihen.

   Signatur
   1) Startbild: das Flutlicht geht flackernd an, Mast für Mast. Die Lichtpunkte
      liegen in Prozent genau auf den Scheinwerfern im Foto (eigene Bühne mit
      festem Seitenverhältnis, darum passen sie bei jeder Fenstergrösse).
   2) Titel aus Sitzen: «FEUSI CUP» ist aus gelben Sitzschalen gebaut wie der
      Schriftzug «WANKDORF» auf der Tribüne und füllt sich Reihe für Reihe.
   Danach ein Album wie bei der Hochzeit und der Kontakt auf einem Stadionbild.
   ========================================================================== */
@font-face { font-family: "Tribuene"; src: url("../assets/fonts/frei/montserrat-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }

body.fc {
  --nacht: #06090B;
  --nacht-2: #0D1316;
  --rasen: #1E8F3C;
  --gelb: #F7C800;
  --flut: #EEFBF6;
  --tribuene: "Tribuene", var(--font, Inter, system-ui), sans-serif;
  --start: .35s;              /* wann das erste Licht angeht */
  background: var(--nacht);
  color: #fff;
}
body.fc ::selection { background: var(--gelb); color: var(--nacht); }
body.fc :focus-visible { outline: 3px solid var(--gelb); outline-offset: 3px; }

/* ── Kopfzeile: über dem Startbild durchsichtig, danach Nachtglas ── */
.fc .detail-topbar { background: transparent !important; border-bottom: 0 !important; box-shadow: none !important;
  -webkit-backdrop-filter: none; backdrop-filter: none; transition: background-color .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease; }
.fc .detail-topbar .detail-back { color: #fff !important; }
.fc .detail-topbar .detail-back:hover { opacity: .8; }
.fc .detail-topbar.ist-dunkel { background: rgba(6, 9, 11, .78) !important; box-shadow: 0 1px 0 rgba(255,255,255,.06) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }

/* ── 1) Startbild ─────────────────────────────────────────────────────── */
.fc-op { --p: 0; --hh: max(100svh, 600px); position: relative; isolation: isolate; overflow: hidden; background: #000;
  height: 100vh; height: 100svh; min-height: 600px; margin-top: -64px; }
/* Bühne = Foto plus Lichtpunkte, deckt das Startbild ab wie object-fit: cover */
.fc-buehne { position: absolute; left: 50%; top: 50%; aspect-ratio: 3 / 2; width: max(100%, calc(var(--hh) * 1.5));
  transform: translate(-50%, -50%) translate3d(0, calc(var(--p) * 8%), 0) scale(calc(1.02 + var(--p) * .08)); will-change: transform; }
.fc-buehne--hoch { display: none; aspect-ratio: 4 / 5; width: max(100%, calc(var(--hh) * .8)); }
.fc-buehne img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Scheinwerfer: weicher kühler Schein, mischt sich nur aufhellend ins Foto */
.fc-buehne i { --g: 1; position: absolute; left: var(--x); top: var(--y); width: calc(11% * var(--g)); aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(214,255,238,.5) 28%, rgba(170,255,220,.12) 62%, rgba(170,255,220,0));
  animation: fc-an 1.3s linear calc(var(--start) + var(--d)) forwards, fc-brumm 3.6s ease-in-out calc(var(--start) + var(--d) + 1.3s) infinite alternate; }
.fc-buehne--hoch i { width: calc(17% * var(--g)); }
@keyframes fc-an {
  0% { opacity: 0; } 8% { opacity: .9; } 14% { opacity: .1; } 22% { opacity: .75; } 28% { opacity: .2; }
  40% { opacity: 1; } 46% { opacity: .55; } 60% { opacity: 1; } 100% { opacity: .9; }
}
@keyframes fc-brumm { from { transform: scale(1); } to { transform: scale(1.08); } }

/* Die Nacht liegt zuerst über dem Bild und weicht, wenn die Masten angehen */
.fc-op__nacht { position: absolute; inset: 0; z-index: 2; background: #000; pointer-events: none;
  animation: fc-nacht 2.3s linear var(--start) both; }
@keyframes fc-nacht {
  0% { opacity: .95; } 10% { opacity: .95; } 13% { opacity: .62; } 18% { opacity: .9; } 26% { opacity: .5; }
  31% { opacity: .78; } 42% { opacity: .32; } 55% { opacity: .42; } 75% { opacity: .12; } 100% { opacity: 0; }
}
.fc-op::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,9,11,.5) 0%, rgba(6,9,11,0) 18%, rgba(6,9,11,0) 44%, rgba(6,9,11,.72) 70%, var(--nacht) 100%); }

.fc-op__txt { position: absolute; z-index: 4; left: clamp(20px, 5vw, 64px); right: clamp(20px, 5vw, 64px); bottom: clamp(30px, 7vh, 76px);
  transform: translate3d(0, calc(var(--p) * -110px), 0); opacity: calc(1 - var(--p) * 1.6); will-change: transform, opacity; }
.fc-op__meta { margin: 0 0 clamp(10px, 1.6vw, 18px); font-size: clamp(.72rem, 1vw, .84rem); font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: rgba(255,255,255,.88);
  opacity: 0; animation: fc-auf .8s cubic-bezier(.22, 1, .36, 1) calc(var(--start) + 2.2s) forwards; }
.fc-op__meta span { color: var(--gelb); padding: 0 .3em; }
.fc-op h1 { margin: 0; line-height: 1; }

/* Titel aus Sitzschalen: Maske aus kleinen Rechtecken mit Lücken dazwischen.
   Die Grösse hängt an em, darum bleiben es bei jeder Schriftgrösse etwa gleich viele Reihen. */
.fc-sitze { display: block; font-family: var(--tribuene); font-weight: 800; text-transform: uppercase; color: var(--gelb);
  font-size: clamp(3.6rem, 13.5vw, 13rem); line-height: .84; letter-spacing: -.01em; transform: skewX(-7deg); transform-origin: 0 100%;
  --sitz: .056em;
  -webkit-mask: linear-gradient(90deg, #000 0 74%, transparent 74%) 0 0 / var(--sitz) var(--sitz), linear-gradient(180deg, #000 0 68%, transparent 68%) 0 0 / var(--sitz) var(--sitz);
  -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, #000 0 74%, transparent 74%) 0 0 / var(--sitz) var(--sitz), linear-gradient(180deg, #000 0 68%, transparent 68%) 0 0 / var(--sitz) var(--sitz);
  mask-composite: intersect;
  /* Reihe für Reihe von unten nach oben besetzt, wie wenn sich die Tribüne füllt */
  clip-path: inset(100% 0 0 0); animation: fc-reihen 1.1s steps(14, end) calc(var(--start) + 1.35s) forwards; }
@keyframes fc-reihen { to { clip-path: inset(-5% 0 0 0); } }
.fc-jahr { display: block; margin-top: clamp(8px, 1.2vw, 16px); padding-left: .2em; font-size: clamp(1.3rem, 3.4vw, 3rem); font-weight: 300; letter-spacing: .5em; color: #fff;
  opacity: 0; animation: fc-auf .9s cubic-bezier(.22, 1, .36, 1) calc(var(--start) + 2.35s) forwards; }
@keyframes fc-auf { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }

/* ── 2) Titel und Album ───────────────────────────────────────────────── */
.fc-inhalt { padding-top: clamp(72px, 11vh, 140px); }
.fc-intro { width: min(1200px, 100% - 2 * clamp(20px, 5vw, 48px)); margin: 0 auto clamp(40px, 6vw, 72px);
  }
.fc-intro h2 { margin: 0; font-size: clamp(2.4rem, 6vw, 5.6rem); font-weight: 300; letter-spacing: -0.045em; line-height: .95; color: #fff; }
.fc-intro h2 em { font-style: normal; font-weight: 800; font-family: var(--tribuene); letter-spacing: -0.02em; color: var(--gelb); }

.fc-album { padding: 0 clamp(12px, 2.4vw, 32px); }
.fc-album__bilder { max-width: 1440px; margin: 0 auto; columns: 3; column-gap: clamp(12px, 1.6vw, 22px); }
.fc-album__bilder figure { margin: 0 0 clamp(12px, 1.6vw, 22px); break-inside: avoid; }
.fc-album__bilder img { display: block; width: 100%; height: auto; border-radius: 10px; background: var(--nacht-2); }
.fc-album__bilder.ist-verteilt { columns: auto; display: grid; grid-template-columns: repeat(var(--spalten, 3), 1fr); gap: clamp(12px, 1.6vw, 22px); align-items: start; }
.fc-spalte { display: flex; flex-direction: column; gap: clamp(12px, 1.6vw, 22px); }
.fc-spalte figure { margin: 0; }
/* Bilder lassen sich gross anschauen */
.fc-album__bilder figure { cursor: zoom-in; border-radius: 10px; }
.fc-album__bilder figure img { transition: transform .5s cubic-bezier(.22, 1, .36, 1), filter .3s ease; }
.fc-album__bilder figure { overflow: hidden; }
@media (hover: hover) { .fc-album__bilder figure:hover img { transform: scale(1.025); filter: brightness(1.06); } }
.fc-album__bilder figure:focus-visible { outline: 3px solid var(--gelb); outline-offset: 3px; }
.fc-album__bilder figure.wartet { opacity: 0; transform: translate3d(0, 22px, 0); }
.fc-album__bilder figure { transition: opacity .9s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1); }

/* ── 3) Schluss: Stadionbild als Grund, Kontakt direkt darauf (keine Box) ── */
.fc-schluss { position: relative; isolation: isolate; overflow: hidden; margin-top: clamp(110px, 15vw, 190px);
  min-height: clamp(520px, 78vh, 760px); display: grid; place-items: center; padding: clamp(80px, 12vw, 140px) clamp(20px, 5vw, 48px); text-align: center; }
.fc-schluss__bild { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: saturate(.9); }
/* Oben und unten läuft das Bild in die Nacht aus, die Mitte bleibt gedämpft hell */
.fc-schluss::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--nacht) 0%, rgba(6,9,11,.76) 22%, rgba(6,9,11,.7) 55%, rgba(6,9,11,.8) 82%, #030506 100%),
              radial-gradient(60% 45% at 50% 100%, rgba(30,143,60,.35), transparent 70%); }
.fc-schluss__inhalt { max-width: 760px; }
.fc-schluss h2 { margin: 0; font-size: clamp(2.6rem, 7vw, 6rem); font-weight: 300; letter-spacing: -0.045em; line-height: .95; color: #fff; }
.fc-schluss h2 em { font-style: normal; font-weight: 800; font-family: var(--tribuene); letter-spacing: -0.02em; color: var(--gelb); }
.fc-schluss p { margin: clamp(18px, 2.4vw, 26px) auto 0; max-width: 46ch; font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.6; color: rgba(238,251,246,.8); text-wrap: balance; }
.fc-schluss__knoepfe { margin-top: clamp(28px, 3.6vw, 40px); display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.fc-knopf { display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 26px; border-radius: 999px; font-weight: 700; font-size: 1rem;
  text-decoration: none; transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease, background-color .25s ease, border-color .25s ease; }
.fc-knopf svg { flex: none; transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
.fc-knopf--gelb { background: var(--gelb); color: var(--nacht); box-shadow: 0 14px 34px -12px rgba(247, 200, 0, .65), inset 0 -2px 0 rgba(0,0,0,.12); }
.fc-knopf--gelb:hover { transform: translateY(-2px); box-shadow: 0 20px 42px -12px rgba(247, 200, 0, .8), inset 0 -2px 0 rgba(0,0,0,.12); }
.fc-knopf--glas { color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.fc-knopf--glas:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); transform: translateY(-2px); }
.fc-knopf--glas:hover svg { transform: translateX(3px); }
.fc-knopf:active { transform: translateY(0) scale(.98); }
.fc-knopf:focus-visible { outline: 3px solid var(--gelb); outline-offset: 4px; }
@media (max-width: 520px) { .fc-knopf { width: 100%; justify-content: center; } }

/* ── Footer auf Nacht ── */
.fc .footer { background: #030506; color: rgba(255,255,255,.75); border-top: 1px solid rgba(255,255,255,.06); }
.fc .footer a, .fc .footer h3, .fc .footer p { color: rgba(255,255,255,.75); }
.fc .footer .site-logo__img { filter: invert(1); }

@media (max-width: 860px) {
  .fc-album__bilder { columns: 2; }
}
@media (max-width: 760px) {
  .fc-buehne--quer { display: none; }
  .fc-buehne--hoch { display: block; }
  .fc-sitze { font-size: clamp(3.4rem, 21vw, 7rem); --sitz: .07em; }
}

/* Weniger Bewegung: Licht ist sofort an, Titel steht, Bande steht still */
@media (prefers-reduced-motion: reduce) {
  .fc-op__nacht { animation: none; opacity: 0; }
  .fc-buehne i { animation: none; opacity: .85; }
  .fc-sitze { animation: none; clip-path: none; }
  .fc-op__meta, .fc-jahr { animation: none; opacity: 1; }
  .fc-knopf, .fc-knopf svg { transition: none; }
  .fc-album__bilder figure.wartet { opacity: 1; transform: none; }
}