/**
 * Pakawi Season Dial v1.5.1
 * Breedte van de wrapper bepaal je in Bricks; hoogte volgt via aspect-ratio.
 */
.pak-season-dial {
  --pak-dial-visible: 0.3;   /* zichtbaar deel van de schijf (aandeel van diameter) */
  --pak-dial-duration: 600ms;

  aspect-ratio: 1 / var(--pak-dial-visible);
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.pak-season-dial:focus-visible {
  outline: 3px solid var(--pak-yellow);
  outline-offset: 4px;
}

.pak-season-dial__disc {
  display: block;
  width: 100%;
  height: auto;
  transform: rotate(var(--pak-dial-angle, 0deg));
  pointer-events: none;
}

.pak-season-dial.is-ready .pak-season-dial__disc {
  /* lichte overshoot, als een draaischijf die vastklikt */
  transition: transform var(--pak-dial-duration) cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Hint: wiebel + label "Kies je seizoen" ──────────────────── */

/* Wiebel op de aparte 'rotate'-eigenschap: komt bovenop de draai (transform),
   dus werkt in elke stand zonder de seizoenshoek te verstoren */
@keyframes pak-dial-wiggle {
  0%, 70%, 100% { rotate: 0deg; }
  12%           { rotate: 12deg; }
  26%           { rotate: -10deg; }
  40%           { rotate: 6deg; }
  54%           { rotate: -3deg; }
}

.pak-season-dial.is-hinting .pak-season-dial__disc {
  animation: pak-dial-wiggle 1.4s ease-in-out 0.3s 2;
}

/* Label zelf geplaatst en gestyled in Bricks; de module voegt enkel gedrag toe */
.pak-season-dial__hint {
  cursor: pointer;
  user-select: none;
  transition: opacity 300ms ease;
}

/* Na de eerste klik: uitfaden (JS zet daarna display:none) */
.pak-season-dial__hint.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* ── Seizoenspanelen (ticketblokken onder de dial) ───────────── */

/* Ouder van de panelen = referentie voor de absoluut gepositioneerde inactieve panelen */
:where(*):has(> .pak-season-panel) {
  position: relative;
}

/* Inactief: uit de flow (hoogte volgt het actieve paneel), maar behoudt de volle
   breedte zodat de Enviso-widget correct rendert terwijl hij verborgen is */
.pak-season-panel:not(.is-active) {
  position: absolute;
  inset: 0 0 auto 0;
  opacity: 0;
  visibility: hidden;
  translate: 0 5rem;
  pointer-events: none;
}

.pak-season-panel.is-ready {
  --pak-panel-duration: 400ms;
  /* visibility wisselt in één stap: naar 'visible' meteen, naar 'hidden' pas na de volle duur,
     zodat het uitgaande paneel zichtbaar blijft tot de fade-out klaar is */
  transition:
    opacity var(--pak-panel-duration) cubic-bezier(0.5, 0, 0.5, 1),
    translate var(--pak-panel-duration) cubic-bezier(0, 0.4, 0.5, 1.7),
    visibility 2s;
}

/* ── Seizoenskleuren (los van element-ID's, dus kopieerbaar) ───── */

/* Accent van de Enviso-widget; het Enviso Style-blok leest var(--pak-ticket-accent) */
.pak-season-panel[data-season="hoogseizoen"] { --pak-ticket-accent: var(--cal-fall); }
.pak-season-panel[data-season="laagseizoen"] { --pak-ticket-accent: var(--cal-winter); }

/* Kader rond de dial (directe ouder): de box-shadow in Bricks gebruikt
   var(--pak-season-color, rgb(0 0 0)) en volgt zo het actieve seizoen */
:has(> .pak-season-dial[data-season="hoogseizoen"]) { --pak-season-color: var(--cal-fall); }
:has(> .pak-season-dial[data-season="laagseizoen"]) { --pak-season-color: var(--cal-winter); }

/* Pas animeren na de beginstand, anders verkleurt de schaduw bij het laden */
:has(> .pak-season-dial.is-ready) {
  transition: box-shadow var(--pak-dial-duration, 600ms) ease;
}

@media (prefers-reduced-motion: reduce) {
  .pak-season-dial.is-ready .pak-season-dial__disc,
  .pak-season-panel.is-ready,
  :has(> .pak-season-dial.is-ready) {
    transition-duration: 1ms;
  }

  /* Geen wiebel; het label blijft wel staan */
  .pak-season-dial.is-hinting .pak-season-dial__disc {
    animation: none;
  }
}