/* Geen harde snedes — versie Youri. Elke lijn vervaagt naar beide kanten, de header loopt uit in een verloop.
   Alleen voor home-youri.html; overschrijft homepage.css en ftr-ade.css. */
:root { --soft-line: linear-gradient(90deg, rgba(247, 247, 247, 0), rgba(247, 247, 247, .16) 18%, rgba(247, 247, 247, .16) 82%, rgba(247, 247, 247, 0)); }

/* header: geen balk met rand, maar een donker verloop dat uitloopt */
html .hdr.is-solid .hdr__bar { background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
html .hdr::before { inset: 0 0 -70px; background: linear-gradient(180deg, rgba(22, 22, 22, .94) 0%, rgba(22, 22, 22, .78) 45%, rgba(22, 22, 22, 0) 100%); opacity: 0; }
html .hdr.is-solid::before { opacity: 1; }

/* footer: geen rand bovenaan, lijnen vervagen aan de uiteinden */
html .ftr { border-top: 0; }
html .ftr__actions, html .ftr__where { border-top: 0; background: none; }
html .ftr__base { border-top: 0; background: var(--soft-line) top / 100% 1px no-repeat; }   /* enkel deze laatste lijn blijft */
html .ftr__big { border-bottom: 0; background: none; }
html .ftr__big + .ftr__big { background: var(--soft-line) top / 100% 1px no-repeat; }   /* lijntjes tussen de contactregels, zacht uitlopend */
/* hover-vlak: zacht aan de zijkanten in plaats van een harde witte band */
html .ftr__big::before { -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }

/* gsm: de zwevende knop is de CTA; de dubbele knop in de hero valt weg */
@media (max-width: 480px) { .hall [data-cta] .hall__btn--solid { display: none; } }

/* Spotify: smal, en ruimte voor een tweede playlist ernaast */
html .spotify--duo { display: flex; justify-content: center; gap: clamp(20px, 3vw, 48px); flex-wrap: wrap; }
.sp { flex: 0 1 420px; min-width: 0; }
.sp[hidden] { display: none; }
.sp__eyebrow { margin-bottom: 14px; font: 400 13px/1.2 Aeonik, "Helvetica Neue", Arial, sans-serif; text-transform: uppercase; color: var(--fg); }
html .spotify--duo iframe { display: block; border: 0; border-radius: 14px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
@media (max-width: 720px) { .sp { flex-basis: 100%; } html .spotify--duo iframe { height: 352px; } }
@media (min-width: 861px) { html .ftr__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* footer-midden: locaties · Backline (playlist sinds 12/10 enkel op About) */
.ftr__mid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: start;
  margin-top: clamp(64px, 7vw, 112px); }
.ftr__music { display: grid; gap: 18px; }
.ftr__music .sp { flex: none; }
.ftr__music iframe { display: block; width: 100%; border: 0; border-radius: 14px; }
.ftr__places { display: grid; gap: 22px; }
.ftr__places .sp__eyebrow { margin-bottom: -8px; }   /* zelfde afstand titel → inhoud als bij de playlist */
.ftr__places .ftr__loc h3 { margin-bottom: 6px; }
.ftr__loc small { display: block; margin-top: 4px; font-size: 13px; color: var(--accent, #4ff0de); }
.ftr__loc small[hidden] { display: none; }
/* Backline als donker glas i.p.v. fel wit blok */
html .ftr__mid .ftr__backline { grid-column: auto; background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); color: var(--fg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .06); border-radius: 16px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
html .ftr__mid .ftr__backline small { color: var(--mute); opacity: 1; }
html .ftr__mid .ftr__backline em { color: var(--accent, #4ff0de); }
html .ftr__mid .ftr__backline:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(var(--accent-rgb, 79, 240, 222), .35), 0 0 30px rgba(var(--accent-rgb, 79, 240, 222), .12); }
@media (max-width: 1000px) { .ftr__mid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ftr__mid { grid-template-columns: 1fr; } }

/* Backline: titel boven het kaartje (zoals ON ROTATION / WHERE TO FIND US), B-icoon in het kaartje */
.ftr__bl .sp__eyebrow { margin-bottom: 14px; }
.ftr__bl-icon { display: block; width: 34px; height: 34px; margin-bottom: 10px; border-radius: 9px; transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s; }
html .ftr__mid .ftr__backline:hover .ftr__bl-icon { transform: rotate(-6deg) scale(1.08); box-shadow: 0 0 22px rgba(139, 61, 255, .55); }

/* MS-DOS: tekst typt in met een blokcursor (js/dos-youri.js) */
.dos__rest { color: transparent; }
.dos__cur { position: relative; display: inline-block; width: 0; height: 1em; vertical-align: -.12em; }
.dos__cur::after { content: ""; position: absolute; left: 1px; top: 0; width: .55em; height: 1.05em; background: var(--accent, #4ff0de); box-shadow: 0 0 10px rgba(var(--accent-rgb, 79, 240, 222), .6); opacity: 0; }
.dos.is-typing .dos__cur::after { opacity: 1; }
.dos.is-done .dos__cur::after { animation: dos-blink 1s steps(1, end) infinite; }
.dos.is-idle .dos__cur::after { animation: none; opacity: 0; }
@keyframes dos-blink { 0% { opacity: 1; } 50% { opacity: 0; } }

/* ---------- teammodus-label en footer ---------- */
.team-pill { position: fixed; left: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 95; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px;
  border-radius: 99px; background: rgba(22, 22, 22, .8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb, 79, 240, 222), .4); font-size: 13px; color: var(--fg); }
.team-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent, #4ff0de); box-shadow: 0 0 8px var(--accent, #4ff0de); }
.team-pill span { color: var(--mute); }
.ftr__end { display: inline-flex; gap: 20px; }
.ftr__team { color: var(--mute); }


/* hover-gloed op de cases in de meest prominente kleur van het beeld (js/glow-youri.js) */
.case-blok .media, .case-blok > img, .case-blok > video { transition: box-shadow .5s cubic-bezier(.2, .8, .2, 1), transform .5s cubic-bezier(.2, .8, .2, 1); }
.case-blok.has-glow:hover .media, .case-blok.has-glow:focus-visible .media {
  box-shadow: 0 0 0 1px rgba(var(--glow), .45), 0 0 28px 2px rgba(var(--glow), .55), 0 0 90px 10px rgba(var(--glow), .28);
  transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) { .case-blok.has-glow:hover .media { transform: none; } }

/* 9. teamlink niet zichtbaar voor bezoekers; enkel om uit te loggen als je in teammodus zit (aanzetten: ?team=on) */
.ftr__team { display: none; }
html.is-team .ftr__team { display: inline; }