/* ================================================================
   animations.css — keyframes + scroll-trigger klassen

   Robustheidsregel: initial-states gebruiken transforms, niet opacity.
   Een element op translateY(20px) is nog steeds zichtbaar — in een
   doorgeschakelde of background-tab waarin transitions/animaties niet
   tikken zie je dus nog steeds het werk; in een normale browser krijg
   je de bedoelde slide-in. Geen zwarte schermen meer.
   ================================================================ */

/* ---- Keyframes (decoratief, niet kritiek voor zichtbaarheid) ---- */

@keyframes boot-curtain-fade {
  0%   { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes scan-once {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes pulse-cta {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.02); }
}

@keyframes pulse-live {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* ============================== HERO TIMELINE ============================== */
/* Transform-driven reveal. JS zet .shown via setTimeout op elk element.
   No-JS / animation-throttled: html.js ontbreekt of .shown blijft uit, maar
   omdat we NIET hidden starten via opacity, blijft alles zichtbaar. */

html.js .hero__mark,
html.js .hero__statement,
html.js .hero__sub,
html.js .hero__fig,
html.js .hero__corner-tl,
html.js .hero__corner-bl {
  transition:
    transform 700ms var(--cc-ease),
    letter-spacing 700ms var(--cc-ease),
    filter 700ms var(--cc-ease);
}

html.js .hero__mark      { transform: scale(0.92); }
html.js .hero__statement { transform: translateY(12px); }
html.js .hero__sub       { transform: translateY(12px); }
html.js .hero__fig       { transform: translateX(8px); }
html.js .hero__corner-tl { transform: translateY(-8px); }
html.js .hero__corner-bl { transform: translateY(8px); }

html.js .hero__wordmark {
  transition:
    letter-spacing 700ms var(--cc-ease),
    filter 700ms var(--cc-ease);
  letter-spacing: -0.04em;
  filter: blur(1px);
}

html.js .hero__mark.shown,
html.js .hero__statement.shown,
html.js .hero__sub.shown,
html.js .hero__fig.shown,
html.js .hero__corner-tl.shown,
html.js .hero__corner-bl.shown {
  transform: none;
}

html.js .hero__wordmark.shown {
  letter-spacing: var(--cc-tracking-wordmark);
  filter: blur(0);
}

/* ============================== ANIMATE-ON-SCROLL ============================== */
/* Same pattern: transform-driven, geen opacity. */

html.js .animate-on-scroll {
  transform: translateY(16px);
  transition: transform var(--cc-dur-slow) var(--cc-ease);
}
html.js .animate-on-scroll.in-view { transform: translateY(0); }

html.js .animate-on-scroll[data-stagger="0"].in-view { transition-delay: 0ms; }
html.js .animate-on-scroll[data-stagger="1"].in-view { transition-delay: 100ms; }
html.js .animate-on-scroll[data-stagger="2"].in-view { transition-delay: 200ms; }
html.js .animate-on-scroll[data-stagger="3"].in-view { transition-delay: 300ms; }
html.js .animate-on-scroll[data-stagger="4"].in-view { transition-delay: 400ms; }
html.js .animate-on-scroll[data-stagger="5"].in-view { transition-delay: 500ms; }

/* ============================== MANIFESTO — VAARDE ============================== */

html.js .waarde {
  transform: translateX(-32px) skewX(-1.5deg);
  transition: transform var(--cc-dur-slow) var(--cc-ease);
}
html.js .waarde.in-view { transform: none; }
html.js .waarde[data-stagger="0"].in-view { transition-delay: 0ms; }
html.js .waarde[data-stagger="1"].in-view { transition-delay: 150ms; }
html.js .waarde[data-stagger="2"].in-view { transition-delay: 300ms; }

/* ============================== STUDIO — KOLOMMEN ============================== */

html.js .sub-brand {
  transform: scale(0.97);
  transition: transform 700ms var(--cc-ease);
}
html.js .sub-brand.in-view { transform: none; }
html.js .sub-brand[data-stagger="0"].in-view { transition-delay: 0ms; }
html.js .sub-brand[data-stagger="1"].in-view { transition-delay: 200ms; }
html.js .sub-brand[data-stagger="2"].in-view { transition-delay: 400ms; }

/* ============================== OVER — STATEMENT ============================== */

html.js .big-statement__line {
  transform: translateY(28px);
  transition: transform var(--cc-dur-slow) var(--cc-ease);
}
html.js .big-statement__line.in-view { transform: translateY(0); }
html.js .big-statement__line[data-stagger="0"].in-view { transition-delay: 0ms; }
html.js .big-statement__line[data-stagger="1"].in-view { transition-delay: 200ms; }
html.js .big-statement__line[data-stagger="2"].in-view { transition-delay: 400ms; }

/* ============================== PROJECT-KAARTEN ============================== */

html.js .project {
  transform: translateY(16px);
  transition:
    transform var(--cc-dur-slow) var(--cc-ease),
    border-color var(--cc-dur-fast) ease,
    background-color var(--cc-dur-base) ease;
}
html.js .project.in-view { transform: translateY(0); }
html.js .project[data-stagger="0"].in-view { transition-delay: 0ms; }
html.js .project[data-stagger="1"].in-view { transition-delay: 100ms; }
html.js .project[data-stagger="2"].in-view { transition-delay: 200ms; }
html.js .project[data-stagger="3"].in-view { transition-delay: 300ms; }

/* ============================== CONTACT ============================== */

html.js .contact__statement,
html.js .contact__sub,
html.js .cta,
html.js .contact__options {
  transform: translateY(16px);
  transition: transform 800ms var(--cc-ease);
}
html.js .contact__statement.in-view,
html.js .contact__sub.in-view,
html.js .cta.in-view,
html.js .contact__options.in-view {
  transform: translateY(0);
}

/* ============================== REDUCED MOTION ============================== */

@media (prefers-reduced-motion: reduce) {
  .boot-curtain { display: none; }
  html.js .hero__mark, html.js .hero__wordmark, html.js .hero__statement, html.js .hero__sub,
  html.js .hero__fig, html.js .hero__corner-tl, html.js .hero__corner-bl,
  html.js .animate-on-scroll, html.js .waarde, html.js .sub-brand,
  html.js .big-statement__line, html.js .project,
  html.js .contact__statement, html.js .contact__sub, html.js .cta, html.js .contact__options {
    transform: none !important;
    letter-spacing: var(--cc-tracking-wordmark) !important;
    filter: none !important;
    transition: none !important;
  }
  .big-statement__rule { transform: scaleX(1) !important; }
  .plate__line { stroke-dashoffset: 0 !important; }
  .plate__block, .plate__arrow polyline, .plate__titleblock, .plate__shadow { opacity: 1 !important; transform: none !important; }
  .dot--live { animation: none !important; }
}