/* Black Friday 2026. assets/deal.js shows these only between their dates. */

/* A price tag on a string tied around the top-right corner of the Hermes
   icon. The string is one path in the icon's own space (.deal-loop) that ends
   at the eyelet; the tag is placed with its eyelet on that end point. --s
   scales the tag for smaller icons. The icon images have a transparent margin
   of about 11%, so positions allow for it. */
.deal-icon { position: relative; display: inline-block; margin: -8px 0 20px -8px; }
.deal-icon .app-icon { display: block; margin: 0; }
.deal { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.deal[hidden] { display: none; }
.deal-loop { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)); }
.deal-tag {
  --s: 1;
  position: absolute; top: 36%; left: 106%; width: 0; height: 0;
  transform: rotate(24deg) scale(var(--s)); transform-origin: 0 0;
}
.deal-tag-body {
  position: absolute; z-index: -1; left: -25px; top: -44px; width: 196px; height: 88px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0 14px 0 40px;
  color: #fff; text-align: center; line-height: 1;
  font-family: "Inter", -apple-system, sans-serif;
  filter: drop-shadow(0 10px 16px rgba(20, 0, 40, 0.4));
}
.deal-tag-body svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; overflow: visible; }
.deal-tag-body small { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; margin-right: -0.16em; text-transform: uppercase; opacity: 0.9; }
.deal-tag-body b { font-family: "Inter Tight", "Inter", sans-serif; font-weight: 800; font-size: 27px; letter-spacing: -0.025em; text-shadow: 0 1px 0 rgba(150, 50, 0, 0.35); }
.deal-tag-body span { font-size: 11.5px; font-weight: 600; opacity: 0.92; }
/* Homepage: a smaller icon, so a smaller tag */
.deal-icon .deal-tag { --s: 0.64; }
@media (max-width: 560px) {
  .icon-shine .deal-tag { --s: 0.58; }
  .deal-icon .deal-tag { --s: 0.56; }
}

/* A notification on the Hermes page's desktop scene */
.deal-note {
  position: absolute; z-index: 3; top: 40px; right: 14px; width: 330px;
  display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: start;
  padding: 11px 12px; border-radius: 16px;
  background: rgba(40, 36, 80, 0.55); border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif; color: #fff; text-align: left;
  animation: deal-note-in .6s cubic-bezier(.2, .9, .3, 1.15) 1.2s both;
}
.deal-note[hidden] { display: none; }
.deal-note img { width: 38px; height: 38px; }
.deal-note p { font-size: 13px; line-height: 1.3; }
.deal-note b { display: block; font-weight: 700; }
.deal-note span { color: rgba(255, 255, 255, 0.85); }
.deal-note small { font-size: 11px; color: rgba(255, 255, 255, 0.55); }
@keyframes deal-note-in { from { transform: translateX(120%); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .deal-note { animation: none; } }
/* Only where the scene is wide enough for it to sit beside the panel */
@media (max-width: 1099px) { .deal-note { display: none; } }