/* ============================================================================
   SADKO rebrand theme — sits UNLAYERED so it beats the engine's @layer sw.
   Palette derived from extraction/site-graph.json designTokens:
   brand teal #7ebec5 (deepened for contrast), amber accent #fe9800,
   Cairo (Arabic) + Open Sans. RTL-first.
   ========================================================================== */

:root, .sw-root {
  --sadko-teal:      #7ebec5;
  --sadko-teal-deep: #2e7e88;
  --sadko-teal-ink:  #14343a;
  --sadko-amber:     #fe9800;
  --sadko-bg:        #f7f5f1;
  --sadko-card:      #ffffff;

  /* engine tokens */
  --sw-bg:     var(--sadko-bg);
  --sw-ink:    var(--sadko-teal-ink);
  --sw-ink-soft:#5b6b6e;
  --sw-accent: var(--sadko-teal-deep);
  --sw-font-display: 'Cairo', 'Segoe UI', system-ui, sans-serif;
  --sw-font-body:    'Cairo', 'Open Sans', system-ui, sans-serif;

  /* object-position y fraction, mirrored by hotspots.js */
  --sw-objy: 42%;
}
@media (max-width:860px){ :root, .sw-root { --sw-objy: 46%; } }
@media (max-width:860px) and (orientation:portrait){ :root, .sw-root { --sw-objy: 44%; } }

/* keep engine's object-position in sync with the variable */
.sw-scene__video, .sw-scene__still { object-position: center var(--sw-objy, 42%); }

/* ---------- Language-aware sides & alignment ---------- */
/* The copy panel always sits on the READING-START side and its text is aligned
   the same way: right for Arabic (RTL), left for English (LTR). scrub-engine
   also sets left/right inline on desktop; these cover mobile + first paint.
   Everything else (tags, CTA row, list flow) inherits the document direction,
   so it mirrors itself — no hardcoded flex-end, which pinned English chips to
   the wrong edge. */
html[dir=rtl] .sw-copy { left: auto;  right: clamp(18px, 5vw, 64px); text-align: right; }
html[dir=ltr] .sw-copy { right: auto; left:  clamp(18px, 5vw, 64px); text-align: left;  }

/* ---------- Scene fog hugs the copy, not the whole column ----------
   The engine's default scrim is a full-viewport-height gradient panel down one
   side of the screen. In a room full of shoppable appliances that buried every
   product (and its marker) that happened to stand in that column. Instead each
   copy panel carries its own frosted card, sized to the text box and following
   the per-scene copyY anchor wherever it goes — so only the area around the
   words is veiled and the rest of the room stays clear.

   It is a rounded rectangle rather than a soft halo on purpose: a feathered
   ellipse leaves its corners and edges almost bare, which is why the kitchen
   headline (anchored high, over a sunlit window) washed out while the same
   text read fine in the darker rooms. A panel of even opacity gives every
   scene the identical backdrop, so legibility no longer depends on what
   happens to be behind that corner of the frame. */
.sw-copylayer::before { display: none !important; }
.sw-copy::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -34px -46px;
  border-radius: 30px;
  /* Fog, not a card. Legibility comes mostly from the heavy BACKDROP blur —
     the room behind is smeared into a soft field — so the fill itself can stay
     largely transparent. Two off-centre radial washes over the base tint keep
     the density uneven, the way real haze is, instead of one flat shade. */
  background:
    radial-gradient(130% 105% at 22% 16%, color-mix(in srgb, #fff 46%, transparent) 0%, transparent 62%),
    radial-gradient(115% 95% at 84% 90%, color-mix(in srgb, var(--sw-bg) 48%, transparent) 0%, transparent 70%),
    linear-gradient(165deg,
      color-mix(in srgb, var(--sw-bg) 62%, transparent),
      color-mix(in srgb, var(--sw-bg) 46%, transparent));
  -webkit-backdrop-filter: blur(20px) saturate(1.12);
  backdrop-filter: blur(20px) saturate(1.12);
  /* Feather all four edges so the fog dissolves into the scene rather than
     ending on a drawn border. Two crossed gradients intersected: the corners
     fall off in both axes at once, which rounds them off softly. */
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 11%, #000 89%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 13%, #000 87%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right,  transparent 0, #000 11%, #000 89%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 13%, #000 87%, transparent 100%);
  mask-composite: intersect;
}
@media (max-width: 860px) {
  .sw-copy::before { inset: -26px -22px -30px; border-radius: 24px; }
}

/* route rail: opposite the copy — left for Arabic, engine default (right) for
   English, so the rail never crowds the panel it shares an edge with. */
html[dir=rtl] .sw-route { right: auto; left: clamp(14px, 2.4vw, 30px); }
html[dir=rtl] .sw-route__label {
  right: auto; left: 24px;
  transform: translateY(-50%) translateX(-6px);
}
html[dir=rtl] .sw-route__dot:hover .sw-route__label,
html[dir=rtl] .sw-route__dot.is-active .sw-route__label { transform: translateY(-50%) translateX(0); }

/* keep the "01 / 05" counter latin-ordered inside RTL text */
.sw-copy__num { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* Compact copy: smaller headline (the body paragraph was removed from the
   config) and a panel that never blocks marker clicks — only its buttons are
   interactive, and hotspots.js gates those on panel visibility. */
.sw-copy__title { font-size: clamp(1.35rem, 2.9vw, 2.25rem); }
.sw-copy { pointer-events: none !important; width: min(34vw, 400px); }
@media (max-width:860px){ .sw-copy { width: auto; } }

@media (max-width:860px){
  /* Phones: the panel spans the width at the bottom in both languages — but the
     dir-scoped desktop rules above out-specify a bare `.sw-copy`, so repeat the
     side pinning at the same specificity. */
  html[dir] .sw-copy { left: clamp(18px,5vw,64px); right: clamp(18px,5vw,64px); }
  html[dir=rtl] .sw-route { left: 6px; }
}

/* ---------- SADKO brand chrome ---------- */
.sw-brand__mark { display:none; }
.sw-brand img {
  height: 50px; width: auto; display: block;
}
.sw-topcta { background: var(--sadko-amber); color: #241a05; font-weight: 800; }
.sw-btn--primary { background: var(--sadko-amber); color: #241a05; }

/* hotline chip in topbar */
.sadko-hotline {
  direction: ltr;
  font: 800 1rem/1 var(--sw-font-display);
  color: var(--sadko-teal-deep);
  text-decoration: none;
  border: 2px solid color-mix(in srgb, var(--sadko-teal-deep) 35%, transparent);
  border-radius: 999px; padding: 8px 16px;
  background: color-mix(in srgb, #fff 70%, transparent);
  backdrop-filter: blur(8px);
}
.sadko-hotline:hover { background: var(--sadko-teal-deep); color:#fff; }