/* Laserstrahlen aus den Augen auf den Knopf "Mehr über mich".
   Die Ebene liegt ÜBER dem Foto, damit die Strahlen wirklich aus den Augen kommen. */
.rw-about-band { position: relative; overflow: hidden; }

.rw-laser-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.rw-about-grid { position: relative; z-index: 2; }

/* Strahl in drei Lagen: weiter Schein, kräftiger Mantel, weißer Kern. */
.rw-laser-bloom {
  fill: none;
  stroke: #b7ef4f;
  stroke-width: 16;
  stroke-linecap: round;
  opacity: 0;
  filter: url(#rw-laser-bloom);
}

.rw-laser-beam {
  fill: none;
  stroke: #d6f58a;
  stroke-width: 6;
  stroke-linecap: round;
  opacity: 0;
  filter: drop-shadow(0 0 10px rgba(214, 245, 138, .95));
}

.rw-laser-beam-core {
  stroke: #ffffff;
  stroke-width: 2.2;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, .9));
}

.rw-laser-eye {
  fill: #ffffff;
  opacity: 0;
  filter: drop-shadow(0 0 10px rgba(214, 245, 138, 1)) drop-shadow(0 0 22px rgba(183, 239, 79, .9));
}

.rw-laser-eye-halo {
  fill: none;
  stroke: #d6f58a;
  stroke-width: 2;
  opacity: 0;
}

.rw-laser-hit {
  fill: none;
  stroke: #eaffb0;
  stroke-width: 2.5;
  opacity: 0;
}

.rw-laser-spark {
  fill: #eaffb0;
  opacity: 0;
}

.rw-laser-flare {
  fill: url(#rw-laser-flare);
  opacity: 0;
}

/* Querschläger: vom Knopf abprallende Strahlen */
.rw-laser-rico {
  fill: none;
  stroke: #d6f58a;
  stroke-width: 4;
  stroke-linecap: round;
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(214, 245, 138, .95));
}

.rw-laser-rico-core {
  stroke: #ffffff;
  stroke-width: 1.6;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, .9));
}

/* Der Knopf reagiert auf den Laser in drei Stufen:
   Treffer (Blitz und Rütteln), Bestrahlung (glüht, Energiestreifen, Flackern)
   und danach geladen (wechselt zu Leuchtschrift auf Dunkel und pulst). */
:root .rework-page .rw-about-grid .rw-button-lime {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background-color .45s ease, border-color .45s ease, box-shadow .45s ease, transform .3s ease;
}

:root .rework-page .rw-about-grid .rw-button-lime::before,
:root .rework-page .rw-about-grid .rw-button-lime::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1;
}

/* Energiestreifen, die während der Bestrahlung durchlaufen */
:root .rework-page .rw-about-grid .rw-button-lime::before {
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0) 0 9px, rgba(255, 255, 255, .7) 9px 13px, rgba(255, 255, 255, 0) 13px 22px);
  background-size: 220% 100%;
}

/* Lichtkante, die über den geladenen Knopf wandert */
:root .rework-page .rw-about-grid .rw-button-lime::after {
  background: linear-gradient(100deg, transparent 25%, rgba(234, 255, 176, .55) 48%, rgba(255, 255, 255, .85) 50%, rgba(234, 255, 176, .55) 52%, transparent 75%);
  transform: translateX(-130%);
  z-index: 0;
}

:root .rework-page .rw-about-grid .rw-button-lime > span { display: inline-block; position: relative; z-index: 1; }

/* Stufe 1: Treffer */
:root .rework-page .rw-about-grid .rw-button-lime.is-hit {
  animation: rw-button-impact .6s cubic-bezier(.3, 0, .2, 1) both;
}

@keyframes rw-button-impact {
  0% { transform: scale(1); background-color: #d6f58a; box-shadow: 0 0 0 0 rgba(234, 255, 176, 0); }
  10% { transform: scale(1.14); background-color: #ffffff; border-color: #ffffff; box-shadow: 0 0 60px 22px rgba(234, 255, 176, .95); }
  24% { transform: scale(1.06) translate(-4px, 2px) rotate(-1.2deg); }
  38% { transform: scale(1.05) translate(4px, -2px) rotate(1.2deg); }
  52% { transform: scale(1.03) translate(-3px, 1px) rotate(-.6deg); }
  68% { transform: scale(1.02) translate(2px, 0); }
  100% { transform: scale(1.02); background-color: #f2ffcf; box-shadow: 0 0 40px 12px rgba(214, 245, 138, .75); }
}

/* Stufe 2: Bestrahlung */
:root .rework-page .rw-about-grid .rw-button-lime.is-irradiated {
  background-color: #f2ffcf;
  border-color: #ffffff;
  box-shadow: 0 0 42px 14px rgba(214, 245, 138, .8), 0 0 0 2px rgba(255, 255, 255, .7) inset;
  animation: rw-button-heat .14s steps(2, end) infinite, rw-button-buzz .09s linear infinite alternate;
}

:root .rework-page .rw-about-grid .rw-button-lime.is-irradiated::before {
  opacity: .85;
  animation: rw-button-stripes .5s linear infinite;
}

:root .rework-page .rw-about-grid .rw-button-lime.is-irradiated > span { animation: rw-button-arrow-jitter .12s linear infinite alternate; }

@keyframes rw-button-heat {
  0% { background-color: #f2ffcf; }
  50% { background-color: #ffffff; }
  100% { background-color: #e6ffa8; }
}

@keyframes rw-button-buzz {
  0% { transform: scale(1.03) translate(-.8px, .4px); }
  100% { transform: scale(1.03) translate(.8px, -.4px); }
}

@keyframes rw-button-stripes {
  0% { background-position: 0 0; }
  100% { background-position: -120px 0; }
}

@keyframes rw-button-arrow-jitter {
  0% { transform: translate(0, 0); }
  100% { transform: translate(2px, -2px); }
}

/* Stufe 3: geladen, mit Farbwechsel zu Leuchtschrift auf Dunkel */
:root .rework-page .rw-about-grid .rw-button-lime.is-charged {
  background-color: #0f2a21;
  border-color: #d6f58a;
  color: #d6f58a !important;
  text-shadow: 0 0 10px rgba(214, 245, 138, .85);
  box-shadow: 0 0 0 1px #d6f58a inset, 0 0 26px 6px rgba(214, 245, 138, .5);
  animation: rw-button-pulse 2.6s ease-in-out infinite;
}

:root .rework-page .rw-about-grid .rw-button-lime.is-charged::after {
  opacity: 1;
  animation: rw-button-sweep 3.2s cubic-bezier(.4, 0, .2, 1) infinite;
}

:root .rework-page .rw-about-grid .rw-button-lime.is-charged > span {
  animation: rw-button-arrow 2.2s ease-in-out infinite;
}

:root .rework-page .rw-about-grid .rw-button-lime.is-charged:hover {
  background-color: #d6f58a;
  color: #183c32 !important;
  text-shadow: none;
}

@keyframes rw-button-pulse {
  0%, 100% { box-shadow: 0 0 0 1px #d6f58a inset, 0 0 20px 4px rgba(214, 245, 138, .38); }
  50% { box-shadow: 0 0 0 1px #eaffb0 inset, 0 0 38px 12px rgba(214, 245, 138, .7); }
}

@keyframes rw-button-sweep {
  0%, 55% { transform: translateX(-130%); }
  85%, 100% { transform: translateX(130%); }
}

@keyframes rw-button-arrow {
  0%, 100% { transform: translate(0, 0); }
  35% { transform: translate(5px, -5px); }
  65% { transform: translate(0, 0); }
}

@media (max-width: 920px) {
  .rw-laser-layer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rw-laser-layer { display: none; }
  :root .rework-page .rw-about-grid .rw-button-lime,
  :root .rework-page .rw-about-grid .rw-button-lime::before,
  :root .rework-page .rw-about-grid .rw-button-lime::after,
  :root .rework-page .rw-about-grid .rw-button-lime > span { animation: none !important; }
}