/* ===========================================================================
   Get Responsive — Effects: shadows, the light-beam, dot-grid texture, motion
   Three signature shapes carry the brand even without a logo:
     · de lichtbundel (the beam)   — a yellow wedge that "switches the light on"
     · de hexagon                  — structure: section numbers, badges, frames
     · het stippenraster (dot grid)— subtle gold-on-black texture
   =========================================================================== */
:root {
  /* ---- Shadows ---- */
  --shadow-btn:        0 6px 0 var(--gr-yellow-deep);   /* pressed-yellow primary */
  --shadow-btn-hover:  0 8px 0 var(--gr-yellow-deep);
  --shadow-card:       0 1px 0 rgba(0,0,0,.02);         /* cards lean on borders, not shadow */
  --shadow-bulb:       0 24px 50px rgba(0,0,0,.5);      /* floating mascot drop shadow */
  --shadow-bulb-sm:    0 12px 26px rgba(0,0,0,.5);
  --shadow-lift:       0 18px 40px rgba(0,0,0,.18);     /* light-surface float */

  /* ---- The beam (conic wedge of light) ---- */
  --beam-conic: conic-gradient(from 90deg at 88% 38%,
      rgba(253,242,4,0) 0deg,
      rgba(253,242,4,.92) 6deg,
      rgba(250,217,60,.28) 24deg,
      rgba(253,242,4,0) 40deg); /* @kind other */

  /* ---- Lamp glow & filament gradient ---- */
  --glow-radial: radial-gradient(circle at 50% 44%, rgba(253,242,4,.30), transparent 56%); /* @kind other */
  --filament-grad: radial-gradient(circle at 38% 32%, #fff 4%, var(--gr-gold) 40%, var(--gr-amber) 100%); /* @kind other */

  /* ---- Dot-grid texture (gold on dark) ---- */
  --dotgrid: radial-gradient(var(--gr-gold) 2px, transparent 2.5px); /* @kind other */
  --dotgrid-size: 22px 22px;

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(.22,.61,.36,1); /* @kind other */
  --dur-fast:   .15s; /* @kind other */
  --dur-base:   .25s; /* @kind other */
  --dur-slow:   .7s; /* @kind other */
}

/* ---------------------------------------------------------------------------
   Reusable utility classes for the signature devices
   --------------------------------------------------------------------------- */

/* The yellow light-beam wedge — point it at a headline or the mascot.
   Place inside a position:relative parent. */
.gr-beam {
  position: absolute;
  top: 50%; right: 18%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-top: 42px solid transparent;
  border-bottom: 42px solid transparent;
  border-left: 150px solid var(--gr-yellow);
  pointer-events: none;
}

/* Soft glow puddle behind a floating mascot */
.gr-glow {
  position: absolute; inset: 0;
  background: var(--glow-radial);
  pointer-events: none;
}

/* Dot-grid texture overlay */
.gr-dotgrid {
  position: absolute; inset: 0;
  background-image: var(--dotgrid);
  background-size: var(--dotgrid-size);
  opacity: .6;
  pointer-events: none;
}

/* Hexagon — structure device (section numbers, badges, photo frames) */
.gr-hex {
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--gr-yellow);
  color: var(--gr-black);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
}

/* Gentle float for the signature lampje */
@keyframes gr-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.gr-float { animation: gr-float 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .gr-float { animation: none; } }