/* Stekker erin: een koppeling werkt weer. */

.celebration[data-mode="plug-off"] { --c1: #020617; --c2: #1e293b; --c3: #94a3b8; --glow: rgb(100 116 139 / .5); }
.celebration[data-mode="plug-on"] { --c1: #422006; --c2: #f59e0b; --c3: #fef08a; --glow: rgb(250 204 21 / .9); }

.cel-plug-scene { position: absolute; inset: 0; --sx: 22vw; --sy: 62vh; }
.cel-plug-scene.is-multi { --sx: 19vw; --sy: 79vh; }

.cel-plug-room {
  position: absolute; inset: -4vh;
  background:
    repeating-linear-gradient(0deg, rgb(255 255 255 / .03) 0 .3vh, transparent .3vh 6vh),
    repeating-linear-gradient(90deg, rgb(255 255 255 / .03) 0 .3vh, transparent .3vh 12vh),
    linear-gradient(180deg, #0f172a, #020617);
  transition: filter 1s;
}
.cel-plug-scene.is-lit .cel-plug-room { filter: brightness(1.8) sepia(.5) saturate(1.6); }
.cel-plug-light {
  position: absolute; inset: 0; opacity: 0; transition: opacity .6s;
  background: radial-gradient(circle at 62vw 34vh, rgb(254 240 138 / .5), rgb(250 204 21 / .15) 35%, transparent 65%);
}
.cel-plug-scene.is-multi .cel-plug-light { background: radial-gradient(ellipse at 70vw 50vh, rgb(254 240 138 / .4), rgb(250 204 21 / .12) 45%, transparent 75%); }
.cel-plug-scene.is-lit .cel-plug-light { opacity: 1; }

.cel-plug-wire { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cel-plug-wire path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cel-plug-wire-base { stroke: #334155; stroke-width: 1.3vh; }
.cel-plug-wire-flow { stroke: #fde047; stroke-width: .7vh; opacity: 0; filter: drop-shadow(0 0 .8vh #facc15) drop-shadow(0 0 2vh #f59e0b); }
.cel-plug-wire.is-live .cel-plug-wire-flow { opacity: 1; }
.cel-plug-wire-flow.is-flowing { stroke-dasharray: 2vh 2vh; animation: cel-plug-flow .5s linear infinite; }
@keyframes cel-plug-flow { to { stroke-dashoffset: -4vh; } }

.cel-plug-bulb {
  position: absolute; left: 62vw; top: 0; width: 28vh; margin-left: -14vh; transform-origin: 50% 0;
  animation: cel-plug-swing 2.4s ease-in-out infinite;
}
.cel-plug-scene.is-multi .cel-plug-bulb { display: none; }
@keyframes cel-plug-swing { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }
.cel-plug-cord { width: 1vh; height: 12vh; margin: 0 auto; background: #334155; }
.cel-plug-bulb svg { display: block; width: 28vh; height: 42vh; position: relative; }
.cel-plug-glass { fill: rgb(148 163 184 / .25); stroke: rgb(203 213 225 / .55); stroke-width: 2; }
.cel-plug-filament { fill: none; stroke: #64748b; stroke-width: 2.4; stroke-linejoin: round; }
.cel-plug-bulb.is-on .cel-plug-glass { fill: url(#cel-plug-lit); stroke: #fef9c3; }
.cel-plug-bulb.is-on .cel-plug-filament { stroke: #fff; filter: drop-shadow(0 0 3px #fff); }
.cel-plug-bulb.is-on svg { filter: drop-shadow(0 0 3vh #fde047) drop-shadow(0 0 8vh #f59e0b); }
.cel-plug-halo {
  position: absolute; left: 50%; top: 38vh; width: 90vh; height: 90vh; translate: -50% -50%; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgb(254 249 195 / .7), rgb(250 204 21 / .25) 35%, transparent 65%);
}
.cel-plug-bulb.is-on .cel-plug-halo { opacity: 1; animation: cel-plug-breathe 1.4s ease-in-out infinite; }
@keyframes cel-plug-breathe { 50% { scale: 1.12; opacity: .8; } }

.cel-plug-socket { position: absolute; left: var(--sx); top: var(--sy); width: 0; height: 0; }
.cel-plug-plate {
  position: absolute; left: -12vh; top: -12vh; width: 24vh; height: 24vh; border-radius: 3.6vh;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #f8fafc, #cbd5e1); box-shadow: 0 1.5vh 3vh rgb(0 0 0 / .6), inset 0 -.6vh 0 rgb(0 0 0 / .15);
}
.cel-plug-hole {
  position: relative; width: 16vh; height: 16vh; border-radius: 50%; display: flex; align-items: center; justify-content: center; gap: 4vh;
  background: radial-gradient(circle at 50% 40%, #e2e8f0, #94a3b8); box-shadow: inset 0 1vh 1.6vh rgb(0 0 0 / .35);
}
.cel-plug-hole i { width: 2.2vh; height: 2.2vh; border-radius: 50%; background: #0f172a; }
.cel-plug-status {
  position: absolute; left: 0; top: -20vh; translate: -50% 0; display: flex; align-items: center; gap: 1.2vh; white-space: nowrap;
  padding: .8vh 2vh; border-radius: 99px; background: rgb(0 0 0 / .6); border: .3vh solid #ef4444;
  font-size: 2.6vh; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fecaca;
}
.cel-plug-led { width: 2vh; height: 2vh; border-radius: 50%; background: #ef4444; box-shadow: 0 0 2vh #ef4444; animation: cel-plug-blink .5s steps(2) infinite; }
@keyframes cel-plug-blink { 50% { opacity: .2; } }
.cel-plug-socket.is-connected .cel-plug-status { border-color: #4ade80; color: #bbf7d0; }
.cel-plug-socket.is-connected .cel-plug-led { background: #4ade80; box-shadow: 0 0 2.4vh #4ade80; animation: none; }

.cel-plug-plug { position: absolute; left: calc(var(--sx) - 20vh); top: calc(var(--sy) - 6.5vh); width: 15vh; height: 13vh; visibility: hidden; z-index: 2; }
.cel-plug-cable {
  position: absolute; right: 90%; top: 50%; width: 110vw; height: 3vh; margin-top: -1.5vh; border-radius: 1.5vh;
  background: linear-gradient(180deg, #475569, #0f172a);
}
.cel-plug-body {
  position: absolute; inset: 0; border-radius: 2vh 4vh 4vh 2vh; display: flex; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(90deg, transparent 0 1.6vh, rgb(0 0 0 / .18) 1.6vh 2.2vh) 0 0 / 50% 100% no-repeat,
    linear-gradient(180deg, #ff9a3c, #ff7800 45%, #9a3412);
  box-shadow: 0 1.2vh 2vh rgb(0 0 0 / .5), inset 0 .6vh 0 rgb(255 255 255 / .35);
}
.cel-plug-logo { margin-left: 5vh; font-family: var(--font-brand); font-size: 3.4vh; color: #fff; text-shadow: 0 .3vh 0 #7c2d12; }
.cel-plug-pins { position: absolute; left: 100%; top: 0; bottom: 0; width: 5.5vh; transform-origin: 0 50%; }
.cel-plug-pins i {
  position: absolute; left: 0; width: 100%; height: 1.9vh; border-radius: 0 .95vh .95vh 0;
  background: linear-gradient(180deg, #f1f5f9, #94a3b8 60%, #64748b);
}
.cel-plug-pins i:first-child { top: 2.8vh; }
.cel-plug-pins i:last-child { bottom: 2.8vh; }

.cel-plug-text {
  position: absolute; left: 36vw; width: 52vw; top: 57vh; display: flex; flex-direction: column; align-items: center; text-align: center; visibility: hidden;
}
.cel-plug-kicker { font-size: 3vh; font-weight: 700; letter-spacing: .4em; text-transform: uppercase; color: #fde68a; opacity: 0; }
.cel-plug-count { display: none; }
.cel-plug-what { margin-top: 1vh; font-size: 6.4vh; font-weight: 700; line-height: 1.1; color: #fff; opacity: 0; text-shadow: 0 .4vh 0 rgb(0 0 0 / .5), 0 0 3vh rgb(250 204 21 / .5); }
.cel-plug-title {
  margin-top: 1vh; font-family: var(--font-brand); font-size: 14vh; line-height: 1; color: #fef08a; opacity: 0;
  text-shadow: 0 0 1vh #fff, 0 0 3vh #facc15, 0 0 7vh #f59e0b;
}
.cel-plug-title.is-buzzing { animation: cel-plug-neon 2.2s steps(1) infinite; }
@keyframes cel-plug-neon { 0%, 100% { opacity: 1; } 47% { opacity: 1; } 48% { opacity: .55; } 50% { opacity: 1; } 52% { opacity: .7; } 53% { opacity: 1; } }

.cel-plug-scene.is-multi .cel-plug-text { left: 3vw; width: 36vw; top: 6vh; }
.cel-plug-scene.is-multi .cel-plug-kicker, .cel-plug-scene.is-multi .cel-plug-what { opacity: 1; }
.cel-plug-scene.is-multi .cel-plug-count {
  display: block; margin-top: 1vh; font-size: 17vh; font-weight: 700; line-height: 1; color: #fff; font-variant-numeric: tabular-nums;
  text-shadow: 0 .6vh 0 #92400e, 0 0 4vh rgb(250 204 21 / .7);
}
.cel-plug-scene.is-multi .cel-plug-what { margin-top: 0; font-size: 5vh; }
.cel-plug-scene.is-multi .cel-plug-title { font-size: 10vh; }

.cel-plug-grid {
  position: absolute; left: 44vw; right: 3vw; top: 12vh; bottom: 8vh;
  display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); grid-auto-rows: 1fr; gap: 2vh; align-content: center;
}
.cel-plug-scene.is-single .cel-plug-grid { display: none; }
.cel-plug-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6vh; min-height: 0; padding: 1.4vh 1vh; text-align: center;
  border-radius: 1.6vh; background: rgb(15 23 42 / .85); border: .3vh solid #334155; transition: border-color .2s, box-shadow .2s, background .2s;
}
.cel-plug-mini {
  width: 6vh; height: 6vh; border-radius: 50% 50% 45% 45%; margin-bottom: .6vh;
  background: rgb(148 163 184 / .3); box-shadow: inset 0 0 0 .3vh rgb(203 213 225 / .4);
  transition: background .2s, box-shadow .2s;
}
.cel-plug-tile-type { font-size: 2.2vh; font-weight: 700; line-height: 1.15; color: #cbd5e1; }
.cel-plug-tile-account { font-size: 2vh; color: #94a3b8; overflow-wrap: anywhere; }
.cel-plug-more-count { font-size: 6vh; font-weight: 700; line-height: 1; color: #94a3b8; }
.cel-plug-tile.is-on { border-color: #facc15; background: rgb(66 32 6 / .85); box-shadow: 0 0 3vh rgb(250 204 21 / .5); }
.cel-plug-tile.is-on .cel-plug-mini { background: radial-gradient(circle at 50% 60%, #fff, #fef08a 40%, #facc15); box-shadow: 0 0 3vh #fde047, 0 0 6vh #f59e0b; }
.cel-plug-tile.is-on .cel-plug-tile-type { color: #fff; }
.cel-plug-tile.is-on .cel-plug-tile-account { color: #fde68a; }
.cel-plug-tile.is-on .cel-plug-more-count { color: #fde047; }

.cel-plug-note {
  margin-top: 2vh; display: inline-block; padding: 1vh 2.6vh; border-radius: 999px; opacity: 0;
  font-size: 3vh; font-weight: 700; color: #1c1917; background: #fde68a; box-shadow: 0 0 3vh rgb(250 204 21 / .6);
  animation: cel-plug-note-in .5s cubic-bezier(.3,1.5,.5,1) 5.2s forwards;
}
@keyframes cel-plug-note-in { from { opacity: 0; transform: translateY(2vh) scale(.8); } to { opacity: 1; transform: none; } }