/* ==========================================================================
   Plan sale rings (owner 2026-10-06). A plan card with an active sale gets
   class "has-sale" + data-sale="ember|gold|blaze|pixel|bronze" (js/nx-commerce.js).
   The ring is a 2px masked border on ::before, the glow is a box-shadow, so card
   content and layout never move. Owner palette only. Motion stops for
   prefers-reduced-motion. Works on .plan (home), .plan-card (pricing, billing),
   .offer and .promo-card (admin). Remove this file + js/nx-commerce.js to revert.
   ========================================================================== */
@property --sale-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.has-sale { --sale-c: var(--p-gold); --sale-ink: #241203; --sale-glow: rgba(255, 215, 0, .28); position: relative; isolation: isolate; border-color: transparent !important; box-shadow: 0 22px 60px -30px var(--sale-glow), 0 0 0 1px rgba(0, 0, 0, .2); }
.has-sale::before {
  content: ''; position: absolute; inset: -1px; z-index: 2; pointer-events: none; border-radius: inherit; padding: 2px;
  background: var(--sale-c);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* Ember: crimson -> orange -> gold, slowly turning */
.has-sale[data-sale="ember"] { --sale-c: var(--p-crimson); --sale-ink: #fff4f2; --sale-glow: rgba(220, 20, 60, .5); background: radial-gradient(120% 60% at 50% 0%, rgba(220, 20, 60, .13), transparent 60%), var(--panel); }
.has-sale[data-sale="ember"]::before { background: conic-gradient(from var(--sale-a), var(--p-crimson), var(--p-orange), var(--p-gold), var(--p-orange), var(--p-crimson), var(--p-blood), var(--p-crimson)); animation: sale-turn 5s linear infinite; }
@keyframes sale-turn { to { --sale-a: 360deg; } }

/* Gold rush: gold edge, a light band passes every few seconds */
.has-sale[data-sale="gold"] { --sale-c: var(--p-gold); --sale-ink: #241203; --sale-glow: rgba(255, 215, 0, .32); background: radial-gradient(120% 60% at 50% 0%, rgba(255, 215, 0, .08), transparent 60%), var(--panel); }
.has-sale[data-sale="gold"]::before { background: linear-gradient(105deg, #b8860b 0%, var(--p-gold) 30%, #fff6c2 46%, var(--p-gold) 54%, #b8860b 80%, var(--p-gold) 100%) 0 0 / 300% 100%; animation: sale-shine 3.6s var(--ease) infinite; }
@keyframes sale-shine { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0% 0; } }

/* Blaze: orange edge, the glow breathes */
.has-sale[data-sale="blaze"] { --sale-c: var(--p-orange); --sale-ink: #241203; --sale-glow: rgba(255, 140, 0, .45); background: radial-gradient(120% 60% at 50% 0%, rgba(255, 140, 0, .11), transparent 60%), var(--panel); animation: sale-breathe 2.6s ease-in-out infinite; }
.has-sale[data-sale="blaze"]::before { background: linear-gradient(180deg, var(--p-gold), var(--p-orange) 40%, var(--p-orange) 70%, var(--p-crimson)); }
@keyframes sale-breathe { 50% { box-shadow: 0 22px 70px -22px rgba(255, 140, 0, .7), 0 0 0 1px rgba(0, 0, 0, .2), 0 0 26px -6px rgba(255, 140, 0, .45); } }

/* Pixel march: crimson and gold squares walk the edge (the site's pixel language) */
.has-sale[data-sale="pixel"] { --sale-c: var(--p-crimson); --sale-ink: #fff4f2; --sale-glow: rgba(220, 20, 60, .4); }
.has-sale[data-sale="pixel"]::before { padding: 3px; background: repeating-linear-gradient(90deg, var(--p-crimson) 0 4px, transparent 4px 8px, var(--p-gold) 8px 12px, transparent 12px 16px), repeating-linear-gradient(0deg, var(--p-crimson) 0 4px, transparent 4px 8px, var(--p-gold) 8px 12px, transparent 12px 16px); animation: sale-march 1.2s steps(4) infinite; }
.has-sale[data-sale="pixel"]::after { content: ''; position: absolute; inset: -1px; z-index: 1; pointer-events: none; border-radius: inherit; border: 1px solid rgba(220, 20, 60, .35); }
@keyframes sale-march { to { background-position: 16px 0, 0 16px; } }

/* Bronze: quiet brown and gold double edge, no motion */
.has-sale[data-sale="bronze"] { --sale-c: var(--p-brown-lt); --sale-ink: #fff4f2; --sale-glow: rgba(139, 69, 19, .45); background: radial-gradient(120% 60% at 50% 0%, rgba(176, 106, 44, .1), transparent 60%), var(--panel); }
.has-sale[data-sale="bronze"]::before { background: linear-gradient(160deg, var(--p-gold), var(--p-brown-lt) 35%, var(--p-brown) 65%, var(--p-brown-lt)); }

/* the tag on the right corner (the popular tagline keeps the left corner) */
.sale-tag { position: absolute; top: -11px; right: 18px; z-index: 3; max-width: calc(100% - 36px); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.5; padding: 2px 10px; border-radius: 999px; background: var(--sale-c); color: var(--sale-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 6px 16px -8px var(--sale-glow); }
.has-sale[data-sale="ember"] .sale-tag { background: linear-gradient(90deg, var(--p-crimson), var(--p-orange)); color: #fff4f2; }
.has-sale[data-sale="pixel"] .sale-tag { border-radius: 3px; }
.plan .sale-tag { font-size: 10px; padding: 3px 8px; }

/* price: old price struck, new price stays in the normal price style */
.sale-was { font-size: 18px; font-weight: 600; color: var(--dim); text-decoration-thickness: 2px; text-decoration-color: var(--sale-c, var(--accent)); margin-right: 2px; letter-spacing: 0; }
.plan-price .sale-was, .offer-price .sale-was { align-self: center; }
.sale-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: -6px; font-size: 12.5px; color: var(--dust); }
.sale-pill { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--sale-c); color: var(--sale-ink); }
.has-sale[data-sale="ember"] .sale-pill { background: linear-gradient(90deg, var(--p-crimson), var(--p-orange)); color: #fff4f2; }

/* the popular label keeps working beside a sale */
.has-sale .tagline, .has-sale .plan-badge { z-index: 3; }

@media (prefers-reduced-motion: reduce) {
  .has-sale::before, .has-sale { animation: none !important; }
}