/* ═══════════════════════════════════════════════════════════════════════
   hero-evo.css · 25-jaar internet-mijlpalen achtergrondlaag
   originally lines 4365–4802 of index.html
   ═══════════════════════════════════════════════════════════════════════ */

    .ace-intro{
      position:fixed;
      inset:0;
      z-index:250;
      overflow:hidden;
      isolation:isolate;
      /* Meerlaagse warme gloed — goud, diep kobalt en zachte terracotta,
         op donkere basis. Subtiel, niet feestelijk. */
      background:
        radial-gradient(900px 700px at 22% 30%, rgba(184,150,74,.18) 0%, transparent 58%),
        radial-gradient(1100px 800px at 82% 72%, rgba(78,96,140,.18) 0%, transparent 62%),
        radial-gradient(700px 600px at 62% 22%, rgba(178,96,74,.10) 0%, transparent 60%),
        radial-gradient(1400px 1000px at 34% 68%, #1a1714 0%, #0e0d0b 52%, #060503 100%);
      background-size: 200% 200%, 220% 220%, 180% 180%, 100% 100%;
      background-position: 0% 0%, 100% 100%, 50% 0%, 0% 0%;
      animation: aceIntroDrift 38s ease-in-out infinite alternate;
      opacity:1;
      transition:opacity 900ms cubic-bezier(.55,.05,.22,1), background 1200ms cubic-bezier(.55,.05,.22,1);
    }
    @keyframes aceIntroDrift{
      0%   { background-position: 0% 0%, 100% 100%, 50% 0%, 0% 0%; }
      50%  { background-position: 30% 20%, 70% 80%, 40% 30%, 0% 0%; }
      100% { background-position: 15% 10%, 85% 90%, 55% 15%, 0% 0%; }
    }
    @media (prefers-reduced-motion: reduce){
      .ace-intro{ animation:none; }
    }
    .ace-intro.finishing{
      background:
        radial-gradient(1200px 900px at 50% 52%, #f7f2e6 0%, var(--bg, #efece4) 60%, var(--bg-deep, #e7e3d8) 100%);
    }
    .ace-intro.hidden{ opacity:0; pointer-events:none; }
    .ace-intro.gone{ display:none; }

    .ace-intro::before{
      content:"";
      position:absolute;
      inset:-4%;
      pointer-events:none;
      z-index:4;
      opacity:.55;
      mix-blend-mode:overlay;
      background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.12 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    }
    .ace-intro::after{
      content:"";
      position:absolute; inset:0;
      pointer-events:none;
      z-index:3;
      background:radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%);
      transition:opacity 900ms cubic-bezier(.55,.05,.22,1);
    }
    .ace-intro.finishing::after{ opacity:0 }

    .ace-intro-stage{
      position:absolute;
      inset:0;
      display:grid;
      place-items:center;
      /* Camera-origin zit in het ONDERSTE bowl-gat van de italic '2'
         (links in het woord "25"). De italic-helling duwt de bowl iets
         naar links-onder — hier mikken we exact in het grootste "gat"
         van de letter, zodat het voelt alsof de camera er echt doorheen
         vliegt i.p.v. er tegenaan knalt.
         34% / 68% werkt responsive omdat de letter zelf met clamp() schaalt
         en altijd visueel gecentreerd blijft binnen de viewport. */
      transform-origin:34% 68%;
      will-change:transform, opacity, filter;
      z-index:2;
    }
    /* Mobiel: smalle viewport \u2192 de '25' schaalt naar beneden maar de italic-helling
       is relatief sterker. Origin iets naar rechts + hoger om nog steeds door de
       onderste bowl te mikken. */
    @media (max-width: 700px){
      .ace-intro-stage{ transform-origin:38% 64%; }
    }
    .ace-big25{
      position:relative;
      font-family:var(--font-display);
      font-style:italic;
      font-weight:500;
      color:#f2ece0;
      font-size:clamp(18rem, 52vw, 62rem);
      line-height:.82;
      letter-spacing:-.04em;
      text-align:center;
      text-shadow:
        0 0 60px rgba(214,176,106,.18),
        0 0 140px rgba(214,176,106,.10);
      will-change:transform, opacity, filter;
      opacity:0;
      transform:scale(.96);
      filter:blur(6px);
    }

    .ace-years-top, .ace-years-bottom{
      position:absolute;
      left:50%;
      transform:translateX(-50%);
      font-family:var(--font-body);
      font-weight:300;
      font-size:.7rem;
      letter-spacing:.42em;
      text-transform:uppercase;
      color:rgba(242,236,224,.5);
      opacity:0;
      z-index:3;
      font-variant-numeric:tabular-nums;
      white-space:nowrap;
    }
    .ace-years-top{ top:10vh }
    .ace-years-bottom{ bottom:10vh }
    .ace-years-top::after, .ace-years-bottom::before{
      content:"";
      display:block;
      width:48px; height:1px;
      background:rgba(242,236,224,.26);
      margin:14px auto 0;
    }
    .ace-years-bottom::before{ margin:0 auto 14px }

    .ace-jaar{
      position:absolute;
      left:50%;
      top:calc(50% + min(28vw, 34rem));
      transform:translate(-50%, 0);
      font-family:var(--font-body);
      font-weight:400;
      font-size:.72rem;
      letter-spacing:.62em;
      text-transform:uppercase;
      color:rgba(242,236,224,.55);
      opacity:0;
      white-space:nowrap;
      z-index:3;
    }
    .ace-jaar::before, .ace-jaar::after{
      content:"";
      display:inline-block;
      width:28px; height:1px;
      background:rgba(242,236,224,.28);
      vertical-align:middle;
      margin:0 16px;
    }

    .ace-subtitle{
      position:absolute;
      left:50%;
      top:calc(50% + min(36vw, 40rem));
      transform:translate(-50%, 6px);
      font-family:var(--font-display);
      font-style:italic;
      font-weight:400;
      font-size:clamp(1.2rem, 1.8vw, 1.6rem);
      color:rgba(242,236,224,.72);
      opacity:0;
      white-space:nowrap;
      z-index:3;
      letter-spacing:.01em;
    }

    /* ============================================================
       25 JAAR INTERNET-EVOLUTIE — subtiele achtergrondlaag
       Synchroon met zoom-progress: 2001 (Ilse) → 2026 (AI).
       Drie stijlen via data-ace-evo attribuut op .ace-intro:
         "constellation" — gloeiende woorden + dunne verbindingslijnen
         "phosphor"      — CRT-groen terminal met scanlines
         "poetry"        — code-fragmenten als typografisch gefluister
       ============================================================ */
    /* ——— Blueprint constructielaag: witte lijnen die 25 jaar structureren ——— */
    svg.bp-grid{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      z-index:1;               /* boven stage-bg, onder cutout-overlay (z:3) */
      pointer-events:none;
      opacity:calc(.85 * var(--big-opacity, 1));
      transition:none;
    }
    .bp-tick-label{
      font-family:"JetBrains Mono", monospace;
      font-size:10px;
      fill:rgba(180,220,255,.55);
      letter-spacing:2px;
    }

    /* ——— Hover-tooltip op ticker-mijlpalen: centrale blueprint-kaart ——— */
    .ace-evo-item{ pointer-events:auto; cursor:help; }
    .ace-evo-item:hover .ace-evo-label,
    .ace-evo-item:hover .ace-evo-year{
      color:rgba(255,255,255,1);
      text-shadow:0 0 12px rgba(180,220,255,.55);
    }
    .ace-evo-tooltip{
      position:fixed;
      top:50%;
      left:50%;
      z-index:260;
      width:min(520px, 88vw);
      padding:42px 48px 44px;
      /* Warm donker — matcht hero-achtergrond ipv koele blauwe glas-look */
      background:
        radial-gradient(140% 100% at 20% 0%, rgba(184,150,74,.08) 0%, transparent 55%),
        rgba(14,11,8,.88);
      border:1px solid rgba(184,150,74,.22);
      color:rgba(242,236,224,.95);
      backdrop-filter:blur(20px) saturate(1.1);
      -webkit-backdrop-filter:blur(20px) saturate(1.1);
      box-shadow:
        0 30px 80px rgba(0,0,0,.65),
        0 0 0 1px rgba(184,150,74,.06) inset,
        0 0 60px rgba(184,150,74,.08);
      pointer-events:none;
      opacity:0;
      transform:translate(-50%, -50%) scale(.96);
      transition:opacity .32s cubic-bezier(.22,.61,.36,1), transform .32s cubic-bezier(.22,.61,.36,1);
    }
    .ace-evo-tooltip.is-visible{
      opacity:1;
      transform:translate(-50%, -50%) scale(1);
    }

    /* Geen hoek-markers — schone tooltip */
    .ace-evo-tooltip::before,
    .ace-evo-tooltip::after{ content:none }
    .ace-evo-tooltip .ace-evo-corner-tl,
    .ace-evo-tooltip .ace-evo-corner-br{ display:none }

    /* Index-pil linksboven en rechtsboven */
    .ace-evo-tooltip-meta{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-bottom:28px;
      font-family:"Space Grotesk", -apple-system, sans-serif;
      font-size:10px;
      letter-spacing:.3em;
      color:rgba(184,150,74,.7);
      text-transform:uppercase;
      font-weight:500;
    }
    .ace-evo-tooltip-year{
      display:flex;
      align-items:baseline;
      gap:18px;
      margin-bottom:14px;
    }
    .ace-evo-tooltip-year .y-num{
      font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
      font-size:64px;
      line-height:1;
      font-weight:500;
      color:#f2ece0;
      letter-spacing:.01em;
      font-variant-numeric:tabular-nums;
    }
    .ace-evo-tooltip-year .y-rule{
      flex:1;
      height:1px;
      background:linear-gradient(90deg, rgba(184,150,74,.55) 0%, rgba(184,150,74,0) 100%);
      align-self:center;
    }
    .ace-evo-tooltip-title{
      display:block;
      font-family:"Space Grotesk", -apple-system, sans-serif;
      font-size:18px;
      line-height:1.3;
      color:#f2ece0;
      margin-bottom:18px;
      font-weight:500;
      letter-spacing:.04em;
      text-transform:uppercase;
    }
    .ace-evo-tooltip-desc{
      display:block;
      font-family:"Space Grotesk", -apple-system, sans-serif;
      font-size:14px;
      line-height:1.65;
      color:rgba(242,236,224,.72);
      font-weight:400;
      letter-spacing:.005em;
    }
    .ace-evo-tooltip-footer{
      margin-top:26px;
      padding-top:16px;
      border-top:1px solid rgba(184,150,74,.16);
      display:flex;
      justify-content:space-between;
      font-family:"Space Grotesk", -apple-system, sans-serif;
      font-size:10px;
      letter-spacing:.25em;
      color:rgba(184,150,74,.55);
      text-transform:uppercase;
    }

    /* Zachte overlay-backdrop achter de kaart om de hero te dempen */
    .ace-evo-backdrop{
      position:fixed;
      inset:0;
      z-index:255;
      background:radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 70%);
      pointer-events:none;
      opacity:0;
      transition:opacity .32s ease;
    }
    .ace-evo-backdrop.is-visible{ opacity:1; }

    .ace-evo{
      position:absolute;
      left:0; right:0;
      bottom:12vh;
      height:auto;
      pointer-events:none;
      z-index:4;               /* BOVEN de '25', zichtbaar als bewegende band */
      overflow:hidden;
      opacity:0;
      transition:opacity .8s ease;
    }
    /* Alleen zichtbaar als de hero-zoom actief is — fade weg direct aan begin scroll */
    .ace-evo.is-visible[data-ace-evo]:not([data-ace-evo="none"]){
      opacity:var(--evo-opacity, 0);
    }
    /* Als evo bijna weg is, schakel hover-interactie uit én forceer tooltip dicht.
       Ook pointer-events op child items uitschakelen — anders kun je 'hover' triggeren
       op een onzichtbare (maar nog in DOM staande) tijdlijn-item. */
    .ace-evo[style*="--evo-opacity: 0"],
    .ace-evo[style*="--evo-opacity:0"],
    .ace-evo:not(.is-visible){
      pointer-events:none;
    }
    .ace-evo[style*="--evo-opacity: 0"] .ace-evo-item,
    .ace-evo[style*="--evo-opacity:0"] .ace-evo-item,
    .ace-evo:not(.is-visible) .ace-evo-item{
      pointer-events:none !important;
    }

    /* Ticker-track: alle mijlpalen achter elkaar in één lange rij */
    .ace-evo-track{
      display:flex;
      gap:4rem;
      white-space:nowrap;
      width:max-content;
      will-change:transform;
      padding:.8rem 0;
      align-items:baseline;
    }

    .ace-evo-item{
      display:inline-flex;
      align-items:baseline;
      gap:.9rem;
      flex-shrink:0;
      white-space:nowrap;
      opacity:.85;
    }

    .ace-evo-year{
      font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
      font-size:clamp(1.05rem, 1.3vw, 1.3rem);
      letter-spacing:.08em;
      color:rgba(184,150,74,.95);
      font-variant-numeric:tabular-nums;
      font-weight:500;
    }
    .ace-evo-label{
      font-family:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
      font-size:clamp(.9rem, 1.1vw, 1.1rem);
      letter-spacing:.03em;
      color:rgba(242,236,224,.82);
      font-weight:400;
    }
    .ace-evo-sep{
      color:rgba(184,150,74,.35);
      font-size:clamp(.85rem, 1.05vw, 1.05rem);
      font-family:"Space Grotesk", sans-serif;
    }

    /* Fade-out aan beide zijden zodat tekst "uit het niets" verschijnt en verdwijnt */
    .ace-evo::before,
    .ace-evo::after{
      content:"";
      position:absolute;
      top:0; bottom:0;
      width:22%;
      pointer-events:none;
      z-index:2;
    }
    .ace-evo::before{
      left:0;
      background:linear-gradient(90deg, rgba(14,10,6,1) 0%, rgba(14,10,6,0) 100%);
    }
    .ace-evo::after{
      right:0;
      background:linear-gradient(270deg, rgba(14,10,6,1) 0%, rgba(14,10,6,0) 100%);
    }

    /* ——— Style varianten ——— */
    .ace-evo[data-ace-evo="constellation"] .ace-evo-label{
      font-family:var(--font-display);
      font-style:italic;
      font-size:clamp(1.25rem, 1.6vw, 1.6rem);
      letter-spacing:0;
    }
    .ace-evo[data-ace-evo="constellation"] .ace-evo-year{
      font-family:var(--font-display);
      font-style:italic;
    }

    .ace-evo[data-ace-evo="phosphor"] .ace-evo-label,
    .ace-evo[data-ace-evo="phosphor"] .ace-evo-year{
      color:rgba(120,220,140,.85);
      text-transform:uppercase;
      text-shadow:0 0 8px rgba(120,220,140,.4);
    }
    .ace-evo[data-ace-evo="phosphor"] .ace-evo-sep{
      color:rgba(120,220,140,.35);
    }

    .ace-skip{
      position:fixed;
      top:24px; right:28px;
      z-index:260;
      background:transparent;
      border:1px solid rgba(242,236,224,.22);
      color:rgba(242,236,224,.72);
      padding:10px 16px;
      font-family:var(--font-body);
      font-size:.68rem;
      letter-spacing:.28em;
      text-transform:uppercase;
      cursor:pointer;
      border-radius:999px;
      backdrop-filter:blur(6px);
      transition:color .3s ease, border-color .3s ease, background .3s ease, opacity .6s ease;
      opacity:0;
    }
    .ace-skip.visible{ opacity:1 }
    .ace-skip:hover{
      color:#fff;
      border-color:rgba(242,236,224,.5);
      background:rgba(242,236,224,.04);
    }
    body.ace-intro-running{ overflow:hidden; }

    /* ─── Paper blueprint grid achter de hero (full-bleed) ─── */
    div.bp-grid{
      position:absolute;
      inset:0;
      pointer-events:none;
      z-index:0;
      background-image:
        /* MAJOR vertical (every 128px, centred) */
        linear-gradient(to right,
          transparent calc(50% - 0.5px),
          rgba(22,20,18,.055) calc(50% - 0.5px),
          rgba(22,20,18,.055) calc(50% + 0.5px),
          transparent calc(50% + 0.5px)),
        /* MAJOR horizontal (every 128px, centred) */
        linear-gradient(to bottom,
          transparent calc(50% - 0.5px),
          rgba(22,20,18,.055) calc(50% - 0.5px),
          rgba(22,20,18,.055) calc(50% + 0.5px),
          transparent calc(50% + 0.5px)),
        /* minor vertical (every 32px, centred) */
        linear-gradient(to right,
          transparent calc(50% - 0.5px),
          rgba(22,20,18,.025) calc(50% - 0.5px),
          rgba(22,20,18,.025) calc(50% + 0.5px),
          transparent calc(50% + 0.5px)),
        /* minor horizontal (every 32px, centred) */
        linear-gradient(to bottom,
          transparent calc(50% - 0.5px),
          rgba(22,20,18,.025) calc(50% - 0.5px),
          rgba(22,20,18,.025) calc(50% + 0.5px),
          transparent calc(50% + 0.5px));
      background-size:
        128px 100%, 100% 128px,
        32px  100%, 100% 32px;
      background-position:center center;
      background-repeat:repeat;
      mix-blend-mode:screen;
      -webkit-mask-image:radial-gradient(ellipse 78% 70% at 50% 54%, #000 35%, transparent 92%);
              mask-image:radial-gradient(ellipse 78% 70% at 50% 54%, #000 35%, transparent 92%);
      opacity:.35;
    }

    /* ─── Hero paper blueprint: rustig architectenpapier met crop marks & crosshair ─── */
    .hero-bp-paper{
      position:absolute;
      inset:0;
      pointer-events:none;
      z-index:1;
      /* Grid layer: major 128px + minor 32px + 512px anchor */
      background-image:
        /* anchor major vertical (elke 512px, iets donkerder) */
        linear-gradient(to right,
          transparent calc(50% - 0.5px),
          rgba(22,20,18,.11) calc(50% - 0.5px),
          rgba(22,20,18,.11) calc(50% + 0.5px),
          transparent calc(50% + 0.5px)),
        linear-gradient(to bottom,
          transparent calc(50% - 0.5px),
          rgba(22,20,18,.11) calc(50% - 0.5px),
          rgba(22,20,18,.11) calc(50% + 0.5px),
          transparent calc(50% + 0.5px)),
        /* major vertical (128px) */
        linear-gradient(to right,
          transparent calc(50% - 0.5px),
          rgba(22,20,18,.06) calc(50% - 0.5px),
          rgba(22,20,18,.06) calc(50% + 0.5px),
          transparent calc(50% + 0.5px)),
        linear-gradient(to bottom,
          transparent calc(50% - 0.5px),
          rgba(22,20,18,.06) calc(50% - 0.5px),
          rgba(22,20,18,.06) calc(50% + 0.5px),
          transparent calc(50% + 0.5px)),
        /* minor vertical (32px) */
        linear-gradient(to right,
          transparent calc(50% - 0.5px),
          rgba(22,20,18,.028) calc(50% - 0.5px),
          rgba(22,20,18,.028) calc(50% + 0.5px),
          transparent calc(50% + 0.5px)),
        linear-gradient(to bottom,
          transparent calc(50% - 0.5px),
          rgba(22,20,18,.028) calc(50% - 0.5px),
          rgba(22,20,18,.028) calc(50% + 0.5px),
          transparent calc(50% + 0.5px));
      background-size:
        512px 100%, 100% 512px,
        128px 100%, 100% 128px,
        32px  100%, 100% 32px;
      background-position:center center;
      background-repeat:repeat;
      mix-blend-mode:multiply;
      -webkit-mask-image:radial-gradient(ellipse 88% 82% at 50% 54%, #000 42%, transparent 96%);
              mask-image:radial-gradient(ellipse 88% 82% at 50% 54%, #000 42%, transparent 96%);
      opacity:.85;
    }

    /* Kader-lijn net binnen de randen (dun, blueprintachtig) */
    .hero-bp-paper::before{
      content:"";
      position:absolute;
      inset:32px;
      border:1px solid rgba(22,20,18,.09);
      pointer-events:none;
    }

    /* Centraal registratie-crosshair (+) */
    .hero-bp-paper::after{
      content:"";
      position:absolute;
      left:50%;
      top:50%;
      width:28px;
      height:28px;
      transform:translate(-50%,-50%);
      background-image:
        linear-gradient(to right,
          transparent calc(50% - 0.5px),
          rgba(22,20,18,.22) calc(50% - 0.5px),
          rgba(22,20,18,.22) calc(50% + 0.5px),
          transparent calc(50% + 0.5px)),
        linear-gradient(to bottom,
          transparent calc(50% - 0.5px),
          rgba(22,20,18,.22) calc(50% - 0.5px),
          rgba(22,20,18,.22) calc(50% + 0.5px),
          transparent calc(50% + 0.5px));
      pointer-events:none;
    }

    /* Crop marks in de vier hoeken (L-vormen) */
    .hero-bp-crop{
      position:absolute;
      width:14px;
      height:14px;
      pointer-events:none;
      opacity:.7;
    }
    .hero-bp-crop::before,
    .hero-bp-crop::after{
      content:"";
      position:absolute;
      background:rgba(22,20,18,.35);
    }
    .hero-bp-crop::before{ left:0; top:0; width:14px; height:1px; }
    .hero-bp-crop::after { left:0; top:0; width:1px;  height:14px; }
    .hero-bp-crop.tl{ top:20px;    left:20px; }
    .hero-bp-crop.tr{ top:20px;    right:20px; transform:scaleX(-1); }
    .hero-bp-crop.bl{ bottom:20px; left:20px;  transform:scaleY(-1); }
    .hero-bp-crop.br{ bottom:20px; right:20px; transform:scale(-1,-1); }

    /* ─── Anti-flicker: promoot figuren naar eigen GPU-laag bij scroll-animatie ─── */
    .hero-figures{
      transform:translateZ(0);
      will-change:transform;
      backface-visibility:hidden;
      -webkit-backface-visibility:hidden;
      /* Isoleer stacking context — voorkomt dat nabije layers de figuren meetrekken
         bij langzaam scroll (composite-layer thrashing). */
      isolation:isolate;
    }
    /* Base-stijlen voor .hero-intro-figure staan in hero.css (inclusief transform+filter+will-change).
       Hier geen dubbele transform:translateZ(0) meer — die overschreef de 2D translateX op is-roy/is-bas,
       waardoor de 3D-hint effectief verdween. In hero.css nu translate3d() gebruikt. */

    /* ─── Anti-flicker v2: isoleer raster-lagen en verwijder kostbare filter ─── */

    /* Raster-lagen: eigen composited layer + stabiele rendering */
    .bp-grid,
    .hero-bp-paper{
      transform:translateZ(0);
      will-change:opacity;
      backface-visibility:hidden;
      -webkit-backface-visibility:hidden;
      contain:layout paint;
    }

    /* Hero-stage: LET OP — contain:layout/paint verwijderd.
       Beide containment-keywords maken van .hero-zoom-stage een containing
       block voor position:fixed descendants, waardoor .hero-figures (Roy & Bas)
       niet meer relatief aan de viewport staat maar aan de stage. Zodra de
       sticky stage aan het einde van de hero-runway omhoogscrolt, scrollen
       Roy & Bas mee — niet gewenst. Paint-containment clipt daarnaast óók
       de fixed descendants (zelfde effect als overflow:hidden).
       Raster-lagen (.bp-grid / .hero-bp-paper) hebben hun eigen containment. */

    /* Figuren: de oude statische filter (grayscale(.05) contrast(1.02)) werd hier
       ooit uitgezet om per-frame bitmap-hergeneratie te vermijden. De nieuwe
       entrance-filter in hero.css gebruikt CSS custom properties en is GPU-
       geaccelereerd — veilig om te laten lopen zodat Roy & Bas silkier in focus
       komen bij hun entry. !important-override is daarom verwijderd. */