/* =========================================================================
   APPORTUNITIES · d-daynight · LTR overrides for the English homepage (/)
   Loaded on / only, after home.css. home.css is RTL-first and uses logical
   properties, so most of the page mirrors by itself. This file flips what is
   directional by nature: motion along the inline axis, 3D tilts and hinges,
   curves, and gradients that run from the start to the end of a line.
   Every rule is scoped to html[dir="ltr"], so the file is inert on an RTL page.
   Image-tied hotspots (.hot, .wire, .call) and the engine labels stay physical
   on purpose: they follow the screenshot pixels and the canvas drawing.
   The arrow icon (#i-arrow) points right in the English sprite itself.
   ========================================================================= */

/* ---------- 1. the sources marquee runs toward the inline end (leftward in LTR) ---------- */
@keyframes marq-ltr { from { transform: translateX(0); } to { transform: translateX(-50%); } }
html[dir="ltr"] .track { animation-name: marq-ltr; }   /* .track.rev keeps animation-direction: reverse */

/* ---------- 2. hero cards: the tilt follows the side they sit on (desktop only; phones set 0deg) ---------- */
@media (min-width: 901px) {
  html[dir="ltr"] .opp[data-card="0"] { --ry: 16deg; }
  html[dir="ltr"] .opp[data-card="1"] { --ry: -16deg; }
  html[dir="ltr"] .opp[data-card="2"] { --ry: 14deg; }
  html[dir="ltr"] .opp[data-card="3"] { --ry: -14deg; }
  html[dir="ltr"] .opp[data-card="4"] { --ry: -15deg; }
}
html[dir="ltr"] .fan-label .bar { background: linear-gradient(90deg, transparent, var(--teal)); }

/* ---------- 3. the autonomy staircase climbs to the right: mirrored angle and side-face hinge ---------- */
@media (min-width: 1181px) {
  html[dir="ltr"] .stairs { transform: rotateX(14deg) rotateY(8deg); }
}
html[dir="ltr"] .stair .s { transform-origin: right; transform: rotateY(90deg); }

/* ---------- 4. the fact → draft connector bends the other way ---------- */
html[dir="ltr"] .pl-link svg { transform: scaleX(-1); }

/* ---------- 5. buttons: the icon nudges and the shine sweeps toward the inline end ---------- */
html[dir="ltr"] .btn-primary::after {
  background: linear-gradient(105deg, transparent 22%, var(--btn-shine) 48%, transparent 74%);
  transform: translateX(-110%);
}
@media (hover: hover) and (pointer: fine) {
  html[dir="ltr"] .btn-primary:hover::after { transform: translateX(110%); }
  html[dir="ltr"] .btn:hover .ico { transform: translateX(4px) scale(1.06); }
}

/* ---------- 6. product tour: progress grows from the left; the phone tab bar fades and cues to the right ---------- */
html[dir="ltr"] .tab-progress i { transform-origin: left; background: linear-gradient(90deg, var(--teal), var(--cyan)); }
@keyframes cue-ltr { from { transform: translateX(0); } to { transform: translateX(5px); } }
@media (max-width: 900px) {
  html[dir="ltr"] .tabbar { -webkit-mask: linear-gradient(90deg, #000 70%, transparent 100%); mask: linear-gradient(90deg, #000 70%, transparent 100%); }
  html[dir="ltr"] .tab-cue { animation-name: cue-ltr; }
  /* scrolled to the end (S7, 31/10): the fade moves to the start (left) and the cue points back to the left */
  html[dir="ltr"] .tabwrap.at-end:not(.at-start) .tabbar { -webkit-mask: linear-gradient(270deg, #000 70%, transparent 100%); mask: linear-gradient(270deg, #000 70%, transparent 100%); }
  html[dir="ltr"] .tabwrap.at-end:not(.at-start) .tab-cue { animation-name: cue; }
  html[dir="ltr"] .tabwrap.at-start.at-end .tabbar { -webkit-mask: none; mask: none; }
}

/* the screens fan out in reading order: the next screen waits on the right (slot 1), the one after on the left (slot 2) */
html[dir="ltr"] .win[data-slot="1"] { transform: translate3d(30%, 3%, -380px) rotateY(-15deg); --wl: 0%; --wr: 42%; }
html[dir="ltr"] .win[data-slot="2"] { transform: translate3d(-30%, 3%, -380px) rotateY(15deg); --wl: 42%; --wr: 0%; }
@media (max-width: 1180px) {
  html[dir="ltr"] .win[data-slot="1"] { transform: translate3d(24%, 3%, -380px) rotateY(-15deg); }
  html[dir="ltr"] .win[data-slot="2"] { transform: translate3d(-24%, 3%, -380px) rotateY(15deg); }
}
/* the two phones face each other from the other sides */
@media (min-width: 901px) {
  html[dir="ltr"] .phone:nth-child(1) { transform: rotateY(14deg) rotateZ(-1.2deg) translateZ(60px) translateY(18px); }
  html[dir="ltr"] .phone:nth-child(2) { transform: rotateY(-12deg) rotateZ(1.2deg) translateZ(110px) translateY(-18px); }
}   /* #tour:not([data-tab="4"]) .phone (an id selector) still parks them away from tab 4 */

/* ---------- 7. lines that run from the start of the line to its end ---------- */
html[dir="ltr"] .b-k i { background: linear-gradient(270deg, transparent, var(--teal)); }
html[dir="ltr"] .cnode:not(:last-child)::after { background: linear-gradient(90deg, rgb(var(--teal-rgb) / .6), rgb(var(--rim-rgb) / calc(.12 * var(--rim-k)))); }
html[dir="ltr"] .seatbox .sb-bar > span { background: linear-gradient(90deg, var(--teal), var(--cyan)); }

/* =========================================================================
   English-only pieces (elements that exist only on /)
   ========================================================================= */

/* the headline: "Who to talk to today," runs about a third longer than the Hebrew line, so it is set a little
   smaller to keep clear of the cards on desktop and to stay on one line on a phone */
@media (min-width: 1181px) { html[dir="ltr"] .hero-title { font-size: clamp(44px, 5.5vw, 80px); } }
@media (min-width: 901px) and (max-width: 1180px) {
  html[dir="ltr"] .hero-title { font-size: clamp(42px, 4.8vw, 57px); }
  /* the measured-number pill wraps to two lines here, so it stays clear of the card on the right */
  html[dir="ltr"] .hero-proof { max-width: 470px; border-radius: 18px; text-align: start; }
}
@media (max-width: 900px) { html[dir="ltr"] .hero-title { font-size: clamp(32px, 10.2vw, 44px); } }
/* the smallest phones (S7, 31/10): the English focus card runs taller, so the two small cards and the demo label sit lower */
@media (max-width: 360px) {
  html[dir="ltr"] .hero-cards { height: 444px; }
  html[dir="ltr"] .opp[data-card="2"] { inset-block-start: 288px; }
  html[dir="ltr"] .opp[data-card="3"] { inset-block-start: 300px; }
  html[dir="ltr"] .announce { gap: 8px; font-size: 11.5px; }   /* one line at 320px: the link stays whole */
  html[dir="ltr"] .announce a { white-space: nowrap; }
}
/* card 3 gets 8px more, on its outer side, where the cards are narrowest (its person row is one line, like the Hebrew) */
@media (min-width: 1181px) and (max-width: 1360px) { html[dir="ltr"] .opp[data-card="3"] { inset-inline-end: 56px; width: 244px; } }

/* ("about 30" uses <small class="pre">, styled by home.css's .stat .v small. v74: the hero's "Check your fit (form in Hebrew)"
   button and its .bt note gave way to the 15-minute setup call, so their rules are gone.) */

/* English headings run longer than the Hebrew ones: balance them instead of leaving one word on the last line */
html[dir="ltr"] :is(.pl-copy h3, .tour-copy h3, .bento h3, .strip h3, .lcol h3, .step h3) { text-wrap: balance; }

/* the nav (31/10/2026): the English links run longer, so they hand over to the burger sooner than the Hebrew ones (home.css,
   "THE NAV FITS ITS PILL", measures the pill itself, not the window). With the 24px gaps they need 1124px of the pill's content
   box in Heebo and 1127px in the system-ui fallback, of the 1148px a full-width pill has, so they show from 1136px: a 1208px
   window, 1225px with a 17px scrollbar. (It was a 1240px window, and the bar had no burger from 901px up to there.) */
@container nav (width < 1136px) {
  html[dir="ltr"] .nav-primary { display: none; }
  html[dir="ltr"] .nav-burger { display: block; }
}

/* v74 · the footer's motion switch: off on the left, on on the right */
html[dir="ltr"] .foot-motion::after { transform: scaleX(-1); }