/* Supersei festival campaigns: announcement bar, hero eyebrow + accent,
   overlay art and the hero effects layer. Loaded by every page through
   partials/site-head.html.

   The campaign's theme is semantic (accent, accentDeep, overlay family,
   effect). The pre-paint bootstrap in partials/site-head.html puts it on
   <html> before first paint:
     data-campaign="<slug>"          a campaign is active
     data-campaign-bar               the bar is shown (space is reserved here)
     data-campaign-overlay="<fam>"   overlay art family (assets/campaigns/<fam>.svg)
     data-campaign-last-day          the final 24 hours
     --campaign-accent / --campaign-accent-deep   on the root inline style
   and js/campaigns.js fills the bar, the eyebrow and the effects afterwards.
   Everything here maps those two colours onto Supersei tokens for both
   themes; emerald stays the one action colour (design/README.md, Colour). */

:root {
  --campaign-accent: #f5b54a;
  --campaign-accent-deep: #b4560f;
  /* text in the accent colour: deepened on day, lifted on night, so it
     always reads at body sizes on canvas */
  --campaign-ink: color-mix(in oklab, var(--campaign-accent-deep) 88%, #0a1220);
  --campaign-tint: color-mix(in oklab, var(--campaign-accent) 12%, var(--canvas));
  --campaign-line: color-mix(in oklab, var(--campaign-accent-deep) 34%, transparent);
  --campaign-art: color-mix(in oklab, var(--campaign-accent) 52%, var(--campaign-accent-deep));
  --campaign-art-opacity: .85;
  --cbar-h: 44px;
}
html[data-theme="dark"] {
  --campaign-ink: color-mix(in oklab, var(--campaign-accent) 86%, #ffffff);
  --campaign-tint: color-mix(in oklab, var(--campaign-accent) 11%, var(--canvas));
  --campaign-line: color-mix(in oklab, var(--campaign-accent) 30%, transparent);
  --campaign-art: var(--campaign-accent);
  --campaign-art-opacity: .78;
}
@media (max-width: 760px) { :root { --cbar-h: 56px; } }

/* ---------------------------------------------------------------- bar */
/* The slot is in the header partial (hidden). The bootstrap's attribute
   reserves its height before paint; js/campaigns.js fills it. */
.ss-cbar[hidden] { display: none; }
html[data-campaign-bar] .ss-cbar { display: block; }
.ss-cbar {
  position: relative; z-index: calc(var(--z-nav) + 1);
  height: var(--cbar-h); overflow: hidden;
  background: var(--campaign-tint); color: var(--text-primary);
  border-bottom: 1px solid var(--campaign-line);
  font: 500 14px/20px var(--font-sans);
}
/* growth-dot trail in the accent at the bar's start edge */
.ss-cbar::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 120px; pointer-events: none;
  background-image: radial-gradient(circle, var(--campaign-art) 0 2.2px, transparent 2.6px);
  background-size: 14px 14px; background-position: 4px 50%;
  -webkit-mask-image: linear-gradient(to right, #000, transparent); mask-image: linear-gradient(to right, #000, transparent);
  opacity: .5;
}
[dir="rtl"] .ss-cbar::before { -webkit-mask-image: linear-gradient(to left, #000, transparent); mask-image: linear-gradient(to left, #000, transparent); }
.ss-cbar__inner {
  position: relative; max-width: var(--container); height: 100%; margin: 0 auto; padding-inline: 24px;
  display: flex; align-items: center; justify-content: center; gap: 14px;
}
.ss-cbar__mark { flex-shrink: 0; color: var(--campaign-ink); }
.ss-cbar__last {
  flex-shrink: 0; padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--campaign-ink); color: var(--canvas);
  font: 500 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
}
/* both greetings share one grid cell and crossfade (opacity only) */
.ss-cbar__msgs { display: grid; min-width: 0; }
.ss-cbar__msg {
  grid-area: 1 / 1; min-width: 0; color: inherit; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transition: opacity var(--dur-reveal) var(--ease-out);
}
.ss-cbar__msg.is-active { opacity: 1; }
a.ss-cbar__msg:hover { text-decoration: underline; text-decoration-color: var(--campaign-line); text-underline-offset: 3px; }
.ss-cbar__ends {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; min-width: 9.5em;
  color: var(--text-secondary); font: 500 12px/16px var(--font-mono); font-variant-numeric: tabular-nums;
}
.ss-cbar__ends b { color: var(--campaign-ink); font-weight: 500; }
.ss-cbar__code {
  position: relative; flex-shrink: 0; display: inline-grid; height: 28px; padding: 0 10px;
  border-radius: var(--radius-pill); border: 1px dashed var(--campaign-ink);
  background: color-mix(in oklab, var(--canvas) 70%, transparent); color: var(--campaign-ink);
  font: 500 12.5px/1 var(--font-mono); letter-spacing: .06em; cursor: pointer;
  transition: border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.ss-cbar__code:active { transform: scale(.98); }
.ss-cbar__code > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: opacity var(--dur-fast); }
.ss-cbar__code [data-copied] { opacity: 0; }
.ss-cbar__code.is-copied [data-copied] { opacity: 1; }
.ss-cbar__code.is-copied [data-code] { opacity: 0; }
.ss-cbar__cta {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; color: var(--campaign-ink);
  font-weight: 600; text-decoration: none;
}
.ss-cbar__cta:hover .ss-icon { transform: translateX(3px); }
[dir="rtl"] .ss-cbar__cta:hover .ss-icon { transform: scaleX(-1) translateX(3px); }
.ss-cbar__cta .ss-icon { transition: transform var(--dur-fast) var(--ease-out); }
.ss-cbar__close {
  position: absolute; inset-inline-end: 12px; top: 50%; translate: 0 -50%;
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-secondary); cursor: pointer;
}
.ss-cbar__close:hover { color: var(--text-primary); background: color-mix(in oklab, var(--campaign-accent) 14%, transparent); }
.ss-cbar :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ss-cbar__inner { padding-inline-end: 56px; }

@media (max-width: 960px) {
  .ss-cbar__cta { display: none; }
}
@media (max-width: 760px) {
  .ss-cbar { font-size: 13px; line-height: 18px; }
  .ss-cbar::before { width: 56px; }
  .ss-cbar__inner { justify-content: flex-start; gap: 10px; padding-inline: 16px 48px; }
  .ss-cbar__mark, .ss-cbar__ends-label { display: none; }
  .ss-cbar__msg { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .ss-cbar__ends { display: none; }
  .ss-cbar__close { inset-inline-end: 6px; }
}

/* ---------------------------------------------------------------- hero */
/* the one emphasised phrase takes the festival colour */
html[data-campaign] .hero .ss-accent,
html[data-campaign] .page-hero .ss-accent { color: var(--campaign-ink); }
/* eyebrow / announce pill take the campaign copy (js/campaigns.js) */
html[data-campaign] .page-hero__eyebrow[data-campaign-slot] { color: var(--campaign-ink); }
.ss-announce[data-campaign-slot="announce"] .ss-announce__tag { background: color-mix(in oklab, var(--campaign-accent) 22%, var(--canvas)); color: var(--campaign-ink); }
html[data-campaign] .ss-announce[data-campaign-slot="announce"] { border-color: var(--campaign-line); }
.ss-announce__code { font: 500 13px/1 var(--font-mono); letter-spacing: .06em; color: var(--campaign-ink); }

/* overlay families: js/campaigns.js maps the calendar's theme.overlay onto one of these */
html[data-campaign-overlay="diwali"] { --campaign-overlay: url("/assets/campaigns/diwali.svg"); }
html[data-campaign-overlay="eid"] { --campaign-overlay: url("/assets/campaigns/eid.svg"); }
html[data-campaign-overlay="lanterns"] { --campaign-overlay: url("/assets/campaigns/lanterns.svg"); }
html[data-campaign-overlay="christmas"] { --campaign-overlay: url("/assets/campaigns/christmas.svg"); }
html[data-campaign-overlay="fireworks"] { --campaign-overlay: url("/assets/campaigns/fireworks.svg"); }
html[data-campaign-overlay="spring"] { --campaign-overlay: url("/assets/campaigns/spring.svg"); }
html[data-campaign-overlay="autumn"] { --campaign-overlay: url("/assets/campaigns/autumn.svg"); }
html[data-campaign-overlay="hearts"] { --campaign-overlay: url("/assets/campaigns/hearts.svg"); }
html[data-campaign-overlay="hanukkah"] { --campaign-overlay: url("/assets/campaigns/hanukkah.svg"); }
html[data-campaign-overlay="bunting"] { --campaign-overlay: url("/assets/campaigns/bunting.svg"); }
html[data-campaign-overlay="generic"] { --campaign-overlay: url("/assets/campaigns/generic.svg"); }
html[data-campaign-overlay="mandala"] { --campaign-overlay: url("/assets/campaigns/mandala.svg"); }
html[data-campaign-overlay="grid"] { --campaign-overlay: url("/assets/campaigns/grid.svg"); }
html[data-campaign-overlay="waves"] { --campaign-overlay: url("/assets/campaigns/waves.svg"); }

/* overlay art: a garland across the top of the hero, painted in the accent
   through a luminance mask. Absolutely positioned, so it never moves layout. */
html[data-campaign-overlay] .hero::before,
html[data-campaign-overlay] .page-hero::before {
  content: ""; position: absolute; z-index: 0; top: 0; left: 50%; translate: -50% 0;
  width: min(100%, 1600px); aspect-ratio: 1440 / 200; pointer-events: none;
  background: var(--campaign-art); opacity: var(--campaign-art-opacity);
  -webkit-mask: var(--campaign-overlay) top center / 100% auto no-repeat;
  mask: var(--campaign-overlay) top center / 100% auto no-repeat luminance;
}
html[data-campaign] .hero > .wrap,
html[data-campaign] .page-hero > .wrap { position: relative; z-index: 1; }
/* the growth field steps back while the festival art is up */
html[data-campaign-overlay] .hero__field svg,
html[data-campaign-overlay] .page-hero__field svg { opacity: .08; }
@media (max-width: 760px) {
  html[data-campaign-overlay] .hero::before,
  html[data-campaign-overlay] .page-hero::before { width: 118%; }
}

/* ---------------------------------------------------------------- effects */
/* A hero-only layer (js/campaigns.js): a short burst after load, then a few
   idle particles. Fixed size, pointer-events none, contained; transform and
   opacity only; paused off-screen and in hidden tabs; absent under reduced
   motion. Particles are discs and simple marks in the accent family, kept to
   the side gutters so they never sit behind the headline. */
.ss-fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; contain: strict; }
.ss-fx.is-paused i, .ss-fx.is-paused i::before { animation-play-state: paused !important; }
.ss-fx i {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h, var(--w));
  opacity: 0; will-change: transform, opacity;
  animation: var(--anim) var(--dur) var(--ease, linear) var(--delay) var(--iter) both;
}
.ss-fx i::before { content: ""; position: absolute; inset: 0; background: var(--c, var(--campaign-art)); border-radius: 50%; }
.ss-fx .is-tumble::before { animation: ss-fx-spin var(--spin) linear infinite; }
.ss-fx .is-petal::before { border-radius: 50% 0 50% 0; }
.ss-fx .is-flame::before { border-radius: 50% 0 50% 50%; rotate: -45deg; animation: ss-fx-flicker var(--flicker, 1.2s) ease-in-out infinite alternate; }
.ss-fx .is-lantern::before { border-radius: 40% 40% 46% 46% / 50% 50% 50% 50%; }
.ss-fx .is-ribbon::before { border-radius: 2px; }
.ss-fx .is-mark::before {
  border-radius: 0;
  -webkit-mask: var(--shape) center / contain no-repeat; mask: var(--shape) center / contain no-repeat;
}

@keyframes ss-fx-fall {
  0% { opacity: 0; transform: translate3d(0, -24px, 0); }
  10% { opacity: var(--depth); }
  85% { opacity: var(--depth); }
  100% { opacity: 0; transform: translate3d(var(--drift), var(--travel), 0); }
}
@keyframes ss-fx-rise {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.7); }
  15% { opacity: var(--depth); }
  80% { opacity: var(--depth); }
  100% { opacity: 0; transform: translate3d(var(--drift), calc(var(--travel) * -1), 0) scale(1); }
}
@keyframes ss-fx-twinkle {
  0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); }
  50% { opacity: var(--depth); transform: scale(1) rotate(var(--rot, 20deg)); }
}
@keyframes ss-fx-spark {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.6); }
  12% { opacity: var(--depth); }
  70% { opacity: var(--depth); }
  100% { opacity: 0; transform: translate3d(var(--dx), var(--dy), 0) scale(.3); }
}
@keyframes ss-fx-spin { to { rotate: 360deg; } }
@keyframes ss-fx-flicker { from { transform: scale(1, 1); } to { transform: scale(.88, 1.08); } }

@media (prefers-reduced-motion: reduce) {
  .ss-fx { display: none; }
  .ss-cbar__msg { transition: none; }
}

/* ---------------------------------------------------------------- pricing */
.pr-promo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px;
  margin: 0 auto var(--space-6); padding: 12px 18px; max-width: 760px;
  border-radius: var(--radius-pill); border: 1px dashed var(--campaign-ink);
  background: var(--campaign-tint); color: var(--text-primary); font-size: 15px; line-height: 22px; text-align: center;
}
.pr-promo[hidden] { display: none; }
.pr-promo__code { font: 500 13px/1 var(--font-mono); letter-spacing: .06em; color: var(--campaign-ink); padding: 5px 10px; border-radius: var(--radius-pill); background: color-mix(in oklab, var(--canvas) 70%, transparent); }
.pr-promo__x { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-secondary); cursor: pointer; }
.pr-promo__x:hover { color: var(--text-primary); }
.ss-price__was { display: block; min-height: 20px; margin-bottom: 2px; color: var(--text-tertiary); font-size: 15px; line-height: 20px; font-variant-numeric: tabular-nums; }
.ss-price__was s { text-decoration-thickness: 1.5px; }
.ss-price__was:empty { visibility: hidden; }
.pr-fee { margin: 6px 0 0; color: var(--text-tertiary); font-size: 13px; line-height: 18px; }
@media (max-width: 760px) { .pr-promo { border-radius: var(--radius-md); padding: 12px 14px; } }

/* Trial modal outside INR (js/pricing.js): no contact fields, the plan picker
   hands off to checkout in the visitor's currency */
.gs-form--abroad > input:not(.hp-field) { display: none; }