/* Glazen kaarten over de hero-lus van /app/ (richting A, goedgekeurd 10 okt 2026).
   De video (app-hero-2-*) draagt enkel de vervaagde film; deze kaarten zijn HTML zodat de tekst scherp
   blijft en per taal wisselt. Eén vast merkglas op elk frame: neutraal ivoor getinte frost over een iets
   donkerdere drager, ontzadigd zodat het groen en bruin van de film er niet door kleurt.
   Goud enkel voor wat het systeem beslist: de trendlijn, het nieuwe dagdoel, het nieuwe gewicht. */

.a-glas { position: absolute; z-index: 2; left: var(--marge); top: clamp(40px, 7.5%, 84px);
  width: clamp(360px, 29vw, 440px); display: flex; flex-direction: column; gap: 14px;
  pointer-events: none; opacity: 0; transition: opacity .5s ease; font-family: Manrope, system-ui, sans-serif;
  color: var(--ivory); }
.a-glas.is-klaar { opacity: 1; }

.a-glas__kaart { position: relative; border-radius: 18px; padding: 20px 24px;
  background: linear-gradient(180deg, rgba(242,232,218,.11) 0%, rgba(242,232,218,.045) 100%), rgba(22,22,21,.58);
  -webkit-backdrop-filter: blur(22px) saturate(.5) brightness(.92);
          backdrop-filter: blur(22px) saturate(.5) brightness(.92);
  border: 1px solid rgba(242,232,218,.16);
  box-shadow: inset 0 1px 0 rgba(242,232,218,.14), 0 22px 48px -18px rgba(0,0,0,.55);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .a-glas__kaart { background: rgba(30,29,28,.9); }
}

.a-glas__label { font-size: 15px; font-weight: 600; line-height: 1.3; color: rgba(242,232,218,.66); }
.a-glas__cijfer { margin-top: 8px; display: flex; align-items: baseline; gap: 12px; white-space: nowrap;
  font-family: "Cal Sans", system-ui, sans-serif; font-weight: 400; font-size: 40px; line-height: 1.05;
  letter-spacing: -0.01em; }
.a-glas__cijfer .oud { color: rgba(242,232,218,.42); text-decoration: line-through; text-decoration-thickness: 2px; }
.a-glas__cijfer .pijl { font-family: Manrope, system-ui, sans-serif; font-size: 24px; color: rgba(242,232,218,.42); }
.a-glas__cijfer .nieuw, .a-glas__cijfer .goud { color: var(--goud); }
.a-glas__eenheid { font-family: Manrope, system-ui, sans-serif; font-weight: 600; font-size: 16px; color: rgba(242,232,218,.66); }
.a-glas__uitleg { margin-top: 8px; font-size: 14px; line-height: 1.4; color: rgba(242,232,218,.5); }

/* kaarten in diepte: niet allemaal dezelfde straal, breedte en inspringing */
.a-glas__sync { border-radius: 999px; padding: 14px 24px; display: flex; align-items: center; gap: 14px;
  font-size: 14.5px; font-weight: 500; line-height: 1.35; color: rgba(242,232,218,.88); }
.a-glas__punt { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--ivory);
  box-shadow: 0 0 0 5px rgba(242,232,218,.12); }
.a-glas__kcal { border-radius: 20px; }
.a-glas__week { margin-left: 48px; border-radius: 16px; padding: 18px 24px; }
.a-glas__week .a-glas__cijfer { font-size: 38px; gap: 0; }
.a-glas__maal { margin-left: .26em; }
.a-glas__trend { border-radius: 24px; padding: 20px 24px 18px; }
.a-glas__kop { display: flex; justify-content: space-between; align-items: baseline; }
.a-glas__dagen { font-size: 13px; font-weight: 500; color: rgba(242,232,218,.42); }
.a-glas__kg { margin-top: 4px; font-family: "Cal Sans", system-ui, sans-serif; font-size: 26px; letter-spacing: -0.01em; }
.a-glas__grafiek { display: block; width: 100%; height: 118px; margin-top: 10px; overflow: visible; }
.a-glas__syncregel { display: none; }

/* stappen in de reeks */
.a-glas__sync.is-weg { opacity: 0; transform: translateY(14px); }
.a-glas__wissel { display: inline-block; transition: opacity .35s ease, transform .35s ease; }
.a-glas__wissel.is-uit { opacity: 0; transform: translateY(-8px); }

/* lage schermen: compacter */
@media (min-width: 861px) and (max-height: 820px) {
  .a-glas { gap: 10px; top: 32px; }
  .a-glas__uitleg { display: none; }
  .a-glas__kaart { padding: 16px 22px; }
  .a-glas__grafiek { height: 92px; }
}
/* tablet: de tekstkolom laat geen plaats, dan enkel de film */
@media (min-width: 861px) and (max-width: 1100px) { .a-glas { display: none; } }

/* gsm: drie kaarten bovenin het videovak, links van het gezicht; de sync wordt een regel in de trendkaart */
@media (max-width: 860px) {
  .a-glas { left: var(--marge); top: 14px; width: min(240px, 62vw); gap: 8px; }
  .a-glas__kaart { padding: 9px 13px 10px; border-radius: 14px;
    -webkit-backdrop-filter: blur(16px) saturate(.5) brightness(.92); backdrop-filter: blur(16px) saturate(.5) brightness(.92); }
  .a-glas__sync, .a-glas__uitleg { display: none; }
  .a-glas__cijfer { margin-top: 2px; gap: 6px; font-size: 21px; }
  .a-glas__cijfer .oud { font-size: 15px; text-decoration-thickness: 1.5px; }
  .a-glas__cijfer .pijl { font-size: 13px; }
  .a-glas__eenheid { font-size: 11.5px; }
  .a-glas__week { margin-left: 0; border-radius: 12px; padding: 9px 13px 10px; }
  /* dagdoel en gewicht lezen als één kaart met twee regels: scheelt een rand, een kop en een tussenruimte */
  .a-glas__kcal { border-radius: 14px 14px 0 0; border-bottom-color: rgba(242,232,218,.06); padding-bottom: 8px; }
  .a-glas__week { margin-top: -8px; border-radius: 0 0 14px 14px; border-top: 0; padding-top: 7px; }
  /* krap: de kop staat in die taal of op dat scherm hoger. Eerst valt de grafiek weg (kg en sync blijven),
     pas daarna de gewichtsregel. Nooit de kop raken. */
  .a-glas.is-krap .a-glas__grafiek { display: none; }
  .a-glas.is-krap .a-glas__trend { min-height: 0; }
  .a-glas.is-zeer-krap .a-glas__week { display: none; }
  .a-glas.is-zeer-krap .a-glas__kcal { border-radius: 14px; padding-bottom: 10px; }
  .a-glas__week .a-glas__cijfer { font-size: 21px; }
  .a-glas__trend { border-radius: 16px; padding: 9px 13px 9px; }
  .a-glas__dagen { display: none; }
  .a-glas__kg { position: absolute; top: 9px; right: 13px; margin: 0; font-size: 16px; }
  .a-glas__grafiek { height: 44px; margin-top: 6px; }
  .a-glas__label { font-size: 11.5px; }
  .a-glas__syncregel { display: flex; gap: 7px; align-items: flex-start; margin-top: 6px; padding-top: 7px;
    border-top: 1px solid rgba(242,232,218,.1); font-size: 11.5px; line-height: 1.35; color: rgba(242,232,218,.8);
    transition: opacity .6s ease; }
  .a-glas__syncregel .a-glas__punt { width: 6px; height: 6px; margin-top: 5px; box-shadow: 0 0 0 3px rgba(242,232,218,.12); }
  .a-glas__syncregel.is-weg { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .a-glas, .a-glas__kaart, .a-glas__wissel, .a-glas__syncregel { transition: none; }
}