/* SnapOS v2 — motion & interaction layer on top of the approved design.
   Uses the page's own tokens (--blue, --green, --grad, --ease, --ink, --line).
   Everything here is additive: individual `translate` / `scale` properties are used so the
   original `transform` animations of the page keep working. Nothing runs with reduced motion. */

:root {
  --v2-ease-out: cubic-bezier(.16, 1, .3, 1);
  --v2-spring: cubic-bezier(.34, 1.56, .64, 1);
  --v2-fast: 220ms;
  --v2-med: 520ms;
  --v2-slow: 900ms;
}

/* ---------- Scroll progress (brand gradient) ---------- */
.v2-progress {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 120; height: 3px;
  background: var(--grad); transform-origin: var(--v2-origin, right); transform: scaleX(var(--v2-p, 0));
  pointer-events: none;
}
html[dir="ltr"] .v2-progress { --v2-origin: left; }

/* ---------- Hero: headline words rise in, then the device, then the floating cards ---------- */
.v2 .hero-anim > h1 { animation: none; opacity: 1; transform: none; }
.v2 .v2-split .v2-w { display: inline-block; padding-block: .14em; margin-block: -.14em; }   /* room for Arabic ascenders/descenders (gradient text is clipped to the box) */
/* the old page forces up to 5.4rem with line-height 1.06 (letters touch/clip); keep it bold but readable */
html.v2 body .hero h1 { font-size: clamp(1.6rem, 4.6vw, 3.5rem) !important; line-height: 1.32 !important; }
html.v2[lang="en"] body .hero h1 { font-size: clamp(1.4rem, 4vw, 3.2rem) !important; }
@media (max-width: 720px) {
  html.v2 body .hero h1 { font-size: 7vw !important; }
  html.v2[lang="en"] body .hero h1 { font-size: 5.8vw !important; }
}
.v2 .hero h1 .v2-w {
  opacity: 0; translate: 0 .45em; filter: blur(8px);
  animation: v2Word var(--v2-slow) var(--v2-ease-out) forwards;
  animation-delay: calc(80ms + var(--wi, 0) * 70ms);
}
@keyframes v2Word { to { opacity: 1; translate: none; filter: none; } }

/* floating cards pop in one after another once the device has landed */
.v2 .hero .float { transition: opacity var(--v2-med) var(--v2-ease-out), scale var(--v2-med) var(--v2-spring); }
.v2.v2-hero-pre .hero .float { opacity: 0; scale: .7; }
.v2 .hero .f2 { transition-delay: 140ms; }
.v2 .hero .f3 { transition-delay: 280ms; }

/* the primary hero CTA: a soft shine passes every few seconds and a glow ring breathes */
.v2 .hero-ctas .btn-primary { isolation: isolate; }
.v2 .hero-ctas .btn-primary::before {
  content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: inherit;
  background: var(--grad); opacity: 0; filter: blur(10px);
  animation: v2Glow 3.2s ease-in-out 1.6s infinite;
}
.v2 .hero-ctas .btn-primary::after { animation: v2Shine 3.2s var(--v2-ease-out) 1.6s infinite; }
.v2 .hero-ctas .btn-primary:hover::after { animation: none; }
@keyframes v2Glow { 0%, 100% { opacity: 0; } 50% { opacity: .55; } }
@keyframes v2Shine { 0% { transform: translateX(120%); } 40%, 100% { transform: translateX(-120%); } }

/* hero device: full SnapOS screens, shown whole (no cropping) on the app's own light-grey background */
.v2 .hero .hs-slides img { object-fit: contain; background: #f4f6f9; }
.v2 .hero .pf-screen { background: #f4f6f9; }

/* hero device: no stand — the screen floats; printer and cards are re-anchored around it (see below) */
html.v2 body .pos-front .pf-neck, html.v2 body .pos-front .pf-base { display: none !important; }
html.v2 body #stage .pos-front { top: 12% !important; bottom: auto !important; }
html.v2 body #stage .f3 { top: 76% !important; bottom: auto !important; }   /* overlaps the screen's bottom edge */
/* everything that hugged the screen moves down with it (same offsets from the screen as in the original layout) */
html.v2 body #stage .zatca { top: 8.2% !important; }
html.v2 body #stage .f1 { top: 19.4% !important; }
html.v2 body #stage .f2 { top: 60.5% !important; }

/* depth: the device eases up a little as you scroll past the hero (desktop); it does not follow the pointer */
.v2 #stage { translate: 0 var(--v2-scy, 0px); }
.v2 .hero-copy { opacity: var(--v2-copy-o, 1); translate: 0 var(--v2-copy-y, 0); }

/* ---------- Section headings: words rise in when the heading enters ---------- */
.v2 .sec-head .sec-title .v2-w { opacity: 0; translate: 0 .5em; }
.v2 .sec-head.in .sec-title .v2-w {
  animation: v2Word 760ms var(--v2-ease-out) forwards;
  animation-delay: calc(120ms + var(--wi, 0) * 55ms);
}
.v2 .sec-head .eyebrow { transition: opacity 600ms var(--v2-ease-out), translate 600ms var(--v2-ease-out); }
.v2 .sec-head:not(.in) .eyebrow { opacity: 0; translate: 0 10px; }

/* ---------- Staggered grids (cards arrive one by one, 60 ms apart) ---------- */
.v2 .v2-stagger > * { transition: opacity 700ms var(--v2-ease-out), translate 700ms var(--v2-ease-out); transition-delay: calc(var(--v2-i, 0) * 60ms); }
.v2 .v2-stagger:not(.in) > * { opacity: 0; translate: 0 22px; }

/* ---------- Tabs: the page already shows its own timers (circle on sectors/devices, line on features) ---------- */
/* the panel that just became active slides/fades in (class re-added by enhance.js on every switch, manual or automatic) */
.v2 .v2-enter { animation: v2PanelIn 560ms var(--v2-ease-out); }
@keyframes v2PanelIn { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: none; } }

/* product screenshots stay still (no zoom); only the cursor (.tap) and the highlight boxes (.sel) move */
.v2 .fx .shot img { animation: none !important; transform: none !important; }

/* ---------- Cards: a soft spotlight follows the pointer (desktop) ---------- */
.v2 .v2-spot { position: relative; isolation: isolate; }
.v2 .v2-spot::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--v2-mx, 50%) var(--v2-my, 50%), rgba(0, 123, 255, .10), transparent 45%);
  opacity: 0; transition: opacity 300ms ease;
}
.v2 .v2-spot:hover::before { opacity: 1; }


/* ---------- Growth: the three results grow slightly, one after another (all stay fully visible) ---------- */
.v2 .pr-list li { transition: scale 600ms var(--v2-ease-out), box-shadow 600ms ease; transform-origin: center; }
.v2 .pr-list li.v2-on { scale: 1.035; box-shadow: 0 18px 40px -24px rgba(11, 27, 51, .35); }

/* ---------- Why choose: the problem line in red with a ✕, struck through by a red line as the card appears (as in the new site) ---------- */
html.v2 body .why .pain { display: inline-flex !important; align-items: center; gap: 8px; background: none !important; padding: 0 !important; margin-bottom: 12px !important; color: #b4233a !important; font-weight: 600; font-size: .86rem; }
html.v2 body .why .pain::before { content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%; background: #fde7ea url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23C21F33%27 stroke-width=%273%27 stroke-linecap=%27round%27%3E%3Cpath d=%27M7 7l10 10M17 7L7 17%27/%3E%3C/svg%3E") center / 10px no-repeat; }
html.v2 body .why .pain svg { display: none; }
html.v2 body .why .pain span { background: linear-gradient(currentColor, currentColor) 100% 55% / 0 1.6px no-repeat; transition: background-size 700ms var(--v2-ease-out) 300ms; }
html.v2[dir="ltr"] body .why .pain span { background-position: 0 55%; }
html.v2 body .why.in .pain span { background-size: 100% 1.6px; }
@media (prefers-reduced-motion: reduce) { html.v2 body .why .pain span { background-size: 100% 1.6px; transition: none; } }

/* ---------- Sector photos: a slow, slight zoom (Ken Burns) so the scene feels alive; nothing else moves ---------- */
.v2 #industries .ind-visual > img { transform-origin: 50% 55%; animation: v2SlowZoom 14s ease-in-out infinite alternate; }
@keyframes v2SlowZoom { from { transform: scale(1); } to { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .v2 #industries .ind-visual > img { animation: none; } }

/* ---------- Devices: the cashier screen inside a till (6 s story: tap "Karak" → its line in the order lights up → total) ----------
   Positions are % of the full 1919×1079 SnapOS order screenshot. */
.v2-dev .pos-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.v2-dev .pos-mon { position: relative; z-index: 1; width: 88%; padding: 2.2%; border-radius: 18px; background: linear-gradient(160deg, #1b2538, #0b1220); box-shadow: 0 26px 40px -18px rgba(5, 20, 60, .45), inset 0 0 0 1px rgba(255, 255, 255, .06); container-type: inline-size; animation: vd-floatY 6s ease-in-out infinite; }
.v2-dev .pos-scr { position: relative; display: block; aspect-ratio: 1919 / 1079; border-radius: 8px; overflow: hidden; background: #fff; direction: ltr; }
.v2-dev .pos-stage .pos-scr img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; object-fit: cover; filter: none; animation: none; border-radius: 0; }
/* the old page sizes every .receipt at 210px; the printer receipt must fit its paper slot instead */
.v2-dev .printer-stage .receipt { width: auto; text-align: start; font-size: 7.4px; padding: 8px 6px 6px; }
.v2-dev .printer-stage .receipt .r-row { gap: 4px; white-space: nowrap; }
.v2-dev .printer-stage .receipt .r-row span { overflow: hidden; text-overflow: clip; }
/* old-site device stages reused as-is (QDS, customer display, payment terminal, scale): fill the new stage box */
.v2-dev .v2-oldqds { padding: 0; }
.v2-dev .v2-oldqds::before { display: none; }
.v2-dev .v2-oldqds > .hwx-stage { position: absolute; inset: 0; min-height: 0; border-radius: inherit; }
.v2-dev .v2-oldqds .hwx-stage img { position: static; inset: auto; margin: 0; max-width: 100%; max-height: none; filter: none; animation: none; }
/* printer: the receipt slides out in one smooth motion (no stepped feed) and the printer itself stays still */
.v2-dev .printer-rig { animation: none; }
.v2-dev .printer-stage .receipt { animation: vd-receiptFeed 6s steps(1) infinite, v2ReceiptSmooth 6s infinite; }
@keyframes v2ReceiptSmooth {
  0% { transform: translateY(100%); opacity: 1; animation-timing-function: cubic-bezier(.22, .61, .36, 1); }
  44% { transform: translateY(0); opacity: 1; }
  80% { transform: translateY(0); opacity: 1; animation-timing-function: ease-in; }
  92% { transform: translateY(-10%); opacity: 0; }
  100% { transform: translateY(100%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .v2-dev .printer-stage .receipt { animation: none; transform: none; } }

/* no glow halo around the monitor stages (cashier, back office, KDS) */
.v2-dev .pos-stage::before { display: none; }
.v2-dev .pos-mon { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06) !important; }   /* no smudge-like drop shadow under the frame */
/* back office, KDS and QDS screenshots: inside the same monitor bezel */
.v2-dev .fx-mon { width: 92%; }
.v2-dev .fx-mon .dev-frame { position: relative; left: auto; top: auto; translate: none; width: 100%; border-radius: 8px; box-shadow: none; animation: none; }
.v2-dev .pos-sel { position: absolute; left: 13.7%; top: 29.9%; width: 10.7%; height: 17.4%; border: .35cqw solid #007bff; border-radius: .8cqw; box-shadow: 0 0 0 .6cqw rgba(0, 123, 255, .18); opacity: 0; animation: v2PosSel 6s infinite; }
.v2-dev .pos-row { position: absolute; left: 74.9%; top: 35.9%; width: 23.6%; height: 4.9%; border-radius: .4cqw; background: rgba(0, 123, 255, .12); box-shadow: inset 0 0 0 .25cqw rgba(0, 123, 255, .55); opacity: 0; animation: v2PosLine 6s var(--v2-ease-out) infinite; }
.v2-dev .pos-sum { position: absolute; left: 74.9%; top: 87.3%; width: 23.6%; height: 3.6%; border-radius: .4cqw; background: rgba(30, 213, 62, .14); box-shadow: inset 0 0 0 .25cqw rgba(19, 168, 58, .5); opacity: 0; animation: v2PosTotal 6s infinite; }
.v2-dev .pos-tap { position: absolute; left: 19.1%; top: 38.6%; width: 3.6cqw; height: 3.6cqw; margin: -1.8cqw 0 0 -1.8cqw; border-radius: 50%; background: rgba(0, 123, 255, .35); box-shadow: 0 0 0 .5cqw rgba(255, 255, 255, .8); opacity: 0; animation: v2PosTap 6s var(--v2-ease-out) infinite; }
@keyframes v2PosTap {
  0% { opacity: 0; translate: 9cqw 12cqw; scale: 1; }
  14% { opacity: 1; translate: none; scale: 1; }
  18% { scale: .72; } 22% { scale: 1; }
  34% { opacity: 1; } 42%, 100% { opacity: 0; }
}
@keyframes v2PosSel { 0%, 17% { opacity: 0; } 20%, 40% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes v2PosLine { 0%, 20% { opacity: 0; } 25%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes v2PosTotal { 0%, 24% { opacity: 0; } 27%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .v2-dev .pos-mon, .v2-dev .pos-tap, .v2-dev .pos-sel { animation: none; } .v2-dev .pos-row, .v2-dev .pos-sum { animation: none; opacity: 1; } }

/* ---------- Clients marquee pauses under the pointer ---------- */
.v2 .clients .mq:hover * { animation-play-state: paused !important; }


/* ---------- Anchors: the old page adds scroll-padding (76px) AND scroll-margin (76px) → sections landed 152px down; keep one ---------- */
html.v2 body section[id], html.v2 body [id] { scroll-margin-top: 0 !important; }


/* ---------- Reduced motion: show everything at rest, no loops ---------- */
@media (prefers-reduced-motion: reduce) {
  .v2-progress { display: none; }
  .v2 .hero h1 .v2-w, .v2 .sec-head .sec-title .v2-w { opacity: 1; translate: none; filter: none; animation: none; }
  .v2.v2-hero-pre .hero .float, .v2 .v2-stagger:not(.in) > *, .v2 .sec-head:not(.in) .eyebrow { opacity: 1; scale: none; translate: none; }
  .v2 .v2-enter,
  .v2 .hero-ctas .btn-primary::before, .v2 .hero-ctas .btn-primary::after { animation: none; }
  .v2 #stage, .v2 .hero-copy { translate: none; opacity: 1; }
}