/* Public Rainlinks motion: Sai-style interaction grammar + raincore-motion tokens.
 * Reads existing theme tokens. Preset exceptions keep Atelier/Cinematic personalities. */
:root {
  --rl-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --rl-spot-x: 50%;
  --rl-spot-y: 70%;
  --rl-spot-lit: 0;
  --rl-shadow: 0 14px 38px color-mix(in srgb, var(--text) 13%, transparent);
  --rl-shadow-hover: 0 16px 42px color-mix(in srgb, var(--text) 18%, transparent);
}

@property --rl-spot-lit {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

html.rl-motion {
  --tabs-text-muted: var(--text-secondary);
  --tabs-text-active: var(--bg);
  --tabs-bar-bg: transparent;
  --tabs-pill-bg: var(--text);
}

/* Sliding Links/Shop pill uses --text fill so labels stay readable. */
html.rl-motion .rainlinks-mode-nav-track.rc-motion-tabs {
  position: relative;
  display: inline-flex;
  isolation: isolate;
  overflow: hidden;
}
html.rl-motion .rainlinks-mode-nav-track.rc-motion-tabs .t-tabs-pill {
  position: absolute;
  top: 3px;
  left: 0;
  height: calc(100% - 6px);
  border: 0;
  border-radius: 999px;
  background: var(--text);
}
html.rl-motion .rainlinks-mode-nav-track.rc-motion-tabs .rainlinks-mode-btn.is-active,
html.rl-motion .rainlinks-mode-nav-track.rc-motion-tabs .t-tab[aria-selected="true"] {
  background: transparent;
  color: var(--bg);
  box-shadow: none;
}

.rl-share-toast-slot {
  position: fixed;
  left: 50%;
  bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
  z-index: 80;
  transform: translateX(-50%);
  pointer-events: none;
}
.rl-share-toast {
  min-width: 8.5rem;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  background: color-mix(in srgb, var(--card-bg, var(--panel-bg, #111)) 92%, transparent);
  color: var(--text);
  font: 560 0.82rem/1.3 var(--font);
  box-shadow: var(--rl-shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  text-align: center;
}

/* Pointer wash lives on an injected layer so Atelier's ↗ ::after is untouched. */
.rl-spot-host {
  --rl-spot-x: 50%;
  --rl-spot-y: 70%;
  position: relative;
}
.rl-spot,
.rl-spot-ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
}
.rl-spot {
  z-index: 0;
  background: radial-gradient(
    165px circle at var(--rl-spot-x) var(--rl-spot-y),
    color-mix(in srgb, var(--accent) 28%, transparent) 0%,
    color-mix(in srgb, var(--accent) 12%, transparent) 36%,
    transparent 72%
  );
  transform: scale(0.86);
  transform-origin: var(--rl-spot-x) var(--rl-spot-y);
  transition:
    opacity 0.28s ease-out,
    transform 0.46s var(--rl-ease);
}
.rl-spot-ring {
  z-index: 2;
  padding: 1px;
  background: radial-gradient(
    120px circle at var(--rl-spot-x) var(--rl-spot-y),
    color-mix(in srgb, var(--accent) 80%, white) 0%,
    color-mix(in srgb, var(--accent) 42%, transparent) 42%,
    transparent 74%
  );
  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-clip: content-box, border-box;
  mask-clip: content-box, border-box;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: opacity 0.24s ease-out;
}
.rl-spot-host:hover > .rl-spot,
.rl-spot-host:focus-visible > .rl-spot,
.rl-spot-host:active > .rl-spot,
.rl-spot-host:hover > .rl-spot-ring,
.rl-spot-host:focus-visible > .rl-spot-ring,
.rl-spot-host:active > .rl-spot-ring {
  opacity: 1;
}
.rl-spot-host:hover > .rl-spot,
.rl-spot-host:focus-visible > .rl-spot,
.rl-spot-host:active > .rl-spot {
  transform: scale(1);
}

/* Touch / coarse: the reading-light follows scroll, not a cursor. */
html.rl-ambient .rl-spot-host > .rl-spot,
html.rl-ambient .rl-spot-host > .rl-spot-ring {
  opacity: calc(0.32 + var(--rl-spot-lit, 0) * 0.68);
}
html.rl-ambient .rl-spot-host > .rl-spot {
  transform: scale(calc(0.86 + var(--rl-spot-lit, 0) * 0.14));
}
html.rl-ambient .rl-spot-host:active > .rl-spot,
html.rl-ambient .rl-spot-host:active > .rl-spot-ring {
  opacity: 1;
}
html.rl-ambient .rl-spot-host:active > .rl-spot {
  transform: scale(1);
}

html.rl-motion .link-item.rl-spot-host > :not(.rl-spot, .rl-spot-ring),
html.rl-motion .presave-link-card.rl-spot-host > :not(.rl-spot, .rl-spot-ring),
html.rl-motion .product-card.rl-spot-host > :not(.rl-spot, .rl-spot-ring),
html.rl-motion .rainlink-poll-option.rl-spot-host > :not(.rl-spot, .rl-spot-ring) {
  position: relative;
  z-index: 1;
}

/* Original-family lift + token shadow. Atelier/Cinematic keep their own rest/hover. */
html.rl-motion
  body:not(.theme-preset-atelier, .theme-preset-cinematic-edge, .theme-preset-editorial)
  .link-item:hover,
html.rl-motion
  body:not(.theme-preset-atelier, .theme-preset-cinematic-edge, .theme-preset-editorial)
  .presave-link-card:hover,
html.rl-motion
  body:not(.theme-preset-atelier, .theme-preset-cinematic-edge, .theme-preset-editorial)
  .product-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--rl-shadow-hover);
}

html.rl-motion body.theme-preset-editorial .icon-link:hover,
html.rl-motion
  body:not(.theme-preset-atelier, .theme-preset-cinematic-edge)
  .icon-link:hover,
html.rl-motion
  body:not(.theme-preset-atelier)
  .rainlinks-share-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--text) 7%, transparent);
}

html.rl-motion body.theme-preset-atelier .icon-link:hover,
html.rl-motion body.theme-preset-atelier .link-item:hover,
html.rl-motion body.theme-preset-atelier .rainlinks-share-btn:hover {
  transform: none;
}

html.rl-motion body.theme-preset-cinematic-edge .link-item:hover,
html.rl-motion body.theme-preset-cinematic-edge .presave-link-card:hover {
  transform: none;
  box-shadow: none;
}
html.rl-motion body.theme-preset-cinematic-edge .link-item .rl-spot,
html.rl-motion body.theme-preset-cinematic-edge .link-item .rl-spot-ring,
html.rl-motion body.theme-preset-cinematic-edge .presave-link-card .rl-spot,
html.rl-motion body.theme-preset-cinematic-edge .presave-link-card .rl-spot-ring {
  display: none;
}

html.rl-motion body.theme-preset-atelier .link-item:not(.presave-link-card) .link-title,
html.rl-motion body.theme-preset-editorial .link-item .link-title,
html.rl-motion body.theme-preset-cinematic-edge .link-item .link-title {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 calc(100% - 0.02em);
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: background-size 0.3s var(--rl-ease);
}
html.rl-motion body.theme-preset-atelier .link-item:hover .link-title,
html.rl-motion body.theme-preset-editorial .link-item:hover .link-title,
html.rl-motion body.theme-preset-cinematic-edge .link-item:hover .link-title {
  background-size: 100% 1px;
}
html.rl-ambient body.theme-preset-atelier .link-item:not(.presave-link-card) .link-title,
html.rl-ambient body.theme-preset-editorial .link-item .link-title,
html.rl-ambient body.theme-preset-cinematic-edge .link-item .link-title {
  background-size: calc(var(--rl-spot-lit, 0) * 100%) 1px;
}

html.rl-motion .powered-by a {
  position: relative;
  text-decoration: none;
}
html.rl-motion .powered-by a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.05em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.3s var(--rl-ease);
}
html.rl-motion .powered-by a:hover::after,
html.rl-motion .powered-by a:focus-visible::after {
  transform: scaleX(1);
}
html.rl-ambient .powered-by a::after {
  transform: scaleX(1);
  opacity: 0.5;
}

html.rl-motion
  body:not(.theme-preset-atelier, .theme-preset-cinematic-edge)
  .product-card
  .product-image
  img {
  transition: transform 0.32s var(--rl-ease);
}
html.rl-motion
  body:not(.theme-preset-atelier, .theme-preset-cinematic-edge)
  .product-card:hover
  .product-image
  img {
  transform: scale(1.025);
}
html.rl-ambient
  body:not(.theme-preset-atelier, .theme-preset-cinematic-edge, .theme-preset-editorial)
  .link-item,
html.rl-ambient
  body:not(.theme-preset-atelier, .theme-preset-cinematic-edge, .theme-preset-editorial)
  .presave-link-card,
html.rl-ambient
  body:not(.theme-preset-atelier, .theme-preset-cinematic-edge, .theme-preset-editorial)
  .product-card {
  transform: translateY(calc(var(--rl-spot-lit, 0) * -2px));
}
html.rl-ambient
  body:not(.theme-preset-atelier, .theme-preset-cinematic-edge)
  .product-card
  .product-image
  img {
  transform: scale(calc(1 + var(--rl-spot-lit, 0) * 0.025));
}

html.rl-motion.motion-ready .rl-reveal:not(.is-visible) {
  opacity: 0;
}
html.rl-motion.motion-ready .rl-reveal.is-visible {
  animation: rl-enter 0.7s calc(var(--enter-index, 0) * 55ms) var(--rl-ease) both;
}

@keyframes rl-enter {
  from {
    opacity: 0;
    filter: blur(7px);
    transform: translateY(16px) scale(0.985);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
}

html.rl-motion .avatar {
  animation: rl-portrait 0.9s var(--rl-ease) 80ms both;
}
@keyframes rl-portrait {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0 round 50%);
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    clip-path: inset(0 round 50%);
    transform: none;
  }
}

.rl-dot-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 0% 32%, #000000b8 48%, transparent 72%);
  mask-image: linear-gradient(#000 0% 32%, #000000b8 48%, transparent 72%);
}
.rl-dot-pattern,
.rl-dot-focus-pattern {
  position: absolute;
  inset: -18px 0;
  background-image: radial-gradient(
    circle,
    color-mix(in srgb, var(--accent) 28%, transparent) 0 1px,
    transparent 1.25px
  );
  background-size: 18px 18px;
  opacity: 0.55;
  transform: translate3d(0, var(--rl-dot-scroll-offset, 0px), 0);
}
.rl-dot-pattern {
  -webkit-mask-image: radial-gradient(
    circle 118px at var(--rl-dot-pointer-x, -200px) var(--rl-dot-pointer-y, -200px),
    rgba(0, 0, 0, calc(1 - var(--rl-dot-focus-opacity, 0))) 0 46%,
    #000 100%
  );
  mask-image: radial-gradient(
    circle 118px at var(--rl-dot-pointer-x, -200px) var(--rl-dot-pointer-y, -200px),
    rgba(0, 0, 0, calc(1 - var(--rl-dot-focus-opacity, 0))) 0 46%,
    #000 100%
  );
}
.rl-dot-focus {
  position: absolute;
  inset: 0;
  opacity: var(--rl-dot-focus-opacity, 0);
  -webkit-mask-image: radial-gradient(
    circle 118px at var(--rl-dot-pointer-x, -200px) var(--rl-dot-pointer-y, -200px),
    #000 0 46%,
    #000000b8 68%,
    transparent 100%
  );
  mask-image: radial-gradient(
    circle 118px at var(--rl-dot-pointer-x, -200px) var(--rl-dot-pointer-y, -200px),
    #000 0 46%,
    #000000b8 68%,
    transparent 100%
  );
}
.rl-dot-focus-pattern {
  background-image: radial-gradient(
    circle,
    color-mix(in srgb, var(--accent) 42%, transparent) 0 2px,
    transparent 2.3px
  );
}

html.rl-motion body.theme-preset-cinematic-edge .rl-dot-field,
html.rl-motion body.theme-preset-poster .rl-dot-field {
  display: none;
}

@media (pointer: coarse) {
  html:not(.rl-ambient) .rl-dot-field {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.rl-motion .rl-reveal,
  html.rl-motion .rl-spot,
  html.rl-motion .rl-spot-ring,
  html.rl-motion .avatar,
  html.rl-motion .icon-link,
  html.rl-motion .rainlinks-share-btn,
  html.rl-motion .link-item,
  html.rl-motion .presave-link-card,
  html.rl-motion .product-card,
  html.rl-motion .powered-by a::after,
  html.rl-motion .product-image img {
    animation: none !important;
    transition: none !important;
  }
  html.rl-motion .avatar {
    clip-path: none;
    opacity: 1;
    transform: none;
  }
  html.rl-motion .rl-dot-field {
    display: none;
  }
  html.rl-ambient .rl-spot-host > .rl-spot,
  html.rl-ambient .rl-spot-host > .rl-spot-ring {
    opacity: 0;
    transform: none;
  }
  html.rl-motion.motion-ready .rl-reveal:not(.is-visible),
  html.rl-motion.motion-ready .rl-reveal.is-visible {
    opacity: 1;
    filter: none;
    transform: none;
    animation: none;
  }
}