/* 88 · react (module.react, Round 13): the page reacts as one body; auras answer the hand and nothing else.
   Colours: the house rose for the field and the wave; green and yellow only for what offers something (the user's
   own words: "green means a suggestion or a mini game; some turn another colour, yellow, on hover"). No blur. */
:root{--rw-offer:oklch(.74 .15 150);--rw-offer-hot:oklch(.84 .15 92)}

/* the field behind everything: a wide soft pool of the rose round the hand, strong outside cards, faint inside */
.rw-react-field{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:calc(var(--k,0) * .55);
  background:radial-gradient(circle 280px at var(--x,50%) var(--y,50%),color-mix(in oklab,var(--rose) 16%,transparent),transparent 72%)}
.rw-react-field.is-in{background:radial-gradient(circle 200px at var(--x,50%) var(--y,50%),color-mix(in oklab,var(--rose) 9%,transparent),transparent 70%)}
.rw-page{position:relative;z-index:1}

/* inside a card, its outside answers too: a ring of its own edge colour, and its neighbours lift a little */
.rw-card,.rw-item,.rw-panel,.rw-product{transition:box-shadow .9s cubic-bezier(.2,.7,.3,1)}
.rw-item:hover,.rw-panel:hover{box-shadow:0 0 0 1px color-mix(in oklab,var(--rw-item-edge,var(--rose)) 50%,transparent),0 0 34px -6px color-mix(in oklab,var(--rw-item-edge,var(--rose)) 40%,transparent)}
.rw-shelf__grid:has(.rw-item:hover) .rw-item:not(:hover){box-shadow:0 0 22px -10px color-mix(in oklab,var(--rose) 30%,transparent)}

/* one big wave through the page after a change of shape: a thin rose ring growing past the screen, once */
.rw-react-wave{position:fixed;z-index:0;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;pointer-events:none;
  border:1px solid color-mix(in oklab,var(--rose) 45%,transparent);animation:rw-react-wave 2.6s cubic-bezier(.15,.6,.3,1) forwards}
@keyframes rw-react-wave{from{scale:1;opacity:.7}to{scale:70;opacity:0}}

/* auras do nothing at rest: the breathing loops are stilled; they answer the hand only */
.rw-chip[aria-pressed="true"]::after{animation:none}
.rw-chip[aria-pressed="true"]:hover::after{animation:rw-chip-aura-breathe calc(var(--rw-beat) * 2) ease-in-out infinite}

/* what offers something: a green aura, yellow under the hand */
[data-rw-offer]{box-shadow:0 0 0 1px color-mix(in oklab,var(--rw-offer) 40%,transparent),0 0 28px -8px color-mix(in oklab,var(--rw-offer) 45%,transparent);
  border-radius:var(--card-radius,16px);transition:box-shadow .9s cubic-bezier(.2,.7,.3,1)}
[data-rw-offer]:hover{box-shadow:0 0 0 1px color-mix(in oklab,var(--rw-offer-hot) 60%,transparent),0 0 36px -6px color-mix(in oklab,var(--rw-offer-hot) 55%,transparent)}

@media (prefers-reduced-motion:reduce){.rw-react-field,.rw-react-wave{display:none}}
@media (pointer:coarse) and (hover:none){.rw-react-field{display:none}}