/* De testtelefoon (testtelefoon.js): titel, statusregel, balk en lichtgloed
   bovenop het toestel van telefoon.css. */
.testtelefoon { --tt-gloed: transparent; }
.testtelefoon::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  box-shadow: inset 0 0 90px 10px var(--tt-gloed);
  transition: box-shadow .8s;
}
/* afstemmen: geen groene waas (Jeroen, 25-09) */
.testtelefoon[data-licht="zoeken"]::after { animation: tt-puls 1.1s ease-in-out infinite; }
.testtelefoon[data-licht="verbonden"] { --tt-gloed: rgba(255, 200, 20, .45); }
.testtelefoon[data-licht="einde"]::after { animation: tt-flikker .18s 14; }
.testtelefoon[data-licht="mislukt"] { --tt-gloed: rgba(200, 30, 10, .45); }
@keyframes tt-puls { 50% { box-shadow: inset 0 0 140px 30px rgba(90, 255, 60, .55); } }
@keyframes tt-flikker { 50% { box-shadow: inset 0 0 120px 20px rgba(255, 210, 30, .6); } }

.tt-titel {
  position: absolute; left: 8%; right: 8%; top: 4%; z-index: 6;
  text-align: center; pointer-events: none;
  font: 500 clamp(18px, 4.2vmin, 30px)/1.1 "Oswald", system-ui, sans-serif;
  letter-spacing: .06em; text-transform: uppercase; color: #eacea6;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .8);
}
.testtelefoon[data-stand="opgenomen"] .tt-titel { opacity: 0; transition: opacity .4s; }

.tt-onder {
  position: absolute; left: 7%; right: 7%; bottom: 3.5%; z-index: 6;
  pointer-events: none;
}
.tt-status {
  min-height: 1.4em; margin-bottom: .5em; text-align: center;
  font: 500 15px/1.35 "Oswald", system-ui, sans-serif; letter-spacing: .03em;
  color: #eacea6; text-shadow: 0 1px 6px #000;
}
.tt-status[data-soort="fout"] { color: #ff6a55; }
.tt-balk {
  position: relative; height: 22px; border-radius: 11px; overflow: hidden;
  background: rgba(10, 12, 10, .75); border: 1px solid rgba(234, 206, 166, .35);
}
.tt-vol {
  height: 100%; width: 0; transition: width .15s linear;
  background: linear-gradient(90deg, #1f7a18, #7dff5a);
}
.tt-vol.klaar { background: linear-gradient(90deg, #7dff5a, #ffd21a); }
.tt-telling {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 600 12px ui-monospace, monospace; color: #fff; text-shadow: 0 0 4px #000;
}
.tt-zonder-balk .tt-balk { display: none; }

/* staalpaneel: geen balk (de buis is de meter), status onderin klein */
.tt-paneel .tt-onder { bottom: 1.5%; }
.tt-paneel .tt-status { font-size: 13px; }


/* de close-up als inzet over het staalpaneel: midden, zachte randen zonder kader,
   de buis en de stappen blijven eromheen in beeld */
.tt-inzet {
  position: absolute; z-index: 5; overflow: hidden;
  border: 0; border-radius: 0; box-shadow: none;
  /* zachte close-up: een vaag ovaal dat overvloeit in het paneel, geen kader */
  -webkit-mask-image: radial-gradient(ellipse 64% 62% at 50% 50%, #000 72%, rgba(0,0,0,.55) 88%, transparent 100%);
  mask-image: radial-gradient(ellipse 64% 62% at 50% 50%, #000 72%, rgba(0,0,0,.55) 88%, transparent 100%);
  opacity: 0; transform: scale(.96); pointer-events: none;
  transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
}
/* dicht: ook de kinderen niet klikbaar (de kaders van telefoon.js zetten
   zelf pointer-events: auto, en vingen zo de klik op de paneelhoorn af) */
.tt-inzet:not(.open) { visibility: hidden; transition: opacity .5s, transform .6s, visibility 0s .6s; }
.tt-inzet:not(.open) * { pointer-events: none !important; }
.tt-inzet.open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
.tt-inzet > .toestel {
  position: absolute; inset: 0; width: 100%; height: 100%;
  aspect-ratio: auto; border-radius: 0; box-shadow: none;
}

/* het verbindingsmoment (zoeken): omgevingslicht in alle kleuren rond het
   paneel, alleen terwijl de verbinding met jezelf wordt gemaakt */
.testtelefoon::before {
  content: ""; position: absolute; inset: -20%; z-index: 0; pointer-events: none; opacity: 0;
  background:
    radial-gradient(35% 30% at 20% 25%, #ff2a6d 0, transparent 70%),
    radial-gradient(30% 35% at 80% 20%, #05d9e8 0, transparent 70%),
    radial-gradient(35% 30% at 75% 80%, #7dff5a 0, transparent 70%),
    radial-gradient(30% 35% at 25% 75%, #ffd21a 0, transparent 70%),
    radial-gradient(40% 40% at 50% 50%, #9b5de5 0, transparent 70%);
  filter: blur(40px) saturate(1.6);
  transition: opacity .8s;
}
.testtelefoon[data-licht="zoeken"]::before { opacity: .9; animation: tt-dimensie 3.2s linear infinite; }
@keyframes tt-dimensie {
  0% { transform: rotate(0deg) scale(1); filter: blur(40px) saturate(1.6) hue-rotate(0deg); }
  50% { transform: rotate(180deg) scale(1.15); filter: blur(46px) saturate(1.9) hue-rotate(180deg); }
  100% { transform: rotate(360deg) scale(1); filter: blur(40px) saturate(1.6) hue-rotate(360deg); }
}
.testtelefoon > .pn-plaat { z-index: 1; }
.testtelefoon[data-licht="zoeken"] .tt-inzet { animation: tt-inzetkleur 2.2s linear infinite; }
@keyframes tt-inzetkleur { 0% { filter: none; } 20% { filter: hue-rotate(90deg) saturate(1.5); }
  40% { filter: blur(1px) hue-rotate(200deg); } 60% { filter: brightness(1.3) hue-rotate(280deg); } 100% { filter: none; } }

/* staalpaneel: alle effecten binnen het paneel, niets erbuiten (Jeroen, 25-09) */
.tt-paneel::before, .tt-paneel::after { display: none; }
.tt-paneel .pn-plaat { overflow: visible; }
.tt-paneel .tt-inzet { overflow: hidden; }
.tt-paneel .pn-plaat::after {
  content: ""; position: absolute; inset: 0; z-index: 7; pointer-events: none;
  box-shadow: inset 0 0 90px 10px var(--tt-gloed); transition: box-shadow .8s;
}
.tt-paneel[data-licht="einde"] .pn-plaat::after { animation: tt-flikker .18s 14; }

/* het kleurenlicht zit in een eigen laag die het paneel afknipt; de hoorn
   mag wel buiten het paneel steken */
.tt-effect { position: absolute; inset: 0; overflow: hidden; z-index: 6; pointer-events: none; }
.tt-effect::before {
  content: ""; position: absolute; inset: -25%; opacity: 0;
  background:
    radial-gradient(35% 30% at 20% 25%, #ff2a6d 0, transparent 70%),
    radial-gradient(30% 35% at 80% 20%, #05d9e8 0, transparent 70%),
    radial-gradient(35% 30% at 75% 80%, #7dff5a 0, transparent 70%),
    radial-gradient(30% 35% at 25% 75%, #ffd21a 0, transparent 70%),
    radial-gradient(40% 40% at 50% 50%, #9b5de5 0, transparent 70%);
  filter: blur(30px) saturate(1.6);
  mix-blend-mode: screen;
  transition: opacity .8s;
}
.tt-paneel[data-licht="zoeken"] .tt-effect::before { opacity: .55; animation: tt-dimensie 3.2s linear infinite; }

/* de losse hoorn van de close-up: bovenop, in zijn geheel, zonder zacht kader */
.tt-hoornlaag { position: absolute; z-index: 8; pointer-events: none; }
.tt-hoornlaag > .kader { position: absolute; inset: 0; pointer-events: none !important; }
.tt-hoornlaag .laag.hoorn { position: absolute; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .7)); }

/* schaduw achter de vage inzet */
.tt-inzet-schaduw {
  position: absolute; z-index: 4; pointer-events: none; opacity: 0;
  /* groter dan de zichtbare ovaal van de inzet (64% 62%), anders valt hij er helemaal onder */
  background: radial-gradient(ellipse 72% 70% at 50% 54%, rgba(0,0,0,.92) 55%, rgba(0,0,0,.6) 75%, transparent 100%);
  filter: blur(22px); transform: scale(1.1) translateY(4%);
  transition: opacity .6s;
}
.tt-inzet.open ~ .tt-inzet-schaduw, .tt-inzet-schaduw:has(+ .tt-inzet.open) { opacity: 1; }