/* DeHardloopFotograaf — "luxe"-laag, los van style.css.
 *
 * Dit bestand verandert niets aan style.css zelf: het wordt er ná geladen
 * (zie de <link> in lib/html.js, pageLayout()) en overschrijft alleen een
 * paar kleur-/schaduw-/afrondingsvariabelen plus een handvol onderdelen
 * (knoppen, kaarten, de zoekkaart, het streepje onder een kopje) met een
 * voller, duurder ogend uiterlijk — zachtere hoeken, diepere schaduwen, een
 * subtiel verloop in het amber, en een lichte "lift" bij hover in plaats van
 * alleen een inzoomende foto.
 *
 * Terugdraaien kan op twee manieren, zonder dat er iets in style.css hoeft
 * te veranderen:
 *   1. verwijder de <link rel="stylesheet" href="/luxe.css"> uit
 *      lib/html.js (pageLayout()) — of
 *   2. verwijder gewoon dit bestand; een ontbrekende stylesheet breekt de
 *      pagina niet, de site ziet er dan weer precies uit als voorheen.
 */

:root {
  /* Zachtere hoeken door de hele site heen: style.css gebruikt --radius en
   * --radius-sm overal (kaarten, knoppen, velden, badges), dus deze twee
   * regels zijn al verantwoordelijk voor het grootste deel van het effect. */
  --radius: 12px;
  --radius-sm: 9px;

  /* Een diepere, zachter uitlopende schaduw dan het origineel (0 14px 40px
   * -20px): dezelfde richting, alleen ruimer, voor de paar plekken die
   * var(--shadow) rechtstreeks gebruiken. */
  --shadow: 0 28px 70px -28px rgba(20, 20, 20, 0.45);

  /* Warmer, voller amber-verloop voor knoppen en accenten — de losse tinten
   * bestonden al (--accent/--accent-hover), dit voegt alleen de
   * verloop-variant toe. */
  --luxe-goud: linear-gradient(135deg, #ffd988 0%, var(--accent) 55%, var(--accent-hover) 100%);
  --luxe-kaart-schaduw: 0 18px 40px -22px rgba(20, 20, 20, 0.32);
  --luxe-kaart-schaduw-hover: 0 30px 60px -20px rgba(20, 20, 20, 0.4);
}

.featured-event {
  padding-bottom: 0;
}

/* ------------------------------------------------------------- koppen */

/* Het amberen streepje onder een kopje: een verloop in plaats van een vlakke
 * kleur geeft net iets meer diepte zonder de rustige, ingetogen toon van de
 * rest van de pagina te breken. */
.section-head h2::after,
.search-card h2::after {
  width: 46px;
  height: 3px;
  background: var(--luxe-goud);
  border-radius: 2px;
}

/* --------------------------------------------------------------- knoppen */

.button-primary,
.hero-knop-primair {
  transition:
    transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1),
    box-shadow 0.28s cubic-bezier(0.2, 0.7, 0.3, 1),
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.button-primary {
  background: var(--luxe-goud);
  box-shadow: 0 16px 32px -18px rgba(154, 97, 0, 0.55);
}

.button-primary:hover:not(:disabled) {
  background: var(--luxe-goud);
  transform: translateY(-2px);
  box-shadow: 0 22px 42px -16px rgba(154, 97, 0, 0.65);
}

.button-primary:active:not(:disabled) {
  transform: translateY(0);
}

/* .hero-knop-primair en .album-link staan op een foto en zijn daarom wit in
 * rust (zie style.css) — alleen bij hover worden ze amber, en pas dán past
 * het gouden verloop. */
@media (hover: hover) {
  .hero-knop-primair:hover {
    background: var(--luxe-goud);
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 18px 34px -16px rgba(154, 97, 0, 0.5);
  }
}

/* --------------------------------------------------------- evenementkaarten */

/* Dezelfde kaarten als in style.css, met een rustende schaduw erbij (nu ligt
 * de foto "los" van de achtergrond) en een lichte lift bij hover naast de
 * bestaande inzoomende foto. .event-card-soon ("Binnenkort") doet bewust niet
 * mee: style.css annuleert daar expliciet elk hover-gedrag, en dat blijft zo. */
.event-card-media {
  box-shadow: var(--luxe-kaart-schaduw);
  transition:
    box-shadow 0.35s cubic-bezier(0.2, 0.7, 0.3, 1),
    transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Let op: deze ene regel bepaalt zowel de hover-lift hierboven als het
 * invliegen hieronder (.luxe-invlieg(--kaart)) voor een kaart — de twee
 * botsten eerder, want .event-card heeft door :not() een hogere specificiteit
 * dan .luxe-invlieg, en een volledige transition-kortschrift wint dan in zijn
 * geheel. Daardoor verdween opacity uit de lijst en kwam een kaart met een
 * harde knip tevoorschijn terwijl alleen de verschuiving nog "zacht" liep.
 * Vandaar hier bewust ook opacity, met zijn eigen (iets langzamere) duur. */
.event-card:not(.event-card-soon) {
  transition-property: transform, opacity;
  transition-duration: 0.35s, 0.6s;
  transition-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
}

@media (hover: hover) {
  .event-card:not(.event-card-soon):hover {
    transform: translateY(-6px);
  }

  .event-card:not(.event-card-soon):hover .event-card-media {
    box-shadow: var(--luxe-kaart-schaduw-hover);
  }
}

/* De uitgelichte kaart (het nieuwste evenement) mag het duidelijkst voelen
 * als het "duurdere" element op de pagina: een eigen, iets diepere schaduw
 * en een vleugje amber in de rand, in plaats van los op de achtergrond te
 * staan. */
.event-card--featured .event-card-media {
  box-shadow: 0 32px 64px -26px rgba(20, 20, 20, 0.4);
  border: 1px solid var(--accent-soft);
}

@media (hover: hover) {
  .event-card--featured:hover .event-card-media {
    box-shadow: 0 40px 76px -22px rgba(20, 20, 20, 0.48);
  }
}

/* ------------------------------------------------------------- evenementkop */

/* De coverfoto bovenaan een evenementpagina beweegt heel langzaam in en uit
 * (een "Ken Burns"-effect, bekend van natuurdocumentaires): geen zoomende
 * actie, maar een nauwelijks merkbare drift die de kop meer laat voelen als
 * een gemaakt moment dan als een stilstaand plaatje. .event-hero heeft al
 * overflow: hidden (style.css), dus de inzoom valt daarbinnen weg.
 *
 * transform-origin volgt background-position (center 33%) van style.css: zo
 * blijft het punt waar de lopers staan het midden van de beweging, in plaats
 * van dat de foto om een ander punt begint te draaien dan hij is bijgesneden. */
.event-hero::before {
  transform-origin: center 33%;
  animation: luxe-hero-drift 14s ease-in-out infinite alternate;
}

@keyframes luxe-hero-drift {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.09);
  }
}

@media (prefers-reduced-motion: reduce) {
  .event-hero::before {
    animation: none;
  }
}

/* --------------------------------------------------------- albumfilters */

/* Filteren op onderdeel/tijd leegt #album-raster helemaal en vult het in één
 * keer helemaal opnieuw (zie kiesGalerij()/kiesTijdvak() in app.js) — soms
 * wel veertig kaarten tegelijk. Een verschuiving (translateY) op al die
 * kaarten tegelijk oogde niet als "zacht invliegen" maar als het hele scherm
 * dat in beweging kwam, dus hier bewust alléén een vervaging: geen enkele
 * kaart verandert van plek, alleen van doorzichtigheid. Een klein beetje
 * vertraging per kaart (de eerste paar rijen) voorkomt dat alles als één vlak
 * tegelijk oplicht; voorbij de opgenoemde kaarten valt dat verschil toch niet
 * meer op. Een gewone CSS-animatie (geen transition) speelt vanzelf af zodra
 * zo'n kaart in de pagina verschijnt, dus hier is geen wijziging in app.js
 * zelf voor nodig. */
@keyframes luxe-kaart-binnen {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#album-raster .result-card {
  animation: luxe-kaart-binnen 0.5s ease both;
}

#album-raster .result-card:nth-child(2) { animation-delay: 0.03s; }
#album-raster .result-card:nth-child(3) { animation-delay: 0.06s; }
#album-raster .result-card:nth-child(4) { animation-delay: 0.09s; }
#album-raster .result-card:nth-child(5) { animation-delay: 0.12s; }
#album-raster .result-card:nth-child(6) { animation-delay: 0.15s; }
#album-raster .result-card:nth-child(7) { animation-delay: 0.18s; }
#album-raster .result-card:nth-child(n + 8) { animation-delay: 0.2s; }

@media (prefers-reduced-motion: reduce) {
  #album-raster .result-card {
    animation: none;
  }
}

/* ------------------------------------------------------------------ zoeken */

/* De zoekkaart droeg al het amber van het logo (zie de uitleg in style.css);
 * hier krijgt hij er wat meer gewicht bij, zonder de rustige amber-tint te
 * vervangen door iets drukkers. */
.search-card {
  box-shadow: 0 26px 56px -28px rgba(154, 97, 0, 0.5);
}

.search-form input:focus {
  box-shadow: 0 0 0 4px var(--accent-soft);
}

/* ------------------------------------------------------------------ velden */

.button,
.search-form input,
.fav-adres-form input,
.mailvenster-veld {
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

@media (hover: hover) {
  .button:not(.button-primary):not(:disabled):hover {
    transform: translateY(-1px);
    border-color: var(--border-strong);
  }
}

/* --------------------------------------------------------- invliegen */

/* De rust-stand staat hier en niet los in de HTML: deze klasse zet
 * public/luxe.js zelf pas op een blok, dus zonder (of vóór) dat script
 * blijft alles gewoon meteen zichtbaar — nooit een blok dat onzichtbaar
 * blijft hangen omdat JavaScript uitstaat of nog niet klaar is. */
.luxe-invlieg {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.6s cubic-bezier(0.2, 0.7, 0.3, 1),
    transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.luxe-invlieg.luxe-zichtbaar {
  opacity: 1;
  transform: none;
}

/* Subtieler dan een heel blok: een kaart staat al tussen andere kaarten in
 * een raster, dus een grote sprong van 28px oogt daar al snel onrustig —
 * een kleine opschuif met een vleugje schaal voelt rustiger en "duurder". */
.luxe-invlieg--kaart {
  transform: translateY(14px) scale(0.98);
  transition-duration: 0.55s;
}

.luxe-invlieg--kaart.luxe-zichtbaar {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .luxe-invlieg {
    opacity: 1;
    transform: none;
    transition: none;
  }
}