/* ═══════════════════════════════════════════════
   Scale Theme V2 — UI Decorations
   Global decoration presets for buttons, inputs,
   surfaces, media, and button hover effects.
   ═══════════════════════════════════════════════ */

/* ── DECORATION COLOR ──────────────────────────
   Resolved from body[data-ui-deco-color].
   ─────────────────────────────────────────────── */

body[data-ui-deco-color="accent-1"] { --deco-color: var(--color-accent-1); }
body[data-ui-deco-color="accent-2"] { --deco-color: var(--color-accent-2); }
body[data-ui-deco-color="foreground"] { --deco-color: var(--color-foreground); }

/* ── SHARED DECORATION VALUES ────────────────── */

:root {
  --deco-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.15);
  --deco-inset-highlight-hover: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* ══════════════════════════════════════════════
   BUTTON DECORATIONS (data-ui-deco-buttons)
   ══════════════════════════════════════════════ */

/* ── GRADIENT ──────────────────────────────────
   Real vertical color gradient derived from each
   button's own background: subtle top sheen, darker
   base. Re-derived on hover from the hover bg so the
   color shift stays visible. Skipped on transparent
   slots (no fill to derive from).
   ─────────────────────────────────────────────── */

body[data-ui-deco-buttons="gradient"] .btn--primary {
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--button-primary-bg) 88%, white),
    color-mix(in srgb, var(--button-primary-bg) 80%, black)
  );
}
body[data-ui-deco-buttons="gradient"] .btn--primary:hover {
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--button-primary-bg-hover) 88%, white),
    color-mix(in srgb, var(--button-primary-bg-hover) 80%, black)
  );
}

body[data-ui-deco-buttons="gradient"] .btn--secondary {
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--button-secondary-bg) 88%, white),
    color-mix(in srgb, var(--button-secondary-bg) 80%, black)
  );
}
body[data-ui-deco-buttons="gradient"] .btn--secondary:hover {
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--button-secondary-bg-hover) 88%, white),
    color-mix(in srgb, var(--button-secondary-bg-hover) 80%, black)
  );
}

/* ── BRICK ─────────────────────────────────────
   3D raised look with colored bottom border.
   ─────────────────────────────────────────────── */

body[data-ui-deco-buttons="brick"] :is(.btn--primary, .btn--secondary) {
  border-block-end: 3px solid color-mix(in srgb, rgb(var(--deco-color)) 80%, black);
  box-shadow: 0 2px 0 color-mix(in srgb, rgb(var(--deco-color)) 60%, black);
}

body[data-ui-deco-buttons="brick"] .btn:hover {
  transform: translateY(1px);
  box-shadow: 0 1px 0 color-mix(in srgb, rgb(var(--deco-color)) 60%, black);
}

body[data-ui-deco-buttons="brick"] .btn:active {
  transform: translateY(3px);
  box-shadow: none;
  border-block-end-width: 0;
}

/* ── GHOST ─────────────────────────────────────
   Preserve the filled primary CTA hierarchy.
   Secondary actions use an outline and fill on hover.
   ─────────────────────────────────────────────── */

body[data-ui-deco-buttons="ghost"] .btn--secondary {
  background-color: transparent;
  color: var(--button-secondary-bg);
  border: 2px solid var(--button-secondary-bg);
}
body[data-ui-deco-buttons="ghost"] .btn--secondary:hover {
  background-color: var(--button-secondary-bg);
  color: var(--button-secondary-color);
}

/* ── BUBBLE ────────────────────────────────────
   Soft puffy look with subtle shadow.
   ─────────────────────────────────────────────── */

body[data-ui-deco-buttons="bubble"] :is(.btn--primary, .btn--secondary) {
  box-shadow:
    0 2px 8px rgba(var(--color-shadow), 0.1),
    var(--deco-inset-highlight);
  border: none;
}

body[data-ui-deco-buttons="bubble"] :is(.btn--primary, .btn--secondary):hover {
  box-shadow:
    0 4px 16px rgba(var(--color-shadow), 0.15),
    var(--deco-inset-highlight-hover);
}

/* ── GLOW ──────────────────────────────────────
   Colored halo on CTAs, intensifies on hover.
   ─────────────────────────────────────────────── */

body[data-ui-deco-buttons="glow"] :is(.btn--primary, .btn--secondary) {
  box-shadow: 0 0 var(--glow-size) rgba(var(--glow-color), var(--glow-opacity));
  transition: box-shadow var(--duration-normal) var(--ease-out);
}

body[data-ui-deco-buttons="glow"] :is(.btn--primary, .btn--secondary):hover {
  box-shadow: 0 0 calc(var(--glow-size) * 1.4) rgba(var(--glow-color), calc(var(--glow-opacity) + 0.2));
}

/* ── NAV ARROWS (opt-in) ──────────────────────
   When data-ui-deco-buttons-nav is set, apply
   button decoration to slider/gallery arrows.
   ─────────────────────────────────────────────── */

body[data-ui-deco-buttons="brick"][data-ui-deco-buttons-nav] :is(.block-slider__arrow, .product-media-gallery__arrow) {
  border-block-end: 3px solid color-mix(in srgb, rgb(var(--deco-color)) 80%, black);
  box-shadow: 0 2px 0 color-mix(in srgb, rgb(var(--deco-color)) 60%, black);
}

body[data-ui-deco-buttons="bubble"][data-ui-deco-buttons-nav] :is(.block-slider__arrow, .product-media-gallery__arrow) {
  box-shadow:
    0 2px 8px rgba(var(--color-shadow), 0.1),
    var(--deco-inset-highlight);
}

/* ══════════════════════════════════════════════
   BUTTON HOVER EFFECTS (data-buttons-hover)
   ══════════════════════════════════════════════ */

/* darker = default, handled by --button-*-bg-hover vars */

/* ── LIGHTER ───────────────────────────────────
   Brightens button on hover.
   ─────────────────────────────────────────────── */

body[data-buttons-hover="lighter"] :is(.btn--primary, .btn--secondary):hover {
  filter: brightness(1.15);
}

/* ── FILL-SLIDE ────────────────────────────────
   Background slides in from the start edge.
   ─────────────────────────────────────────────── */

body[data-buttons-hover="fill-slide"] :is(.btn--primary, .btn--secondary)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(var(--color-foreground), 0.12);
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform var(--duration-normal) var(--ease-out);
  z-index: 0;
}

body[data-buttons-hover="fill-slide"] .btn:hover::before {
  transform: scaleX(1);
}

body[data-buttons-hover="fill-slide"] .btn__label,
body[data-buttons-hover="fill-slide"] .btn .icon {
  position: relative;
  z-index: 1;
}

/* ── SCALE ─────────────────────────────────────
   Slight scale up on hover.
   ─────────────────────────────────────────────── */

body[data-buttons-hover="scale"] .btn:hover {
  transform: scale(1.04) translateY(var(--buttons-hover-translate));
}

/* ── PAINT ─────────────────────────────────────
   Brush stroke reveal via clip-path.
   ─────────────────────────────────────────────── */

body[data-buttons-hover="paint"] :is(.btn--primary, .btn--secondary)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(var(--color-foreground), 0.1);
  clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%);
  transition: clip-path var(--duration-normal) var(--ease-out);
  z-index: 0;
}

body[data-buttons-hover="paint"] .btn:hover::before {
  clip-path: polygon(-5% -5%, 105% -5%, 105% 105%, -5% 105%);
}

body[data-buttons-hover="paint"] .btn__label,
body[data-buttons-hover="paint"] .btn .icon {
  position: relative;
  z-index: 1;
}

/* ── MAGNETIC ──────────────────────────────────
   Follows cursor. JS sets --mx and --my.
   ─────────────────────────────────────────────── */

body[data-buttons-hover="magnetic"] .btn {
  transform: translate(var(--mx, 0), var(--my, 0));
}

/* ── TEXT-ROLL ────────────────────────────────
   Content rolls out, clone rolls in. Direction
   controlled by --roll-x / --roll-y on <body>.
   ─────────────────────────────────────────────── */

body[data-buttons-hover="text-roll"] {
  --roll-x: 0%;
  --roll-y: -100%;
}

body[data-buttons-hover="text-roll"][data-buttons-roll-dir="down"] {
  --roll-y: 100%;
}

body[data-buttons-hover="text-roll"][data-buttons-roll-dir="left"] {
  --roll-x: -100%;
  --roll-y: 0%;
}

body[data-buttons-hover="text-roll"][data-buttons-roll-dir="right"] {
  --roll-x: 100%;
  --roll-y: 0%;
}

body[data-buttons-hover="text-roll"] .btn:has(.btn__inner) {
  padding: 0;
}

body[data-buttons-hover="text-roll"] .btn__inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap);
  min-width: 0;
  white-space: normal;
  line-height: 1.2;
  padding: var(--button-padding-block) var(--button-padding-inline);
  transition: transform var(--duration-normal) var(--ease-out);
}

body[data-buttons-hover="text-roll"] .btn__clone {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap);
  min-width: 0;
  white-space: normal;
  line-height: 1.2;
  padding: var(--button-padding-block) var(--button-padding-inline);
  transform: translate(calc(-1 * var(--roll-x)), calc(-1 * var(--roll-y)));
  transition: transform var(--duration-normal) var(--ease-out);
}

body[data-buttons-hover="text-roll"] .btn:hover .btn__inner {
  transform: translate(var(--roll-x), var(--roll-y));
}

body[data-buttons-hover="text-roll"] .btn:hover .btn__clone {
  transform: translate(0, 0);
}

/* ══════════════════════════════════════════════
   INPUT DECORATIONS (data-ui-deco-inputs)
   ══════════════════════════════════════════════ */

/* ── OUTLINED ──────────────────────────────────
   Clean border, transparent background.
   ─────────────────────────────────────────────── */

body[data-ui-deco-inputs="outlined"] :is(.field__input, textarea, select) {
  background-color: transparent;
  border: 1px solid rgba(var(--color-border), 0.6);
}

/* ── FRAMED ────────────────────────────────────
   Thicker border with slight background tint.
   ─────────────────────────────────────────────── */

body[data-ui-deco-inputs="framed"] :is(.field__input, textarea, select) {
  background-color: rgba(var(--color-foreground), 0.02);
  border: 2px solid rgba(var(--color-border), 0.4);
}

/* ── LIFTED ────────────────────────────────────
   Subtle shadow underneath, minimal border.
   ─────────────────────────────────────────────── */

body[data-ui-deco-inputs="lifted"] :is(.field__input, textarea, select) {
  background-color: rgb(var(--color-background));
  border: 1px solid rgba(var(--color-border), 0.15);
  box-shadow: 0 2px 8px rgba(var(--color-shadow), 0.08);
}

/* ── RETRO ─────────────────────────────────────
   Offset shadow, 3D block effect.
   ─────────────────────────────────────────────── */

body[data-ui-deco-inputs="retro"] :is(.field__input, textarea, select) {
  background-color: rgb(var(--color-background));
  border: 2px solid rgb(var(--color-foreground));
  box-shadow: 3px 3px 0 rgb(var(--deco-color));
}

body[data-ui-deco-inputs="retro"] :is(.field__input, textarea, select):focus-visible {
  box-shadow: 2px 2px 0 rgb(var(--deco-color));
  transform: translate(1px, 1px);
}

/* ══════════════════════════════════════════════
   SURFACE DECORATIONS (data-ui-deco-surfaces)
   Elements opt-in via the .surface utility class.
   ══════════════════════════════════════════════ */

/* ── OUTLINED ──────────────────────────────────
   Clean border, no shadow.
   ─────────────────────────────────────────────── */

body[data-ui-deco-surfaces="outlined"] .surface {
  border: 1px solid rgba(var(--color-border), 0.3);
  box-shadow: none;
}

/* ── SHADOW ────────────────────────────────────
   Drop shadow, no border.
   ─────────────────────────────────────────────── */

body[data-ui-deco-surfaces="shadow"] .surface {
  border: none;
  box-shadow: var(--shadow-card);
}

/* ── BRICK ─────────────────────────────────────
   Offset colored border, 3D block.
   ─────────────────────────────────────────────── */

body[data-ui-deco-surfaces="brick"] .surface {
  border: 2px solid rgba(var(--color-foreground), 0.1);
  box-shadow: 4px 4px 0 rgb(var(--deco-color));
}

/* ── SOFT ──────────────────────────────────────
   Very subtle shadow + slight border.
   ─────────────────────────────────────────────── */

body[data-ui-deco-surfaces="soft"] .surface {
  border: 1px solid rgba(var(--color-border), 0.12);
  box-shadow: 0 1px 4px rgba(var(--color-shadow), 0.06);
}

/* ── GLASS ─────────────────────────────────────
   Frosted glass effect.
   ─────────────────────────────────────────────── */

body[data-ui-deco-surfaces="glass"] .surface {
  background: rgba(var(--color-background), 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(var(--color-foreground), 0.08);
  box-shadow: 0 4px 20px rgba(var(--color-shadow), 0.06);
}

/* ── GLOW ──────────────────────────────────────
   Colored halo derived from --glow-color.
   ─────────────────────────────────────────────── */

body[data-ui-deco-surfaces="glow"] .surface {
  border: 1px solid rgba(var(--glow-color), 0.25);
  box-shadow: 0 0 var(--glow-size) rgba(var(--glow-color), var(--glow-opacity));
}

/* ══════════════════════════════════════════════
   MEDIA DECORATIONS (data-media-deco)
   ══════════════════════════════════════════════ */

/* ── OUTLINED ──────────────────────────────────
   Thin border around images.
   ─────────────────────────────────────────────── */

body[data-media-deco="outlined"] :is(.image-wrapper, .product-media) {
  border: 1px solid rgba(var(--color-border), 0.3);
  border-radius: var(--radius-card);
}

/* ── FRAMED ────────────────────────────────────
   Thicker border, picture frame.
   ─────────────────────────────────────────────── */

body[data-media-deco="framed"] :is(.image-wrapper, .product-media) {
  border: 3px solid rgba(var(--color-foreground), 0.15);
  border-radius: var(--radius-card);
  padding: 4px;
  background: rgb(var(--color-background));
}

body[data-media-deco="framed"] :is(.image-wrapper, .product-media) :is(.image-wrapper__img, img) {
  border-radius: calc(var(--radius-card) - 4px);
}

/* ── LIFTED ────────────────────────────────────
   Shadow underneath, floating.
   ─────────────────────────────────────────────── */

body[data-media-deco="lifted"] :is(.image-wrapper, .product-media) {
  border-radius: var(--radius-card);
  box-shadow: 0 6px 20px rgba(var(--color-shadow), 0.12);
}

/* ── RETRO ─────────────────────────────────────
   Offset shadow, vintage feel.
   ─────────────────────────────────────────────── */

body[data-media-deco="retro"] :is(.image-wrapper, .product-media) {
  border: 2px solid rgb(var(--color-foreground));
  border-radius: var(--radius-card);
  box-shadow: 5px 5px 0 rgb(var(--deco-color));
}

/* ── GLOW ──────────────────────────────────────
   Colored halo around media.
   ─────────────────────────────────────────────── */

body[data-media-deco="glow"] :is(.image-wrapper, .product-media) {
  border-radius: var(--radius-card);
  filter: drop-shadow(0 0 calc(var(--glow-size) * 0.6) rgba(var(--glow-color), var(--glow-opacity)));
}

/* Product galleries can explicitly opt out while the rest of the storefront
   continues to inherit the global media decoration. */
body[data-media-deco] .product-media-gallery[data-media-deco="none"] .product-media {
  border: 0;
  border-radius: var(--radius-media);
  padding: 0;
  background: none;
  box-shadow: none;
  filter: none;
}

body[data-media-deco] .product-media-gallery[data-media-deco="none"] .product-media :is(.image-wrapper__img, img) {
  border-radius: 0;
}

/* ══════════════════════════════════════════════
   ACCESSIBILITY
   ══════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  body[data-buttons-hover] .btn::before {
    transition: none;
    animation: none;
  }
  body[data-buttons-hover="scale"] .btn:hover {
    transform: none;
  }
  body[data-buttons-hover="magnetic"] .btn {
    transform: none;
  }
  body[data-buttons-hover="text-roll"] .btn__inner,
  body[data-buttons-hover="text-roll"] .btn__clone {
    transition: none;
  }
  body[data-buttons-hover="text-roll"] .btn:hover .btn__inner,
  body[data-buttons-hover="text-roll"] .btn:hover .btn__clone {
    transform: none;
  }
}

@media (forced-colors: active) {
  body[data-ui-deco-buttons] .btn,
  body[data-ui-deco-inputs] :is(.field__input, textarea, select) {
    border: 1px solid transparent;
  }

  body[data-ui-deco-surfaces] .surface {
    border: 1px solid transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  body[data-texture="grain"] [class*="color-"]::after {
    content: none;
  }
}