/* ============================================================
   omri-widgets.css — supplementary CSS for the site's custom
   Elementor widgets (Masked Headline, Swap Button).

   Base .swap / .mask / .stack / palette classes are already in
   base.css + home.css. This file only adds what the widgets need:
   - configurable mask-wipe (direction, duration, stagger, ease)
     via CSS variables set inline by the widget
   - fade variant
   - self-triggering behavior (works outside a .reveal container)
   ============================================================ */

/* ---- Masked Headline ---------------------------------------- */
.omri-mh{display:block;}
.omri-mh .mask{overflow:hidden;display:block;padding-top:.04em;padding-bottom:.32em;}
.omri-mh .mask > span{display:block;will-change:transform,opacity;transition-property:transform,opacity;}

/* Mask wipe — initial states per direction.
   Overrides home.css's blanket `.mask > span { transform: translateY(116%) }`
   via higher specificity (.omh-mask.omh-dir-X is 3 classes vs .mask's 1). */
.omri-mh.omh-mask.omh-dir-up    .mask > span{transform:translateY(calc(116% + 0.34em));}
.omri-mh.omh-mask.omh-dir-down  .mask > span{transform:translateY(calc(-116% - 0.34em));}
.omri-mh.omh-mask.omh-dir-left  .mask > span{transform:translateX(105%);}
.omri-mh.omh-mask.omh-dir-right .mask > span{transform:translateX(-105%);}
.omri-mh.omh-mask.in .mask > span{transform:none;}

/* Fade + drift-up */
.omri-mh.omh-fade .mask > span{opacity:0;transform:translateY(24px);}
.omri-mh.omh-fade.in .mask > span{opacity:1;transform:none;}

/* No animation */
.omri-mh.omh-none .mask > span{transform:none;opacity:1;transition:none;}

/* Reduced motion — show everything immediately */
@media(prefers-reduced-motion:reduce){
  .omri-mh .mask > span{transform:none!important;opacity:1!important;transition:none!important;}
}

/* Editor: reveal immediately so the author sees the composed headline.
   Elementor adds this body class in its editor iframe. */
body.elementor-editor-active .omri-mh .mask > span,
body.elementor-preview        .omri-mh .mask > span{transform:none;opacity:1;}

/* Per-line letter-case override (widget "Letter case" control).
   Decoupled from weight: .hv (base.css) hard-codes text-transform:uppercase,
   so these must out-specify `.stack .hv` (0,2,0). The `> span` element in the
   selector lifts them to (0,3,1), which also lets Light lines go UPPERCASE. */
.omri-mh .mask > span.omh-tt-upper{text-transform:uppercase;}
.omri-mh .mask > span.omh-tt-lower{text-transform:lowercase;}
.omri-mh .mask > span.omh-tt-cap{text-transform:capitalize;}
.omri-mh .mask > span.omh-tt-none{text-transform:none;}

/* ---- Per-letter reveals: Typewriter + Wave -----------------
   omri-widgets.js splits each line into .omh-char spans and sets a
   per-letter transition-delay. .mask overflow is relaxed so vertical
   letter motion isn't clipped; duration/ease come from the --omh-* vars. */
.omri-mh.omh-typewriter .mask,
.omri-mh.omh-wave .mask{overflow:visible;}
.omri-mh.omh-typewriter .mask > span,
.omri-mh.omh-wave .mask > span{transform:none;}

.omri-mh .omh-word{display:inline-block;white-space:nowrap;}
.omri-mh .omh-char{display:inline-block;will-change:transform,opacity;
  transition-property:transform,opacity;
  transition-duration:var(--omh-dur);
  transition-timing-function:var(--omh-ease);}

/* Typewriter: each letter snaps in at its step (no fade). */
.omri-mh.omh-typewriter .omh-char{opacity:0;transition-duration:1ms;}
.omri-mh.omh-typewriter.in .omh-char{opacity:1;}

/* Wave: letters rise from below; the per-letter stagger reads as a wave. */
.omri-mh.omh-wave .omh-char{opacity:0;transform:translateY(.6em);}
.omri-mh.omh-wave.in .omh-char{opacity:1;transform:none;}

/* Reduced motion + editor: show every letter immediately. */
@media(prefers-reduced-motion:reduce){
  .omri-mh .omh-char{opacity:1!important;transform:none!important;transition:none!important;}
}
body.elementor-editor-active .omri-mh .omh-char,
body.elementor-preview        .omri-mh .omh-char{opacity:1!important;transform:none!important;}

/* ---- Per-letter reveal inside the HERO -----------------------
   The hero headline paints its text with a transparent-fill cursor/sweep
   glow (home.css: color:transparent + background-clip:text). That hides the
   split .omh-char glyphs, so when Typewriter/Wave is chosen on the hero we
   restore solid, visible letters and switch the glow sweep off for that line.
   (A per-letter reveal and the whole-line glow can't share one headline.) */
.hero .omri-mh.omh-typewriter .mask > span,
.hero .omri-mh.omh-wave .mask > span,
.hero.omri-glow-on .omri-mh.omh-typewriter .mask > span,
.hero.omri-glow-on .omri-mh.omh-wave .mask > span{
  background-image:none !important;
  color:rgba(238,239,231,.92) !important;
  -webkit-text-fill-color:currentColor !important;
  animation:none !important;
}
.hero .omri-mh.omh-typewriter .omh-char,
.hero .omri-mh.omh-wave .omh-char,
.hero .omri-mh.omh-typewriter .hl,
.hero .omri-mh.omh-wave .hl{
  -webkit-text-fill-color:currentColor !important;
}

/* ---- Swap Button -------------------------------------------- */
/* All heavy lifting is in base.css; nothing extra needed here
   beyond the reset that keeps the widget wrapper from adding a
   spurious block-level baseline. */
.elementor-widget-omri-swap-button .elementor-widget-container{display:inline-block;}

/* Mobile auto-swap: no hover on touch, so play the roll automatically.
   `swap-auto-loop` cycles forever; `swap-auto-once` plays a single cycle
   only after the button enters the viewport (JS adds `.swap-play`). */
@keyframes omriSwapRoll{
  0%,25%   {transform:translateY(0);}
  50%,75%  {transform:translateY(-100%);}
  100%     {transform:translateY(0);}
}
@keyframes omriSwapAr{
  0%,25%   {transform:translateX(0);}
  50%,75%  {transform:translateX(6px);}
  100%     {transform:translateX(0);}
}
@keyframes omriSwapArRtl{
  0%,25%   {transform:scaleX(-1) translateX(0);}
  50%,75%  {transform:scaleX(-1) translateX(6px);}
  100%     {transform:scaleX(-1) translateX(0);}
}
@media(hover:none),(max-width:860px){
  .swap.swap-auto-loop .roll > span{animation:omriSwapRoll 3.6s cubic-bezier(.7,0,.3,1) 1.2s infinite;}
  .swap.swap-auto-loop .ar         {animation:omriSwapAr   3.6s cubic-bezier(.7,0,.3,1) 1.2s infinite;}
  .proto.is-he .swap.swap-auto-loop .ar{animation-name:omriSwapArRtl;}

  .swap.swap-auto-once.swap-play .roll > span{animation:omriSwapRoll 2.4s cubic-bezier(.7,0,.3,1) .4s 1 both;}
  .swap.swap-auto-once.swap-play .ar         {animation:omriSwapAr   2.4s cubic-bezier(.7,0,.3,1) .4s 1 both;}
  .proto.is-he .swap.swap-auto-once.swap-play .ar{animation-name:omriSwapArRtl;}
}
@media(prefers-reduced-motion:reduce){
  .swap.swap-auto-loop .roll > span,
  .swap.swap-auto-loop .ar,
  .swap.swap-auto-once .roll > span,
  .swap.swap-auto-once .ar{animation:none !important;}
}

/* ============================================================
   Hebrew Type System — Aran (headlines 500 / sub-headings 400),
   Heebo for running & small text. Aran replaces the old Gladia
   display face in Hebrew. Loaded here (last stylesheet) so these
   win over base.css / home.css `var(--he)` rules by source order.
   Scoped to .proto.is-he — English is unaffected.
   ============================================================ */
:root{ --aran:'Aran','Heebo',system-ui,sans-serif; }

/* Headlines → Aran 500 */
.proto.is-he h1,
.proto.is-he h2{ font-family:var(--aran); font-weight:500; letter-spacing:-.02em; }
.proto.is-he .gld{ font-family:var(--aran); font-weight:500; letter-spacing:0; }

/* Masked Headline (the headline widget) lines */
.proto.is-he .omri-mh,
.proto.is-he .omri-mh .mask > span{ font-family:var(--aran); }
.proto.is-he .omri-mh .hv{ font-weight:500; text-transform:none; }
.proto.is-he .omri-mh .lt{ font-weight:400; }

/* Sub-headings → Aran 400 */
.proto.is-he h3,
.proto.is-he h4,
.proto.is-he .eyebrow,
.proto.is-he .hero-kick,
.proto.is-he .faq-q,
.proto.is-he .who-sig .role,
.proto.is-he .price-card .tier,
.proto.is-he .price-addon .ad-tier,
.proto.is-he .e-n-accordion-item-title,
.proto.is-he .e-n-accordion-item-title-text{ font-family:var(--aran); font-weight:400; }

/* Service titles read as headlines → Aran 500 */
.proto.is-he .svc-item h3{ font-family:var(--aran); font-weight:500; text-transform:none; }

/* "My latest Projects" section — titles Aran 500, labels Aran 400 */
.proto.is-he .pk-name,
.proto.is-he .proj-hover .ph-t{ font-family:var(--aran); font-weight:500; }
.proto.is-he .proj-client,
.proto.is-he .proj-hover .ph-tag{ font-family:var(--aran); font-weight:400; }

/* Hebrew contact-modal title → Aran */
.proto.is-he .omri-modal .omri-modal__title{ font-family:var(--aran); font-weight:500; }

/* Per-line Aran weight option emitted by the Masked Headline widget control */
.omri-mh .aran-400{ font-family:var(--aran); font-weight:400; }
.omri-mh .aran-500{ font-family:var(--aran); font-weight:500; }

/* Running & small text → Heebo. Elementor's kit applies its primary
   font (--sans / Hanken) to text-editor widgets, so force Heebo in Hebrew. */
.proto.is-he .elementor-widget-text-editor,
.proto.is-he .elementor-widget-text-editor p,
.proto.is-he p,
.proto.is-he li{ font-family:var(--he); }

/* Opt-in override: add CSS class `use-aran` to a Text Editor (Advanced → CSS Classes)
   to switch it to Aran; the Elementor Typography weight still applies. */
.proto.is-he .use-aran,
.proto.is-he .use-aran p,
.proto.is-he .use-aran li{ font-family:var(--aran) !important; }

/* Hero orbit/background: in RTL the 0-height html-widget wrapper becomes the
   containing block for .hero-bg/.hero-wm (inset:0) and collapses the orbit to
   the top-left. Neutralize the wrapper so they fill the .hero as in LTR. */
.proto.is-he .hero > .elementor-widget-html:has(.hero-wm){ position:static; }

/* Brand logo is a Latin SVG lockup with live <text> ("WEB STUDIO"). The
   inherited RTL direction flips its text-anchor and overlaps/jumbles it.
   Force LTR on the lockup (header + footer) so it renders as in English. */
.proto.is-he .brand-lockup,
.proto.is-he .brand-lockup svg,
.proto.is-he .brand-lockup text{ direction:ltr; unicode-bidi:isolate; }


/* ============================================================
   Animated accent period — the bronze (.edot-after) / green
   (.edot-after-g) full-stop pops in a beat AFTER its headline
   line settles, giving each title a small signature landing.
   Scoped to .omri-mh so it only runs where the line-reveal
   reliably toggles .in; colour/content stay from base.css.
   ============================================================ */
.omri-mh .mask > span.edot-after::after,
.omri-mh .mask > span.edot-after-g::after{
  transform:scale(0);
  transform-origin:center 70%;
  opacity:0;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
  transition-delay:var(--omh-dot-delay, .9s);
}
.in .mask > span.edot-after::after,
.in .mask > span.edot-after-g::after{
  transform:scale(1);
  opacity:1;
}
/* Hero intro runs slower (CSS keyframe lines) — land the dot after it. */
.hero .omri-mh .mask > span.edot-after::after,
.hero .omri-mh .mask > span.edot-after-g::after{ transition-delay:1.5s; }

@media(prefers-reduced-motion:reduce){
  .omri-mh .mask > span.edot-after::after,
  .omri-mh .mask > span.edot-after-g::after{ transform:none;opacity:1;transition:none; }
}