/* ==========================================================================
   A'DAM Tower Navigator 2.1
   Eén SVG: de tekening, de etages als gekleurde vlakken en de woorden als
   echte tekst. Alles in dezelfde viewBox, dus het schaalt als één plaat —
   op een telefoon net zo goed als op een breed scherm.
   ========================================================================== */

.atn {
  --atn-ink:   var(--at-text, #fff);
  --atn-ink-2: var(--at-text-2, rgba(255, 255, 255, .62));
  --atn-ink-3: var(--at-text-3, rgba(255, 255, 255, .34));
  --atn-r:     var(--at-r-sm, 0 10px 0 10px);
  --atn-ease:  var(--at-ease-out, cubic-bezier(.16, 1, .3, 1));

  position: relative;
  container-type: inline-size;
}

.atn__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   TOREN
   ========================================================================== */
.atn__tower {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: min(100%, 92vh * (1600 / 2311));
  aspect-ratio: var(--atn-ratio, 1600 / 2311);
}

.atn__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* De tekening heeft een alfakanaal (wit lijnwerk, transparante ondergrond),
   dus hij staat op elke achtergrondkleur zonder kader. Geen blend-mode:
   die reikt hier toch niet tot de pagina, want container-type op .atn maakt
   een eigen stacking context. */

/* De reclamepanelen: de rusttoestand van de toren. Ze verschijnen pas na de
   openingssweep en maken plaats zodra iemand een etage aanwijst. */
.atn__panels {
  opacity: 0;
  transition: opacity .6s var(--atn-ease);
  pointer-events: none;
}
.atn.is-dressed .atn__panels { opacity: 1; }
.atn.is-focused .atn__panels { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .atn__panels { opacity: 1; transition: none; }
}

/* De tekening blijft altijd op volle sterkte wit — de nadruk komt van de
   kleurvlakken, niet van het dimmen van de toren. */

/* ==========================================================================
   ETAGES
   ========================================================================== */
.atn__floor { cursor: pointer; }
.atn__floor:focus { outline: none; }

/* Het trefvlak: onzichtbaar, altijd op ware grootte, altijd aanklikbaar.
   Nodig omdat een vlak met fill-opacity 0 niet meer wordt geraakt, en omdat
   het gekleurde vlak tijdens het openklappen kleiner is dan de etage. */
.atn__floor-hit {
  fill: transparent;
  pointer-events: all;
}

/* In rust is de toren alleen lijnwerk — geen kleur te zien. Kleur komt van
   het spel (.is-lit) of van aanwijzen (.is-active).

   De basistransitie is traag en de .is-lit-transitie snel: een etage komt
   vlot op en dooft langzaam uit. Doordat de volgende etage opkomt terwijl
   de vorige nog nagloeit, faden ze half door elkaar heen. */
.atn__floor-shape {
  fill: var(--c);
  fill-opacity: 0;
  stroke: var(--c);
  stroke-opacity: 0;
  stroke-width: 4;
  pointer-events: none;
  /* Screen over zwart geeft de kleur; het witte lijnwerk van de tekening
     blijft er dwars doorheen staan. */
  mix-blend-mode: screen;
  /* Openklappen vanaf de eigen onderrand. */
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition:
    fill-opacity .95s ease,
    stroke-opacity .4s var(--atn-ease);
}

/* Het spel: vlot openklappen, niet vol dekkend — het lijnwerk moet er
   doorheen blijven schemeren. */
.atn__floor.is-lit .atn__floor-shape {
  fill-opacity: .68;
  transition:
    fill-opacity .3s var(--atn-ease),
    stroke-opacity .4s var(--atn-ease);
  animation: atn-unfold .55s var(--atn-ease) both;
}
@keyframes atn-unfold {
  from { transform: scaleY(.06); }
  to   { transform: scaleY(1); }
}

/* Aanwijzen wint altijd van het spel: net steviger, met contour. */
.atn__floor.is-active .atn__floor-shape {
  fill-opacity: .85;
  stroke-opacity: 1;
  transition:
    fill-opacity .25s var(--atn-ease),
    stroke-opacity .25s var(--atn-ease);
}
.atn.is-focused .atn__floor:not(.is-active) .atn__floor-shape { fill-opacity: 0; }

/* Toetsenbord: dezelfde nadruk, plus een duidelijke ring. */
.atn__floor:focus-visible .atn__floor-shape {
  fill-opacity: .85;
  stroke: #fff;
  stroke-opacity: 1;
  stroke-width: 6;
}

/* Zonder beweging: geen spel, maar wél de kleurcodering zichtbaar. */
@media (prefers-reduced-motion: reduce) {
  .atn__floor-shape { fill-opacity: .28; animation: none !important; }
}

/* ==========================================================================
   WOORDEN — de losse kreten uit de oorspronkelijke tekening
   ========================================================================== */
/* De woorden zijn in rust weg en doen los van de etages mee in het spel:
   ze veren in vanaf hun punt en doven langzaam weer uit. */
.atn__word {
  pointer-events: none;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: var(--o, 100%) 50%;
  transition: opacity .8s ease;
}
.atn__word.is-lit {
  opacity: 1;
  transition: opacity .25s var(--atn-ease);
  animation: atn-word-in .55s cubic-bezier(.34, 1.4, .64, 1) both;
}
@keyframes atn-word-in {
  from { transform: scaleX(.55); }
  to   { transform: scaleX(1); }
}

/* Tijdens aanwijzen zakken de vlaggen weg — de aandacht ligt bij de etage. */
.atn.is-focused .atn__word { opacity: 0; }

/* De vlag gebruikt een opgelichte variant zodat ook de donkere huiskleuren
   leesbaar blijven; de etage zelf houdt de echte kleur. */
.atn__word-flag { fill: var(--flag, var(--c)); }

.atn__word-text {
  /* Zwart op lichte vlaggen (DREAM op geel), wit op donkere. */
  fill: var(--ink, #fff);
  font-family: var(--at-font-display, 'HelveticaNeue', Helvetica, Arial, sans-serif);
  font-weight: 700;
  letter-spacing: -.01em;
}

@media (prefers-reduced-motion: reduce) {
  .atn__word { animation: none !important; }
}

/* ==========================================================================
   LABEL met leader line
   ========================================================================== */
.atn__label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
}
.atn__label.is-visible { opacity: 1; }
/* Uitfaden gaat traag, in hetzelfde tempo als de etage die dooft — zo lopen
   opeenvolgende kaartjes half door elkaar heen. */
.atn__label.is-leaving {
  opacity: 0;
  transition: opacity .45s ease;
}
.atn__label.is-leaving .atn__card {
  animation: atn-card-out .45s ease both;
}

.atn__leader {
  position: absolute;
  top: 50%;
  left: 0;
  height: 0;
  width: var(--leader-len, 0px);
  transform: translateY(-50%) rotate(var(--leader-angle, 0deg));
  transform-origin: left center;
}
.atn__leader i {
  display: block;
  height: 0;
  border-top: 2px solid var(--c, var(--at-red, #e30613));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s var(--atn-ease) .04s;
}
.atn__label.is-visible .atn__leader i { transform: scaleX(1); }

/* Bolletje op het uiteinde van de lijn, in het hart van de etage. */
.atn__leader::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c, var(--at-red, #e30613));
  transform: translateY(-50%) scale(0);
  transition: transform .25s var(--atn-ease) .28s;
}
.atn__label.is-visible .atn__leader::after { transform: translateY(-50%) scale(1); }

/* Donkergrijze kaart met witte tekst — hoort bij het canvas in plaats van
   erbovenop te knallen. De kleur zit in het bolletje en de leader line. */
.atn__card {
  position: relative;
  display: block;
  min-width: 9.5rem;
  max-width: 15rem;
  padding: .6rem .85rem .65rem;
  background: var(--at-surface, #232327);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--atn-r);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
  animation: atn-card-in .45s var(--atn-ease) both;
}

/* Het etagenummer in een bolletje, half uit de kaartrand — altijd aan de
   kant van de toren (data-side wordt door tower.js gezet). */
.atn__card-badge {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  min-width: 2.1rem;
  height: 2.1rem;
  /* Ruim genoeg voor meervoudige nummers ("13–14", "8–10"). */
  padding-inline: .65rem;
  border-radius: 999px;
  background: var(--c, var(--at-red, #e30613));
  /* Donkere ring snijdt het bolletje los van kaart én achtergrond. */
  box-shadow: 0 0 0 3px var(--at-bg, #000);
  font-family: var(--at-font-display, 'HelveticaNeue', sans-serif);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: -.02em;
  white-space: nowrap;
}
/* Het bolletje steekt precies half uit de kaart. De inspringing aan die kant
   komt uit --badge-pad, die tower.js op de gemeten halve bolletjesbreedte
   zet — een vaste maat gaat mis bij "13–14" op een smal scherm. */
.atn__label[data-side='right'] .atn__card { padding-left: var(--badge-pad, 2rem); }
.atn__label[data-side='right'] .atn__card-badge {
  left: 0;
  transform: translate(-50%, -50%);
}
.atn__label[data-side='left'] .atn__card { padding-right: var(--badge-pad, 2rem); }
.atn__label[data-side='left'] .atn__card-badge {
  right: 0;
  transform: translate(50%, -50%);
}

.atn__card-body { min-width: 0; }
@keyframes atn-card-in {
  from { opacity: 0; transform: translateY(10px) scale(.95); }
  to   { opacity: 1; transform: none; }
}
@keyframes atn-card-out {
  to { opacity: 0; transform: translateY(-8px) scale(.97); }
}
@media (prefers-reduced-motion: reduce) {
  .atn__card { animation: none !important; }
}

.atn__card-title {
  display: block;
  font-family: var(--at-font-display, 'HelveticaNeue', sans-serif);
  font-size: 1.08rem;
  line-height: 1.05;
  letter-spacing: -.02em;
}
.atn__card-sub {
  display: block;
  margin-top: .18rem;
  font-size: .76rem;
  line-height: 1.3;
  color: rgba(255, 255, 255, .6);
}
.atn__card-sub:empty { display: none; }

/* Op een telefoon doet het label mee in het spel (aanwijzen gaat daar via
   de bottom sheet); de kaart wordt er alleen compacter. */
@container (max-width: 620px) {
  .atn__card {
    min-width: 7.5rem;
    max-width: 11rem;
    padding: .45rem .6rem .5rem;
  }
  .atn__card-title { font-size: .9rem; }
  .atn__card-sub   { font-size: .66rem; }
  .atn__card-badge {
    min-width: 1.7rem;
    height: 1.7rem;
    font-size: .68rem;
    box-shadow: 0 0 0 2px var(--at-bg, #000);
  }
  /* De inspringing komt uit --badge-pad; hier niet overschrijven. */
}

/* ==========================================================================
   HINT
   ========================================================================== */
/* Tekstballonnetje onder de toren, met wat lucht ertussen. */
.atn__hint {
  position: absolute;
  left: 50%;
  top: calc(100% + 1.1rem);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
  padding: .55rem .85rem;
  background: var(--at-surface, #232327);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--atn-r);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .92);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
  pointer-events: none;
  /* Zonder dit breekt de tekst: een absoluut geplaatst element krijgt vanaf
     left:50% maar de halve breedte van de figuur mee. */
  white-space: nowrap;
  transition: opacity .4s var(--atn-ease);
}
@container (max-width: 620px) {
  .atn__hint {
    font-size: .6rem;
    padding: .4rem .6rem;
    top: calc(100% + .7rem);
  }
}
/* Verdwijnt zodra iemand de toren aanwijst — en blijft daarna weg. */
.atn.is-touched .atn__hint,
.atn.is-focused .atn__hint { opacity: 0; }

.atn__hint-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--at-red, #e30613);
  animation: atn-pulse 2.4s var(--atn-ease) infinite;
}
@keyframes atn-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(1.6); }
}

/* ==========================================================================
   BOTTOM SHEET — touch
   ========================================================================== */
.atn__sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  align-items: end;
}
.atn__sheet[hidden] { display: none; }

.atn__sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .3s var(--atn-ease);
}
.atn__sheet.is-open .atn__sheet-backdrop { opacity: 1; }

.atn__sheet-panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  padding: 1.4rem 1.25rem calc(1.4rem + env(safe-area-inset-bottom));
  background: var(--at-surface, #131313);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, .6);
  transform: translateY(100%);
  transition: transform .42s var(--atn-ease);
}
.atn__sheet.is-open .atn__sheet-panel { transform: none; }

/* De inhoud komt net iets ná het paneel binnen, van onder naar boven. Het
   paneel schuift in .42s omhoog; deze trap loopt daar overheen, zodat je
   eerst het vlak ziet en dan pas leest wat erin staat. */
.atn__sheet-bar,
.atn__sheet-floor,
.atn__sheet-title,
.atn__sheet-sub,
.atn__sheet-actions {
  opacity: 0;
  transform: translateY(10px);
}
.atn__sheet.is-open .atn__sheet-bar,
.atn__sheet.is-open .atn__sheet-floor,
.atn__sheet.is-open .atn__sheet-title,
.atn__sheet.is-open .atn__sheet-sub,
.atn__sheet.is-open .atn__sheet-actions {
  opacity: 1;
  transform: none;
  transition:
    opacity .34s var(--atn-ease),
    transform .34s var(--atn-ease);
}
.atn__sheet.is-open .atn__sheet-bar     { transition-delay: .14s; }
.atn__sheet.is-open .atn__sheet-floor   { transition-delay: .18s; }
.atn__sheet.is-open .atn__sheet-title   { transition-delay: .23s; }
.atn__sheet.is-open .atn__sheet-sub     { transition-delay: .28s; }
.atn__sheet.is-open .atn__sheet-actions { transition-delay: .33s; }

/* Wie beweging heeft uitgezet krijgt het paneel zonder trap. */
@media (prefers-reduced-motion: reduce) {
  .atn__sheet-bar,
  .atn__sheet-floor,
  .atn__sheet-title,
  .atn__sheet-sub,
  .atn__sheet-actions { opacity: 1; transform: none; }
}

.atn__sheet-bar {
  display: block;
  width: 46px;
  height: 4px;
  border-radius: 999px;
  background: var(--c, #fff);
  margin-bottom: 1rem;
}

.atn__sheet-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
}
.atn__sheet-close svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
}

.atn__sheet-floor {
  margin: 0;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c, var(--atn-ink-3));
}
.atn__sheet-title {
  margin: .3rem 0 0;
  font-family: var(--at-font-display, 'HelveticaNeue', sans-serif);
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: -.03em;
}
.atn__sheet-sub {
  margin: .45rem 0 0;
  font-size: .92rem;
  color: var(--atn-ink-2);
}
.atn__sheet-sub:empty { display: none; }

.atn__sheet-actions {
  display: grid;
  gap: .5rem;
  margin-top: 1.25rem;
}

.atn__sheet-cta,
.atn__sheet-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .95rem 1.15rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: var(--atn-r);
}
.atn__sheet-cta {
  color: #000;
  background: var(--c, #fff);
}
.atn__sheet-more {
  color: var(--atn-ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.atn__sheet-more[hidden] { display: none; }