/* ============================================================
   Adore Animatie — Circles of Discovery (Amsterdam UMC)
   Alle selectors zijn gescopet onder .adore-anim zodat ze het
   WordPress-thema niet beïnvloeden.
   ============================================================ */

.adore-anim{
  --aa-font:'Museo Sans Rounded','Source Sans 3',sans-serif;
  --aa-height:540px;
  container-type:inline-size;
  width:100%;
  max-width:1100px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:16px;
  font-family:var(--aa-font);
}
.adore-anim *{box-sizing:border-box;margin:0;padding:0}

.adore-anim .aa-stage{
  font-family:var(--aa-font);
  background:#822323;
  width:100%;
  height:var(--aa-height,540px);
  overflow:hidden;
  position:relative;
  border-radius:12px;
  box-shadow:0 10px 40px rgba(0,0,0,.15);
}

/* SIDEBAR */
.adore-anim .aa-sidebar{
  position:absolute;left:0;top:0;bottom:0;width:78px;background:#f0ebe4;z-index:39;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  transition:transform .9s cubic-bezier(.7,0,.3,1),opacity .9s ease;
}
.adore-anim .aa-sidebar.aa-hidden{transform:translateX(-100%);opacity:0}
.adore-anim .aa-ib{
  position:relative;width:50px;height:50px;border-radius:50%;background:#0d3535;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.adore-anim .aa-ib svg{width:38px;height:38px;display:block}
/* Lijntje precies op de overgang sidebar -> achtergrond */
.adore-anim .aa-ib::after{
  content:'';position:absolute;right:-16.5px;top:50%;transform:translateY(-50%);
  width:5px;height:18px;border-radius:2.5px;background:#0d3535;
}
/* Label naast icoon — op desktop achter icoon */
.adore-anim .aa-ib .aa-lbl{
  position:absolute;left:62px;top:50%;transform:translateY(-50%);
  font-family:var(--aa-font);font-size:16px;font-weight:600;color:#0d3535;
  white-space:nowrap;letter-spacing:.01em;display:none;pointer-events:none;
}

/* Brede sidebar met labels achter de iconen (op basis van widget-breedte) */
@container (min-width:880px){
  .adore-anim .aa-sidebar{width:300px;align-items:flex-start;padding-left:22px;gap:14px}
  .adore-anim .aa-ib .aa-lbl{display:block}
  .adore-anim .aa-ib::after{right:-230.5px}
}

.adore-anim .aa-sc{
  position:absolute;left:78px;top:0;right:0;bottom:0;
  transition:left .9s cubic-bezier(.7,0,.3,1);
}
.adore-anim .aa-sc.aa-expanded{left:0}
@container (min-width:880px){.adore-anim .aa-sc{left:300px}}
.adore-anim .aa-sc canvas{position:absolute;inset:0;display:block}
.adore-anim .aa-bg{z-index:1}
.adore-anim .aa-blob{z-index:2}
.adore-anim .aa-title{z-index:3}

/* Fase-titel — faadt in/uit op een vaste plek links (positie via JS) */
.adore-anim .aa-phase-title{
  position:absolute;top:36px;left:0;z-index:20;font-family:var(--aa-font);
  color:#fff;font-weight:300;font-size:46px;line-height:1.05;text-align:left;
  letter-spacing:-.01em;pointer-events:none;opacity:0;
  transition:opacity .6s ease;
}
.adore-anim .aa-phase-title.aa-visible{opacity:1}
.adore-anim .aa-phase-title .aa-small{
  display:block;font-family:var(--aa-font);font-size:18px;font-weight:400;
  letter-spacing:.01em;margin-bottom:8px;opacity:.85;
}

/* Knoppen + tijdtekst verbergen (shortcode-optie bediening="nee").
   De voortgangsbalk (.aa-timeline) blijft bewust zichtbaar. */
.adore-anim.aa-hide-controls .aa-ctrl,
.adore-anim.aa-hide-controls .aa-timecode{display:none}

.adore-anim .aa-ctrl{position:absolute;bottom:14px;right:14px;z-index:39;display:flex;gap:8px}
.adore-anim .aa-btn{
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);border-radius:50%;
  width:36px;height:36px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s;padding:0;
}
.adore-anim .aa-btn:hover{background:rgba(255,255,255,.32)}
.adore-anim .aa-btn svg{width:14px;height:14px;fill:#fff}
.adore-anim .aa-timeline{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,.12);z-index:50}
.adore-anim .aa-tlfill{height:100%;background:rgba(255,255,255,.55);width:0}
.adore-anim .aa-timecode{
  position:absolute;bottom:14px;left:14px;z-index:50;
  font-family:'SF Mono','Monaco','Menlo','Consolas',monospace;font-size:11px;
  color:rgba(255,255,255,0.65);background:rgba(0,0,0,0.22);padding:4px 8px;
  border-radius:4px;pointer-events:none;letter-spacing:.04em;
}

/* Outro-tekst over de bollen aan het einde */
.adore-anim .aa-outro{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;z-index:30;pointer-events:none}
.adore-anim .aa-outro-text{
  position:absolute;font-family:var(--aa-font);color:#1a1a1a;text-align:center;
  letter-spacing:.01em;opacity:0;transition:opacity 1.0s ease;
  text-shadow:0 1px 8px rgba(0,0,0,0.08);white-space:nowrap;
}
.adore-anim .aa-outro-text.aa-visible{opacity:1}
.adore-anim .aa-outro2{font-size:60px;font-weight:400;letter-spacing:-.005em}

/* Adore-beeldmerk — faadt aan het einde in (cross-fade vanuit de logo-bollen) */
.adore-anim .aa-logo-img{
  position:absolute;z-index:31;width:34%;max-width:360px;
  top:50%;left:50%;transform:translate(-50%,-50%);
  opacity:0;transition:opacity 1.1s ease;pointer-events:none;
  filter:drop-shadow(0 6px 28px rgba(0,0,0,0.18));
}
.adore-anim .aa-logo-img.aa-visible{opacity:1}

@container (max-width:880px){
  .adore-anim .aa-phase-title{font-size:28px;top:24px}
  .adore-anim .aa-phase-title .aa-small{font-size:13px;margin-bottom:5px}
  .adore-anim .aa-outro2{font-size:42px}
  .adore-anim .aa-logo-img{width:56%}
}

/* Toelichting */
.adore-anim .aa-toelichting{
  width:100%;background:#fff;border-radius:12px;padding:24px 28px;
  box-shadow:0 4px 20px rgba(0,0,0,.06);
}
.adore-anim .aa-toelichting h2{font-size:18px;color:#1a1a1a;font-weight:600;margin-bottom:8px}
.adore-anim .aa-toelichting p{font-size:1rem;line-height:1.6;color:#444}
.adore-anim .aa-toelichting p+p{margin-top:10px}