/* =====================================================================
   AKHBR UPLIFT, premium motion + urgency layer (additive, brand locked)
   Single source of truth for the $10k agency uplift on the Upwork Formula
   funnel. Fully namespaced ([data-reveal], .u-*) so it NEVER collides with
   the existing .reveal/.is-in system or stacks a second transform on the
   brand hover states. Loads AFTER akhbr.css so it wins specificity ties
   with no !important. Every motion honors prefers-reduced-motion.
   Reveal styles are gated behind html.u-js so a no script (or failed JS)
   visitor always sees full content. NOTE on copy: zero dashes anywhere,
   in text or comment. Commas only.
   ===================================================================== */

:root {
  --u-rise: 20px;          /* default reveal travel, capped small on purpose */
  --u-slide: 26px;         /* directional reveal travel */
  --u-dir: 1;              /* uplift.js sets to -1 under dir=rtl */
  --u-dur: 0.64s;          /* reveal duration */
  --u-dur-micro: 0.2s;     /* micro interaction duration */

  /* Brand values with literal fallbacks so the layer also works on the
     standalone dark live room where some tokens may differ. */
  --u-gold:      var(--c-champagne, #C9A961);
  --u-gold-deep: var(--c-champagne-deep, #9F8440);
  --u-green:     var(--c-akhbr-green, #1B3A1B);
  --u-deep:      var(--c-deep-green, #0F2410);
  --u-ivory:     var(--c-ivory, #F7F2E9);
  --u-muted:     var(--c-fg-muted, #54503F);

  --u-ease-reveal: var(--ease-reveal, cubic-bezier(0.16, 1, 0.3, 1));
  --u-ease-std:    var(--ease-std, cubic-bezier(0.4, 0, 0.2, 1));
}

/* =====================================================================
   REVEAL, disciplined one shot entrance (opacity + small transform)
   Hidden ONLY when JS is present (html.u-js). The required head one liner
   adds .u-js before first paint; uplift.js re adds it as a fallback and
   removes it if the engine never boots, so content is never trapped.
   ===================================================================== */
.u-js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--u-rise));
  transition:
    opacity var(--u-dur) var(--u-ease-reveal),
    transform var(--u-dur) var(--u-ease-reveal),
    clip-path var(--u-dur) var(--u-ease-reveal);
  transition-delay: var(--u-d, 0ms);
  will-change: opacity, transform;
}
/* directional + flavour variants (logical direction via --u-dir) */
.u-js [data-reveal="right"] { transform: translateX(calc(var(--u-slide) * var(--u-dir))); }
.u-js [data-reveal="left"]  { transform: translateX(calc(var(--u-slide) * var(--u-dir) * -1)); }
.u-js [data-reveal="scale"] { transform: scale(0.97); }
.u-js [data-reveal="fade"]  { transform: none; }
.u-js [data-reveal="wipe"]  { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); }
.u-js.u-rtl [data-reveal="wipe"] { clip-path: inset(0 0 0 100%); }

.u-js [data-reveal].u-in {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}
/* once settled, release the GPU hint */
.u-js [data-reveal].u-in { will-change: auto; }

/* =====================================================================
   COUNT UP, keep digits from reflowing while they tick
   ===================================================================== */
[data-countup] { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* =====================================================================
   COUNTDOWN component (.u-countdown), generic, light + dark surfaces
   Used where a page has no existing countdown driver (e.g. live room).
   index.html keeps its own .lp-countdown; offer.html keeps .wb-countdown.
   Fixed cell width + tabular figures = zero CLS as seconds change.
   ===================================================================== */
.u-countdown { display: inline-flex; align-items: stretch; gap: 8px; direction: ltr; }
.u-countdown[hidden] { display: none; }
.u-cd-grid { display: inline-flex; align-items: stretch; gap: 8px; }
.u-cd-cell {
  min-width: 62px;
  padding: 10px 8px 8px;
  border-radius: 14px;
  background: var(--u-ivory);
  border: 1px solid var(--c-nav-border, rgba(14,20,16,0.10));
  box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 8px 22px -16px rgba(14,20,16,0.35);
  text-align: center;
}
.u-cd-num {
  font-family: 'Fraunces', 'Times New Roman', serif;
  font-weight: 600; font-style: italic;
  font-size: clamp(1.5rem, 4.4vw, 2.15rem);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--u-green);
  display: block;
}
.u-cd-label {
  font-family: 'General Sans', system-ui, sans-serif;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--u-muted);
  margin-top: 7px; display: block;
}
.u-cd-sep {
  align-self: center;
  font-family: 'Fraunces', serif; font-weight: 600;
  font-size: clamp(1.3rem, 3.6vw, 1.8rem);
  color: var(--u-gold-deep);
  opacity: 0.7;
}
/* dark surface variant (live room: deep green ground) */
.u-countdown.is-dark .u-cd-cell {
  background: rgba(247, 242, 233, 0.05);
  border-color: rgba(201, 169, 97, 0.30);
  box-shadow: 0 1px 0 rgba(247,242,233,0.05) inset, 0 10px 26px -18px rgba(0,0,0,0.6);
}
.u-countdown.is-dark .u-cd-num   { color: var(--u-gold); }
.u-countdown.is-dark .u-cd-label { color: rgba(247, 242, 233, 0.66); }
/* the seconds cell can softly settle on change (quiet, not flashy) */
.u-cd-num.u-tick { animation: u-cd-tick 0.42s var(--u-ease-std); }
@keyframes u-cd-tick { 0% { opacity: 0.35; transform: translateY(-3px); } 100% { opacity: 1; transform: none; } }
/* post deadline: hide the grid, show the localized ended state */
[data-countdown-ended] { display: none; }
.u-cd-ended .u-cd-grid { display: none; }
.u-cd-ended [data-countdown-ended] { display: block; }

/* =====================================================================
   CTA SHEEN, restrained champagne light sweep (fine pointer only)
   Safe on .btn-press: clips only the inner pseudo, not the box shadow.
   ===================================================================== */
.u-sheen { position: relative; overflow: hidden; isolation: isolate; }
.u-sheen::after {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: -65%; width: 42%;
  background: linear-gradient(100deg, transparent 0%, rgba(247,242,233,0.42) 50%, transparent 100%);
  transform: skewX(-18deg);
  pointer-events: none; opacity: 0; z-index: 2;
}
@media (hover: hover) and (pointer: fine) {
  .u-sheen:hover::after { animation: u-sheen-sweep 0.9s var(--u-ease-std); }
}
/* one attention sweep the first time the element reveals into view */
.u-sheen.u-attention.u-in::after { animation: u-sheen-sweep 1s var(--u-ease-std) 0.35s; }
@keyframes u-sheen-sweep {
  0%   { left: -65%; opacity: 0; }
  12%  { opacity: 1; }
  100% { left: 135%; opacity: 0; }
}

/* =====================================================================
   PULSE RING, one shot champagne ring when an element reveals (proof,
   guarantee badge, price card). Pure pseudo, no layout impact.
   ===================================================================== */
.u-ring { position: relative; }
.u-ring.u-in::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(201, 169, 97, 0.55);
  animation: u-ring-pulse 1.5s var(--u-ease-std) 0.1s 1;
}
@keyframes u-ring-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(201,169,97,0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(201,169,97,0); }
  100% { box-shadow: 0 0 0 0 rgba(201,169,97,0); }
}

/* =====================================================================
   HAIRLINE DRAW, gold rule grows from the inline start as it reveals
   ===================================================================== */
.u-draw { transform: scaleX(0); transform-origin: left center; transition: transform 0.6s var(--u-ease-reveal); transition-delay: var(--u-d, 0ms); }
.u-rtl .u-draw { transform-origin: right center; }
.u-draw.u-in { transform: scaleX(1); }

/* =====================================================================
   HOVER LIFT, opt in only (never auto applied to cards that already
   transform on hover, to avoid clobbering their translateY).
   ===================================================================== */
.u-lift { transition: transform 0.32s var(--u-ease-std), box-shadow 0.32s var(--u-ease-std), border-color 0.32s var(--u-ease-std); }
@media (hover: hover) and (pointer: fine) {
  .u-lift:hover { transform: translateY(-3px); }
}

/* =====================================================================
   MAGNETIC + PARALLAX, JS writes the transform; CSS only smooths it.
   Applied to non press elements (badges, marks, hero media) so it never
   fights the .btn-press translate states.
   ===================================================================== */
@media (hover: hover) and (pointer: fine) {
  [data-magnetic] { transition: transform 0.3s var(--u-ease-std); }
  [data-parallax-layer] { transition: transform 0.18s var(--u-ease-std); will-change: transform; }
}

/* =====================================================================
   MARQUEE, slow trust ticker, starts on view, pauses on hover
   ===================================================================== */
.u-marquee { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.u-marquee-track { display: inline-flex; gap: clamp(28px, 5vw, 56px); align-items: center; white-space: nowrap; will-change: transform; }
.u-marquee.u-play .u-marquee-track { animation: u-marquee-run var(--u-marquee-speed, 42s) linear infinite; }
.u-marquee:hover .u-marquee-track, .u-marquee:focus-within .u-marquee-track { animation-play-state: paused; }
.u-rtl .u-marquee.u-play .u-marquee-track { animation-direction: reverse; }
@keyframes u-marquee-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =====================================================================
   SKELETON SHIMMER, for media/iframe slots so a dark frame is never dead
   ===================================================================== */
.u-skeleton { position: relative; overflow: hidden; background: var(--u-deep); }
.u-skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(201,169,97,0.16) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: u-skeleton-slide 1.6s ease-in-out infinite;
}
@keyframes u-skeleton-slide { 100% { transform: translateX(100%); } }

/* =====================================================================
   FOCUS RING helper for dark surfaces (gold, high contrast)
   ===================================================================== */
.u-focus:focus-visible { outline: 2px solid var(--u-gold); outline-offset: 3px; }

/* =====================================================================
   REDUCED MOTION, the brand deliberately suppresses motion here. Show
   every revealed element in its final state, kill every flourish. Timers
   still UPDATE (they convey info) but lose the odometer flourish (handled
   in JS). Mirrors akhbr.css reduced motion block.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .u-js [data-reveal],
  .u-js [data-reveal="right"],
  .u-js [data-reveal="left"],
  .u-js [data-reveal="scale"],
  .u-js [data-reveal="wipe"] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .u-draw { transform: none !important; transition: none !important; }
  .u-sheen::after,
  .u-ring.u-in::before,
  .u-cd-num.u-tick,
  .u-skeleton::after { animation: none !important; }
  .u-marquee.u-play .u-marquee-track { animation: none !important; }
  [data-magnetic], [data-parallax-layer] { transition: none !important; transform: none !important; }
}