/* ekin-art.com — light/dark switch shared by the site and the admin panel.
   The control is a pendant lamp. Turning it off pulls the page's light back into the bulb;
   turning it on lets the light spill out of it again. */

.lamp {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: inherit; cursor: pointer;
  transition: background-color 180ms, transform 110ms cubic-bezier(0.16, 1, 0.3, 1);
}
.lamp:hover { background: color-mix(in srgb, currentColor 7%, transparent); }
.lamp:active { transform: scale(0.94); }
.lamp svg { width: 30px; height: 30px; overflow: visible; }
.lamp__swing { transform-box: view-box; transform-origin: 16px -3px; }
.lamp__cord { stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; opacity: 0.5; }
.lamp__cap, .lamp__shade { fill: currentColor; }
.lamp__rim { stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.lamp__chain { fill: currentColor; stroke: currentColor; stroke-width: 0.9; stroke-linecap: round; opacity: 0.75; transform-box: view-box; }
.lamp__chain circle { stroke: none; }
.lamp__bulb { fill: #fff; stroke: currentColor; stroke-width: 1.1; stroke-opacity: 0; transition: fill 260ms, stroke-opacity 260ms; }
.lamp__cone, .lamp__glow { opacity: 1; transition: opacity 360ms cubic-bezier(0.16, 1, 0.3, 1); }

/* Lights off: no cone, no glow, the bulb is a cold outline. */
:root[data-theme="dark"] .lamp__cone, :root[data-theme="dark"] .lamp__glow { opacity: 0; }
:root[data-theme="dark"] .lamp__bulb { fill: transparent; stroke-opacity: 1; }

/* Pulling the chain: it tugs down, the lamp swings and settles. */
.lamp.is-pulled .lamp__chain { animation: lamp-tug 420ms cubic-bezier(0.3, 0.7, 0.4, 1); }
.lamp.is-pulled .lamp__swing { animation: lamp-swing 1100ms cubic-bezier(0.25, 0.8, 0.3, 1); }
@keyframes lamp-tug { 0% { transform: translateY(0); } 35% { transform: translateY(3px); } 100% { transform: translateY(0); } }
@keyframes lamp-swing {
  0% { transform: rotate(0); }
  16% { transform: rotate(9deg); }
  38% { transform: rotate(-5.5deg); }
  58% { transform: rotate(3deg); }
  78% { transform: rotate(-1.1deg); }
  100% { transform: rotate(0); }
}
/* Switching on, the bulb catches with a short flicker before it holds. */
.lamp.is-lighting .lamp__glow, .lamp.is-lighting .lamp__cone { animation: lamp-flicker 460ms linear; }
@keyframes lamp-flicker {
  0% { opacity: 0.15; }
  16% { opacity: 1; }
  28% { opacity: 0.3; }
  44% { opacity: 1; }
  56% { opacity: 0.65; }
  100% { opacity: 1; }
}

/* Theme change through a view transition: script animates the clip from the bulb.
   While it runs, nothing else may capture its own layer, or it would escape the clip. */
:root[data-vt] *, :root[data-vt] *::before, :root[data-vt] *::after { view-transition-name: none !important; }
:root[data-vt]::view-transition-old(root),
:root[data-vt]::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
/* During the switch every colour lands at once, so the snapshots never catch a half-faded state. */
:root.theme-switching *, :root.theme-switching *::before, :root.theme-switching *::after { transition: none !important; }
:root[data-vt="off"]::view-transition-old(root) { z-index: 2; }
:root[data-vt="off"]::view-transition-new(root) { z-index: 1; }

/* Browsers without view transitions: colours fade instead. */
:root.theme-fading, :root.theme-fading body, :root.theme-fading * {
  transition: background-color 420ms ease, color 420ms ease, border-color 420ms ease, box-shadow 420ms ease !important;
}

@media (prefers-reduced-motion: reduce) {
  .lamp.is-pulled .lamp__swing, .lamp.is-pulled .lamp__chain, .lamp.is-lighting .lamp__glow, .lamp.is-lighting .lamp__cone { animation: none; }
}

/* ---- Tooltips for icon-only controls. Hover devices only; touch has no hover to explain. */

@media (hover: hover) and (pointer: fine) {
  [data-tip]::after {
    content: attr(data-tip);
    position: absolute; left: 50%; top: calc(100% + 10px); z-index: 80;
    padding: 6px 10px; border-radius: 9px; white-space: nowrap; pointer-events: none;
    font: 500 12.5px/1.2 var(--font, system-ui, sans-serif); letter-spacing: 0.01em; text-transform: none;
    color: var(--tip-ink, #fff); background: var(--tip-bg, rgba(28, 32, 40, 0.92));
    box-shadow: 0 6px 18px -6px rgba(10, 14, 24, 0.45);
    opacity: 0; transform: translate(-50%, -4px) scale(0.96); transform-origin: 50% 0;
    transition: opacity 140ms ease, transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  [data-tip-pos="top"]::after { top: auto; bottom: calc(100% + 10px); transform: translate(-50%, 4px) scale(0.96); transform-origin: 50% 100%; }
  [data-tip-pos="left"]::after { left: auto; right: 0; transform: translate(0, -4px) scale(0.96); transform-origin: 100% 0; }
  [data-tip]:hover::after, [data-tip]:focus-visible::after {
    opacity: 1; transform: translate(-50%, 0) scale(1); transition-delay: 380ms;
  }
  [data-tip-pos="left"]:hover::after, [data-tip-pos="left"]:focus-visible::after { transform: translate(0, 0) scale(1); }
  [data-tip]:active::after { opacity: 0; transition-delay: 0ms; }
}
:root[data-theme="dark"] { --tip-bg: rgba(236, 239, 244, 0.95); --tip-ink: #14171d; }