/* Themed cursor (style.cursor → html[data-cursor], docs/12, R41 / R44 / R45). Loaded by the engine only when a cursor is chosen.
   Registry, one line per cursor (no html prefix: the editor's cursor tiles carry data-cursor too):
   --et-cursor        url(<32×32 picture>) <hotspot x> <hotspot y>;
   --et-cursor-press  click animation: spring (squeeze and bounce, default) | spin (a turn, round things) | tilt (a nod, tools);
   --et-cursor-hover  loop over links and buttons: twist (turns round its own axis) | blink (LED + signal arcs, parts .c-led / .c-ir)
                      | spark (a flash at the contacts, .c-spark) | orbit (a satellite .c-sat circles the tip, round the ring's centre
                      6 6 in the picture's own pixels) | clap (the clapper stick .c-clap snaps shut round its hinge 4 11, port-75)
                      | sway | tap | spin | glow (a soft halo, filament .c-fil); default glow;
   --et-cursor-hit    optional, the CSS path only (no script yet, or none at all): url() x y, pointer — the same object in another
                      colour over links and buttons; none — the system hand.
   custom — set by the engine from style.cursor_image (96 px raster, hotspot at the centre).
   With a mouse js/elbuz_cursor.js draws the picture (inline SVG) at --et-cursor-size (style.cursor_size → data-cursor-size) and
   hides the system cursor (html.is-cursor-on). Only transform and opacity are animated: nothing repaints, light for weak laptops.
   Mouse and trackpad only: touch screens keep the system behaviour. Fields keep the text cursor. */
[data-cursor="remote"] { --et-cursor: url("../image/cursors/remote.svg") 6 6; --et-cursor-press: tilt; --et-cursor-hover: blink; }
[data-cursor="gamepad"] { --et-cursor: url("../image/cursors/gamepad.svg") 16 15; --et-cursor-hover: tap; }
[data-cursor="plug"] { --et-cursor: url("../image/cursors/plug.svg") 6 6; --et-cursor-press: tilt; --et-cursor-hover: spark; }
[data-cursor="bulb"] { --et-cursor: url("../image/cursors/bulb.svg") 6 6; --et-cursor-hover: glow; }
[data-cursor="bolt"] { --et-cursor: url("../image/cursors/bolt.svg") 8 4; --et-cursor-press: tilt; --et-cursor-hover: glow; }
[data-cursor="wrench"] { --et-cursor: url("../image/cursors/wrench.svg") 6 6; --et-cursor-press: tilt; --et-cursor-hover: sway; }
[data-cursor="shovel"] { --et-cursor: url("../image/cursors/shovel.svg") 6 6; --et-cursor-press: tilt; --et-cursor-hover: tap; }
[data-cursor="leaf"] { --et-cursor: url("../image/cursors/leaf.svg") 6 6; --et-cursor-press: tilt; --et-cursor-hover: sway; }
[data-cursor="paw"] { --et-cursor: url("../image/cursors/paw.svg") 16 16; --et-cursor-hover: tap; }
[data-cursor="needle"] { --et-cursor: url("../image/cursors/needle.svg") 5 5; --et-cursor-press: tilt; --et-cursor-hover: tap; }
[data-cursor="lipstick"] { --et-cursor: url("../image/cursors/lipstick.svg") 8 3; --et-cursor-press: tilt; --et-cursor-hover: twist; }
[data-cursor="coffee-bean"] { --et-cursor: url("../image/cursors/coffee-bean.svg") 6 6; --et-cursor-press: spin; --et-cursor-hover: spin; }
[data-cursor="fork"] { --et-cursor: url("../image/cursors/fork.svg") 6 6; --et-cursor-press: tilt; --et-cursor-hover: tap; }
[data-cursor="diamond"] { --et-cursor: url("../image/cursors/diamond.svg") 6 6; --et-cursor-hover: glow; }
[data-cursor="cart"] { --et-cursor: url("../image/cursors/cart.svg") 3 4; --et-cursor-press: tilt; --et-cursor-hover: sway; }
[data-cursor="hanger"] { --et-cursor: url("../image/cursors/hanger.svg") 16 2; --et-cursor-press: tilt; --et-cursor-hover: sway; }
[data-cursor="ball"] { --et-cursor: url("../image/cursors/ball.svg") 16 16; --et-cursor-press: spin; --et-cursor-hover: spin; }
[data-cursor="pill"] { --et-cursor: url("../image/cursors/pill.svg") 6 6; --et-cursor-press: spin; --et-cursor-hover: spin; }
[data-cursor="flower"] { --et-cursor: url("../image/cursors/flower.svg") 16 16; --et-cursor-press: spin; --et-cursor-hover: sway; }
[data-cursor="driver"] { --et-cursor: url("../image/cursors/driver.svg") 2 2; --et-cursor-press: tilt; --et-cursor-hover: twist; --et-cursor-hit: url("../image/cursors/driver-hit.svg") 2 2, pointer; }
[data-cursor="orbit"] { --et-cursor: url("../image/cursors/orbit.svg") 4 4; --et-cursor-hover: orbit; }
[data-cursor="whisk"] { --et-cursor: url("../image/cursors/whisk.svg") 6 6; --et-cursor-press: spin; --et-cursor-hover: twist; }
[data-cursor="drop"] { --et-cursor: url("../image/cursors/drop.svg") 16 3; --et-cursor-hover: glow; }
[data-cursor="flake"] { --et-cursor: url("../image/cursors/flake.svg") 16 16; --et-cursor-press: spin; --et-cursor-hover: spin; }
[data-cursor="fob"] { --et-cursor: url("../image/cursors/fob.svg") 5 5; --et-cursor-press: tilt; --et-cursor-hover: blink; }
[data-cursor="clapper"] { --et-cursor: url("../image/cursors/clapper.svg") 3 11; --et-cursor-hover: clap; }
[data-cursor="headlight"] { --et-cursor: url("../image/cursors/headlight.svg") 7 7; --et-cursor-press: spring; --et-cursor-hover: blink; }
html[data-cursor] { --et-cursor-size: 40px; --et-cursor-glow: color-mix(in srgb, var(--et-accent, #ffb020) 55%, transparent); }
html[data-cursor-size="m"] { --et-cursor-size: 32px; }
html[data-cursor-size="xl"] { --et-cursor-size: 48px; }
@media (hover: hover) and (pointer: fine) {
  html[data-cursor] body { cursor: var(--et-cursor), auto; }
  html[data-cursor] body .et-ed { cursor: default; } /* the design editor panel keeps the system arrow */
  html[data-cursor] body :is(a[href], button:not(:disabled), [role="button"], [role="tab"], [role="radio"], [role="switch"], label[for], select, summary, input:is([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="range"], [type="color"], [type="file"])) { cursor: var(--et-cursor-hit, pointer); }
  html[data-cursor] body :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="range"], [type="color"], [type="file"], [type="hidden"]), textarea, [contenteditable="true"]) { cursor: text; }
  html[data-cursor] body :is(:disabled, [aria-disabled="true"]) { cursor: not-allowed; }
}

/* The big cursor (js/elbuz_cursor.js): .et-cursor follows the mouse, __art takes the press (and is the probe the script reads
   --et-cursor from: computed cursor values carry absolute URLs), __pic (inline SVG / img) the hover loop, __glow the halo */
html.is-cursor-on, html.is-cursor-on :where(:not(.et-cursor, .et-cursor *)) { cursor: none !important; } /* :where keeps it at (0,1,1) so the field rules below win */
/* form fields keep the page cursor rule on (no page-wide restyle): the drawn cursor hides there and the native one comes back */
html.is-cursor-on :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="range"], [type="color"], [type="file"], [type="hidden"]), textarea, [contenteditable="true"], [contenteditable="true"] *) { cursor: text !important; }
html.is-cursor-on :is(select, select *) { cursor: default !important; }
html.is-cursor-on :is(:disabled, [aria-disabled="true"], [aria-disabled="true"] *) { cursor: not-allowed !important; }
.et-cursor {
  position: fixed; left: 0; top: 0; z-index: 2147483000; width: var(--et-cursor-size, 40px); height: var(--et-cursor-size, 40px);
  pointer-events: none; opacity: 0; will-change: transform; contain: layout style; transition: none; /* no lag from global transitions */
}
.et-cursor.is-on { opacity: 1; }
.et-cursor[popover] { inset: auto; left: 0; top: 0; margin: 0; padding: 0; border: 0; background: none; overflow: visible; color: inherit; } /* reset the popover UA box */
.et-cursor__art { position: relative; display: block; width: 100%; height: 100%; cursor: var(--et-cursor), auto; }
.et-cursor__pic { position: relative; display: block; width: 100%; height: 100%; max-width: none; overflow: visible; transition: none; user-select: none; transform-origin: inherit; }
.et-cursor__glow {
  position: absolute; inset: -35%; border-radius: 50%; opacity: 0; transition: none;
  background: radial-gradient(closest-side, var(--et-cursor-glow), transparent);
}
.et-cursor__pic * { transition: none; }
.et-cursor__pic :is(.c-led, .c-ir > *, .c-spark) { transform-box: fill-box; transform-origin: center; }
.et-cursor__pic .c-sat { transform-box: view-box; transform-origin: 6px 6px; }

/* press (the art box, around the hotspot; spin — around the centre) */
:is(.et-cursor__art, .et-ed-cursor__img).is-spring { animation: et-cursor-spring .32s cubic-bezier(.3, 1.4, .5, 1); }
:is(.et-cursor__art, .et-ed-cursor__img).is-spin { animation: et-cursor-spin .45s cubic-bezier(.2, .8, .3, 1); transform-origin: 50% 50% !important; }
:is(.et-cursor__art, .et-ed-cursor__img).is-tilt { animation: et-cursor-tilt .36s ease-out; }
@keyframes et-cursor-spring { 0% { scale: 1; } 30% { scale: .82; } 65% { scale: 1.12; } 100% { scale: 1; } }
@keyframes et-cursor-spin { 0% { rotate: 0deg; scale: 1; } 35% { scale: .88; } 100% { rotate: 360deg; scale: 1; } }
@keyframes et-cursor-tilt { 0% { rotate: 0deg; scale: 1; } 30% { rotate: -16deg; scale: .9; } 65% { rotate: 7deg; } 100% { rotate: 0deg; scale: 1; } }

/* hover: the cursor comes alive over links and buttons (loops; the pic turns around the hotspot, spin — around the centre) */
.et-cursor.is-hover .et-cursor__glow { opacity: .55; }
.et-cursor.is-hover[data-hover="twist"] .et-cursor__pic { animation: et-cursor-twist .7s ease-in-out infinite; }
.et-cursor.is-hover[data-hover="sway"] .et-cursor__pic { animation: et-cursor-sway 1.1s ease-in-out infinite; }
.et-cursor.is-hover[data-hover="tap"] .et-cursor__pic { animation: et-cursor-tap .8s ease-in-out infinite; }
.et-cursor.is-hover[data-hover="spin"] .et-cursor__pic { animation: et-cursor-turn 1.6s linear infinite; transform-origin: 50% 50%; }
.et-cursor.is-hover[data-hover="glow"] .et-cursor__glow { animation: et-cursor-glow 1.4s ease-in-out infinite; }
.et-cursor.is-hover .c-fil { animation: et-cursor-on 1.4s ease-in-out infinite; }
.et-cursor.is-hover[data-hover="blink"] .c-led { animation: et-cursor-blink .9s steps(1) infinite; }
.et-cursor.is-hover[data-hover="blink"] .c-ir { opacity: 1; }
.et-cursor.is-hover[data-hover="blink"] .c-ir > * { opacity: 0; transform-origin: 50% 100%; animation: et-cursor-wave .9s ease-out infinite; }
.et-cursor.is-hover[data-hover="blink"] .c-ir2 { animation-delay: .15s; }
.et-cursor.is-hover[data-hover="blink"] .c-ir3 { animation-delay: .3s; }
.et-cursor.is-hover[data-hover="spark"] .c-spark { animation: et-cursor-spark .7s ease-out infinite; }
.et-cursor.is-hover[data-hover="orbit"] .c-sat { animation: et-cursor-turn 1.2s linear infinite; }
/* clap: the slate stick (drawn 22° open) snaps shut on the board and opens again, round the hinge */
.et-cursor__pic .c-clap { transform-box: view-box; transform-origin: 4px 11px; }
.et-cursor.is-hover[data-hover="clap"] .c-clap { animation: et-cursor-clap .7s cubic-bezier(.5, 0, .3, 1) infinite; }
/* twist: squeezed across the long (diagonal) axis and back — reads as turning round it, like a screwdriver on a screw */
@keyframes et-cursor-twist { 0%, 100% { transform: rotate(45deg) scaleY(1) rotate(-45deg); } 50% { transform: rotate(45deg) scaleY(.45) rotate(-45deg); } }
@keyframes et-cursor-sway { 0%, 100% { rotate: -9deg; } 50% { rotate: 9deg; } }
@keyframes et-cursor-tap { 0%, 60%, 100% { scale: 1; } 25% { scale: .86; } }
@keyframes et-cursor-turn { to { rotate: 360deg; } }
@keyframes et-cursor-clap { 0%, 100% { rotate: 0deg; } 40%, 55% { rotate: 22deg; } }
@keyframes et-cursor-glow { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }
@keyframes et-cursor-on { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes et-cursor-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes et-cursor-wave { 0% { opacity: 0; scale: .6; } 30% { opacity: 1; } 100% { opacity: 0; scale: 1.15; } }
@keyframes et-cursor-spark { 0% { opacity: 0; scale: .4; } 25% { opacity: 1; scale: 1.15; } 60%, 100% { opacity: 0; scale: .8; } }

/* editor tiles (a picture, no parts): the whole-object loops; blink / spark / glow — a soft pulse */
.et-ed-cards--cursor > button:hover > .et-ed-cursor__img:not(.is-press) { animation: et-cursor-on 1.2s ease-in-out infinite; }
.et-ed-cards--cursor > button[data-hover="twist"]:hover > .et-ed-cursor__img:not(.is-press) { animation: et-cursor-twist .7s ease-in-out infinite; transform-origin: 20% 20%; }
.et-ed-cards--cursor > button[data-hover="sway"]:hover > .et-ed-cursor__img:not(.is-press) { animation: et-cursor-sway 1.1s ease-in-out infinite; }
.et-ed-cards--cursor > button[data-hover="tap"]:hover > .et-ed-cursor__img:not(.is-press) { animation: et-cursor-tap .8s ease-in-out infinite; }
.et-ed-cards--cursor > button[data-hover="spin"]:hover > .et-ed-cursor__img:not(.is-press) { animation: et-cursor-turn 1.6s linear infinite; }
@media (prefers-reduced-motion: reduce) { .et-ed-cards--cursor > button > .et-ed-cursor__img { animation: none !important; } }

/* reduced motion, motion = none, the simple view: no animation — over links and buttons only the halo (and a lit filament / arcs) */
@media (prefers-reduced-motion: reduce) {
  :is(.et-cursor__art, .et-ed-cursor__img).is-press, .et-cursor .et-cursor__pic, .et-cursor .et-cursor__pic *, .et-cursor .et-cursor__glow { animation: none !important; }
  .et-cursor.is-hover[data-hover] :is(.c-fil, .c-ir, .c-ir > *) { opacity: 1; }
}
html:is([data-motion="none"], [data-ease="on"]) .et-cursor :is(.et-cursor__art, .et-cursor__pic, .et-cursor__pic *, .et-cursor__glow) { animation: none !important; }
html:is([data-motion="none"], [data-ease="on"]) .et-cursor.is-hover[data-hover] :is(.c-fil, .c-ir, .c-ir > *) { opacity: 1; }

/* lens / beam (js/elbuz_lens.js): the system arrow stays, over photos — a round loupe; beam also lights the nearest card.
   Tokens (preset tokens / tokens_dark): --et-lens-size, --et-lens-bg, --et-lens-ring, --et-beam (spot colour), --et-beam-r (spot radius),
   --et-dim (filter of the other photos), --et-lit (filter of the lit photo). */
:where(html[data-cursor="lens"], html[data-cursor="beam"]) { /* defaults: zero specificity, preset tokens win */
  --et-lens-size: 184px; --et-lens-bg: var(--et-surface); --et-lens-ring: var(--et-text);
  --et-beam: rgb(255 255 255 / .5); --et-beam-r: 300px; --et-dim: brightness(.9); --et-lit: contrast(1.04);
}
:where(html.dark-theme[data-cursor="lens"], html.dark-theme[data-cursor="beam"]) { --et-beam: rgb(255 240 215 / .16); --et-dim: brightness(.55) saturate(.75); --et-lit: brightness(1.1); }
.et-lens {
  position: fixed; left: 0; top: 0; z-index: 1090; width: min(var(--et-lens-size), 40vw); height: min(var(--et-lens-size), 40vw); border-radius: 50%; pointer-events: none;
  translate: calc(var(--lx, -999px) - 50%) calc(var(--ly, -999px) - 50%); opacity: 0; scale: .6;
  background-color: var(--et-lens-bg); background-repeat: no-repeat;
  box-shadow: 0 0 0 1.5px var(--et-lens-ring), 0 0 0 6px rgb(0 0 0 / .3), 0 22px 44px rgb(0 0 0 / .4), inset 0 0 26px rgb(0 0 0 / .25);
  transition: opacity .18s ease, scale .18s ease;
}
.et-lens.is-on { opacity: 1; scale: 1; }
.et-lens::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 32% 26%, rgb(255 255 255 / .28), transparent 34%); }
.et-lens__z {
  position: absolute; left: 50%; top: calc(100% + 10px); translate: -50% 0; padding: 3px 9px; border-radius: 999px;
  background: var(--et-text); color: var(--et-bg); font: 600 .8125rem/1.2 var(--et-font, inherit); white-space: nowrap;
}
html.is-lens-on, html.is-lens-on * { cursor: none !important; }
html:is([data-cursor="lens"], [data-cursor="beam"]) :is(.et-card__image, .et-gallery__slide, [data-et-lens]) img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
@media (prefers-reduced-motion: reduce) { .et-lens { transition: none; scale: 1; } }

/* beam: the spot is a background layer of the list under the pointer (--bx / --by from the script); only photos dim, text never does */
html[data-cursor="beam"] .is-beam { background-image: radial-gradient(circle var(--et-beam-r) at var(--bx) var(--by), var(--et-beam), transparent 72%); }
html[data-cursor="beam"] .is-beam :is(.et-card, [data-et-lit]):not(.is-lit, :focus-within) :is(.et-card__image-link, [data-et-lit-media]) { filter: var(--et-dim); }
html[data-cursor="beam"] :is(.et-card, [data-et-lit]):is(.is-lit, :focus-within) :is(.et-card__image-link, [data-et-lit-media]) { filter: var(--et-lit); }
html[data-cursor="beam"] :is(.et-card__image-link, [data-et-lit-media]) { transition: filter .3s ease; }
@media (prefers-reduced-motion: reduce) { html[data-cursor="beam"] :is(.et-card__image-link, [data-et-lit-media]) { transition: none; } }