/* GORRÉ app design tokens, 1:1 overgenomen uit het Claude Design-canvas (GORRE App.dc.html).
   Dark is de enige modus hier: de app wordt in de gym gebruikt, dus het lichte thema
   uit het origineel is bewust niet overgezet. */

/* Lettertypen staan lokaal in assets/fonts/ (latin-subset woff2 van Google Fonts).
   Zelf hosten in plaats van de Google-CDN, zodat de app offline werkt en straks als
   PWA te installeren is. font-display:swap houdt tekst leesbaar tijdens het laden. */
@font-face { font-family: 'Bebas Neue'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../assets/fonts/BebasNeue-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('../assets/fonts/Barlow-300.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../assets/fonts/Barlow-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../assets/fonts/Barlow-500.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../assets/fonts/Barlow-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../assets/fonts/BarlowCondensed-500.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../assets/fonts/BarlowCondensed-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../assets/fonts/BarlowCondensed-700.woff2') format('woff2'); }

:root {
  /* **Waarom dit hier bovenaan staat.** Zonder deze regel houdt een browser de app voor een
     lichte pagina, en dan mag hij hem zelf donker máken. Samsung Internet en Chrome op
     Android hebben daar allebei een knop voor ("donkere modus toepassen op websites"), en
     die staat bij veel mensen aan zonder dat ze het weten.

     Wat dat algoritme doet is precies het verkeerde hier: het draait lichte vlakken om naar
     donker en donkere tekst naar licht. De gouden knop werd daardoor een modderbruin blok
     met witte letters, en het logo verloor zijn goud. Gezien op een Android-toestel op
     20 augustus 2026, en het was geen fout in een kleur maar een ontbrekende mededeling.

     `color-scheme: dark` zegt: deze pagina ís al donker, hou je handen eraf. Dat mag hier
     zonder voorbehoud, want dark is de enige modus die deze app kent. Dezelfde mededeling
     staat als meta in `index.html`, want die geldt al voordat dit bestand binnen is. */
  color-scheme: dark;

  --bg: #0A0B0D;
  --c1: #111F35;
  --c2: #0C1829;
  --fg: #EDE8DF;
  --fg2: #AFA99C;
  --fg3: #5B6672;
  --eb: #8A6C3D;
  --gold: #B89050;
  --gsoft: #D8B685;
  --line: rgba(184, 144, 80, 0.18);
  --line2: rgba(184, 144, 80, 0.3);
  --faint: rgba(255, 255, 255, 0.02);
  --shadow: rgba(0, 0, 0, 0.45);
  --plate: rgba(237, 232, 223, 0.86);
  --danger: #C05A45;
  --ok: #6E9B6E;

  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'Barlow', sans-serif;
  --font-label: 'Barlow Condensed', sans-serif;

  --radius-card: 14px;
  --radius-sm: 6px;
}

/* Alle keyframes uit het origineel, ongewijzigd. */
@keyframes gshift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes gslide { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes drift { 0% { transform: translate3d(-7%,-5%,0) scale(1.15); } 50% { transform: translate3d(7%,5%,0) scale(1.35); } 100% { transform: translate3d(-7%,-5%,0) scale(1.15); } }
@keyframes glowpulse { 0%, 100% { opacity: .35; } 50% { opacity: .85; } }
@keyframes scanline { 0% { transform: translateY(0); opacity: 0; } 12%, 88% { opacity: 1; } 100% { transform: translateY(240px); opacity: 0; } }
@keyframes fadeup { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes cardflow { 0%, 100% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } }
@keyframes edgeglow { 0%, 100% { border-color: var(--line); } 50% { border-color: rgba(184,144,80,0.5); } }
@keyframes cardglow { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 12px rgba(184,144,80,0.16)); } }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes sheen { 0% { transform: translateX(-130%) skewX(-18deg); } 100% { transform: translateX(340%) skewX(-18deg); } }
@keyframes dotpulse { 0%, 100% { opacity: .4; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes gflow { 0% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes gflowv { 0% { background-position: 50% 0%; } 100% { background-position: 50% 200%; } }
@keyframes gpools { 0% { background-position: 0% 0%, 100% 100%, 0% 0%; } 50% { background-position: 72% 58%, 18% 26%, 100% 100%; } 100% { background-position: 0% 0%, 100% 100%, 0% 0%; } }
@keyframes gscan { 0% { transform: translateX(-170%) skewX(-18deg); } 45%, 100% { transform: translateX(430%) skewX(-18deg); } }
@keyframes gdriftA { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(54%,-34%) scale(1.38); } 100% { transform: translate(0,0) scale(1); } }
@keyframes gdriftB { 0% { transform: translate(0,0) scale(1.05); } 50% { transform: translate(-50%,40%) scale(.74); } 100% { transform: translate(0,0) scale(1.05); } }
@keyframes gdriftC { 0% { transform: translate(0,0) scale(1); } 33% { transform: translate(42%,30%) scale(.8); } 66% { transform: translate(-34%,-26%) scale(1.3); } 100% { transform: translate(0,0) scale(1); } }
@keyframes gorbit { 0% { transform: rotate(0deg) translateX(54px) rotate(0deg); } 100% { transform: rotate(360deg) translateX(54px) rotate(-360deg); } }

/* Ambient achtergrond-blobs, exact overgenomen uit isFree/isPremium in het origineel:
   Basic krijgt er twee (goud + staalblauw), Pro krijgt er vier en feller. */
#ambient-blobs { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
#ambient-blobs .blob { position: absolute; border-radius: 50%; display: block; }
.blob-pro-a, .blob-pro-b, .blob-pro-c, .blob-pro-d { display: none; }
[data-tier="pro"] .blob-basic-a, [data-tier="max"] .blob-basic-a, [data-tier="pro"] .blob-basic-b , [data-tier="max"] .blob-basic-b { display: none; }
[data-tier="pro"] .blob-pro-a, [data-tier="max"] .blob-pro-a, [data-tier="pro"] .blob-pro-b, [data-tier="max"] .blob-pro-b, [data-tier="pro"] .blob-pro-c, [data-tier="max"] .blob-pro-c, [data-tier="pro"] .blob-pro-d , [data-tier="max"] .blob-pro-d { display: block; }
.blob-basic-a { left: -8%; top: 8%; width: 220px; height: 220px; background: radial-gradient(circle, var(--gold) 0%, rgba(184,144,80,0) 70%); filter: blur(40px); opacity: .34; animation: gdriftA 24s ease-in-out infinite; }
.blob-basic-b { right: -10%; bottom: 14%; width: 210px; height: 210px; background: radial-gradient(circle, #3A5578 0%, rgba(58,85,120,0) 72%); filter: blur(40px); opacity: .38; animation: gdriftB 28s ease-in-out infinite; }
.blob-pro-a { left: -10%; top: 6%; width: 240px; height: 240px; background: radial-gradient(circle, var(--gold) 0%, rgba(184,144,80,0) 68%); filter: blur(38px); opacity: .5; animation: gdriftA 17s ease-in-out infinite; }
.blob-pro-b { left: 28%; bottom: -14%; width: 220px; height: 220px; background: radial-gradient(circle, var(--gsoft) 0%, rgba(216,182,133,0) 68%); filter: blur(40px); opacity: .45; animation: gdriftB 19s ease-in-out infinite; }
.blob-pro-c { right: -12%; top: 30%; width: 230px; height: 230px; background: radial-gradient(circle, #3A5578 0%, rgba(58,85,120,0) 70%); filter: blur(38px); opacity: .55; animation: gdriftC 21s ease-in-out infinite; }
.blob-pro-d { right: 22%; top: 58%; width: 140px; height: 140px; background: radial-gradient(circle, #5A7BA6 0%, rgba(90,123,166,0) 70%); filter: blur(34px); opacity: .4; animation: gorbit 24s linear infinite; }
#statusbar, #app-view, #bottom-nav { position: relative; z-index: 1; }

/* Gold gradient tekst, voorbehouden aan grote elementen: koppen, prijzen, slogans, grote cijfers.

   **Hoeveel goud er in de letters zit, verschilt per laag.** Patje's keuze van 20 augustus
   2026: Pro 40 procent, Max 80 procent. Dat is niet de dekking van de kleur maar het aandeel
   van de breedte dat goud is; de rest blijft de gewone tekstkleur. Zo is Max onmiskenbaar
   voller zonder dat er een nieuwe kleur bij komt.

   Het verloop is opgebouwd rond een goudvlak in het midden en aan de randen. `--goud-deel`
   zegt hoe breed dat vlak is: bij 0.4 loopt het goud van 0 tot 20% en van 80 tot 100%, met
   de gewone kleur in het midden. Bij 0.8 blijft er van die gewone kleur nog een smalle band
   over. Basic heeft geen verloop en houdt gewoon `--fg`. */
:root { --goud-deel: 0.4; }
[data-tier="max"] { --goud-deel: 0.8; }

.gold-gradient-text {
  background-image: linear-gradient(90deg,
    var(--gold) 0%,
    var(--gold) calc(var(--goud-deel) * 50%),
    var(--fg) 50%,
    var(--gold) calc(100% - var(--goud-deel) * 50%),
    var(--gold) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gflow 8s linear infinite;
}

/* Merkteken (monogram/wordmerk) als CSS-mask, zodat het in Pro dezelfde animerende
   gouden verloop krijgt als het origineel (data-goldmask), en anders vlak ivoor/wit blijft. */
.brand-mark {
  background: var(--fg);
  opacity: .9;
  -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain;
  mask-repeat: no-repeat; mask-position: center; mask-size: contain;
}
[data-tier="pro"] .brand-mark , [data-tier="max"] .brand-mark {
  background-image: linear-gradient(90deg, var(--gold) 0%, var(--fg) 12.5%, var(--gold) 25%, var(--fg) 37.5%, var(--gold) 50%, var(--fg) 62.5%, var(--gold) 75%, var(--fg) 87.5%, var(--gold) 100%);
  background-size: 200% 100%;
  animation: gflow 8s linear infinite;
}

/* Premium-taal: zodra tier=pro staat, krijgen ALLE koppen de animerende gouden verloop.
   Dit is precies het effect uit het origineel ([data-tier="premium"] h2,h3) en is de
   grootste zichtbare wissel tussen Basic en Pro. */
[data-tier="pro"] h2, [data-tier="max"] h2, [data-tier="pro"] h3 , [data-tier="max"] h3 {
  background-image: linear-gradient(90deg,
    var(--gold) 0%,
    var(--gold) calc(var(--goud-deel) * 50%),
    var(--fg) 50%,
    var(--gold) calc(100% - var(--goud-deel) * 50%),
    var(--gold) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: gflow 8.5s linear infinite;
}