/* ============================================================
   Custom font
   ============================================================ */
@font-face {
  font-family: "Papyrcuts";
  src: url("fonts/Papyrcuts.otf") format("opentype");
  font-display: swap;
}

/* ============================================================
   Brand variables — swap these to restyle the whole site.
   ============================================================ */
:root {
  --bg: #0a0a14;
  --text: #ffffff;
  --font-display: "Papyrcuts", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Papyrcuts", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bar-height: 48px;
  --radius: 999px;
}

/* ============================================================
   Reset + base
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  padding-top: max(24px, env(safe-area-inset-top));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
  text-align: center;
  gap: 24px;
}

/* Meter page: tighten the gap between all sections. */
body.meter {
  gap: 16px;
}
body.meter .meter-stack {
  margin-top: 2vh;
}


/* Site-wide background — orientation-aware. Vertical art for portrait
   (phones, tablets in portrait), horizontal for landscape (desktops,
   phones rotated). No overlay — image shows at full brightness. */
body {
  background-image: url("background/LOADING_verticaal.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (orientation: landscape) {
  body {
    background-image: url("background/LOADING_horizontaal.jpg");
  }
}

/* ============================================================
   Button (used for Pre-Save + Exclusive Unlock)
   ============================================================ */
.btn {
  display: inline-block;
  padding: 16px 32px;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #ffffff;
  background: #e8f200;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: transform 120ms ease;
}
.btn:hover,
.btn:focus-visible {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0);
}

/* ============================================================
   Meter group — "LOADING" label, bar, duration label.
   Stacked vertically, with the label aligned to the bar's left
   and the duration aligned to the bar's right.
   ============================================================ */
.meter-stack {
  width: min(90vw, 480px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.loading-label {
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: 2rem;
  letter-spacing: 0.05em;
  color: #e8f200;
}
.bar {
  position: relative;
  width: 100%;
  height: var(--bar-height);
  background: transparent;
  border: 4px solid #e8f200;
  /* Rounder, slightly uneven corners — the filter does the rest. */
  border-radius: 22px 28px 24px 26px / 24px 22px 28px 26px;
  overflow: hidden;
  filter: url(#brush);
}
/* Track sits 6px inside the bar on every side, so fill width % is
   relative to this inner space — giving a uniform gap all the way round. */
.bar__track {
  position: absolute;
  inset: 6px;
}
.bar__fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: #e8f200;
  border-radius: 22px 28px 24px 26px / 24px 22px 28px 26px;
  transition: width 2s ease-out;
  filter: url(#brush);
}
.bar__duration {
  align-self: flex-end;
  font-family: var(--font-display);
  font-size: 2rem;
  font-variant-numeric: tabular-nums;
  color: #e8f200;
}

/* "meer pre-saves nodig" hint — shown between the meter and the CTA
   while locked. Matches the loading label / duration: yellow, display font. */
.meter-hint {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  color: #e8f200;
}

/* Pre-Save button — base styles for ALL devices, including phones.
   On mobile the text is solid dark on yellow because the knockout
   effect (further down) relies on `background-attachment: fixed`,
   which iOS Safari silently treats as `scroll` — the knockout image
   misaligns and the text would render invisible. */
#presave {
  text-transform: none;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  background: #fc4a9f;
  border-radius: 38% 30% 42% 32% / 50% 38% 45% 42%;
  /* Brush filter + neutral brightness; hover bumps the brightness for
     a subtle "light up" effect. Both states share the same filter
     function list so the transition can interpolate cleanly. */
  filter: url(#brush) brightness(1);
  transition: filter 200ms ease;
}
/* Disable the .btn hover lift — a `transform` cancels
   `background-attachment: fixed`, which would break the desktop knockout. */
#presave:hover,
#presave:focus-visible,
#presave:active {
  transform: none;
}
#presave:hover,
#presave:focus-visible {
  filter: url(#brush) brightness(1.15);
}

/* Playful jump on the locked CTA — re-uses the lock button's old cadence.
   Transforms during the hop briefly cancel `background-attachment: fixed`,
   so the desktop knockout text wobbles during the bounce frames. Accepted
   trade for the lively feel; the still ~70% of the cycle is unaffected. */
button#presave {
  animation: presave-jump 4.5s ease-in-out infinite;
}
@keyframes presave-jump {
  0%, 70%, 100% { transform: none; }
  75% { transform: translateY(-12px) rotate(-3deg); }
  80% { transform: none; }
  85% { transform: translateY(-6px) rotate(2deg); }
  90% { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  button#presave { animation: none; }
}

/* cta-area is a flex column so spacing between message / buttons /
   pre-save is even and controllable with a single gap value. */
#cta-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* Pre-sale date button pair — shown side by side when meter hits 100.
   Wraps to a column on narrow screens. Declared BEFORE the knockout
   media query below so that on desktop the knockout rule (same class
   specificity, later in source) wins — matching #presave. */
.cta-group {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Date buttons share the hand-painted shape of #presave. On mobile:
   solid dark text on yellow. On desktop: the knockout image-fill
   below takes over, so all buttons read identically. */
.btn--date {
  text-transform: none;
  color: var(--bg);
  background: #e8f200;
  border-radius: 38% 30% 42% 32% / 50% 38% 45% 42%;
  filter: url(#brush) brightness(1);
  transition: filter 200ms ease;
}
.btn--date:hover,
.btn--date:focus-visible,
.btn--date:active {
  transform: none;
}
.btn--date:hover,
.btn--date:focus-visible {
  filter: url(#brush) brightness(1.15);
}

/* Desktop / mouse-driven devices: knockout text effect on the date
   buttons only. The pre-save button keeps solid white text. */
@media (hover: hover) and (pointer: fine) {
  .btn--date {
    color: transparent;
    -webkit-text-fill-color: transparent;
    background: none;
    background-image:
      url("background/LOADING_verticaal.jpg"), linear-gradient(#e8f200, #e8f200);
    background-size:
      cover,
      100% 100%;
    background-position:
      center,
      0 0;
    background-attachment: fixed, scroll;
    background-repeat: no-repeat, no-repeat;
    -webkit-background-clip: text, padding-box;
    background-clip: text, padding-box;
  }
}
@media (hover: hover) and (pointer: fine) and (orientation: landscape) {
  .btn--date {
    background-image:
      url("background/LOADING_horizontaal.jpg"), linear-gradient(#e8f200, #e8f200);
  }
}

/* Header shown at the top of the reveal block. */
.reveal-header {
  font-family: var(--font-display);
  font-size: 2rem;
  letter-spacing: 0.05em;
  color: #fc4a9f;
  text-align: center;
}

/* Celebratory message shown above the pre-sale buttons at 100%. */
.unlock-message {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.03em;
  color: #e8f200;
  max-width: min(90vw, 480px);
  text-align: center;
  line-height: 1.4;
  white-space: pre-line;
}

/* Bar bounce fired by JS (.meter-stack--complete) once fill reaches 100%. */
@keyframes meter-pop {
  0%   { transform: none; }
  25%  { transform: translateY(-14px) scale(1.04, 0.96); }
  45%  { transform: translateY(0)     scale(0.97, 1.03); }
  65%  { transform: translateY(-7px)  scale(1.02, 0.99); }
  80%  { transform: none; }
  100% { transform: none; }
}
.meter-stack--complete {
  animation: meter-pop 0.65s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}

/* Reveal: message + buttons pop in once the bar finishes filling.
   Ends on `transform: none` so no lingering transform breaks the
   desktop knockout (background-attachment: fixed). */
@keyframes pop-in {
  0%   { opacity: 0; transform: scale(0.6) translateY(24px); }
  60%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: none; }
}
.pop-in {
  animation: pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ============================================================
   Tablet+
   ============================================================ */
@media (min-width: 640px) {
  .btn {
    font-size: 1.25rem;
    padding: 20px 40px;
  }
}