/* =============================================================================
   AIO Premium FX — shared by / and /he/ (single source, zero language drift).
   Loaded with fx.js + motion.js. Every rule is scoped under html.premium-fx,
   which fx.js adds only after Motion boots, so a failed script costs nothing.
   ========================================================================== */

/* ---------- cursor v2 (fx.js adds .premium-cursor only on fine pointers) --- */
html.premium-cursor .cursor-glow,
html.premium-cursor .cursor-dot { display: none !important; }

.fx-cursor-dot,
.fx-cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 10052;
  will-change: transform;
}
.fx-cursor-dot {
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: #F5F5F0;
}
.fx-cursor-ring {
  width: 40px; height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  border: 1px solid rgba(209, 209, 214, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.28s cubic-bezier(0.16,1,0.3,1), height 0.28s cubic-bezier(0.16,1,0.3,1),
              margin 0.28s cubic-bezier(0.16,1,0.3,1), border-color 0.28s ease, background-color 0.28s ease;
}
.fx-cursor-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #F5F5F0;
  opacity: 0;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}
/* over a work card: ring becomes a filled chip with a verb */
html.premium-cursor .fx-cursor-ring.is-view {
  width: 74px; height: 74px;
  margin: -37px 0 0 -37px;
  border-color: rgba(0, 71, 255, 0.9);
  background: rgba(10, 10, 11, 0.55);
  backdrop-filter: blur(2px);
}
html.premium-cursor .fx-cursor-ring.is-view .fx-cursor-label { opacity: 1; }
/* over links and buttons: ring grows, dot melts into it */
html.premium-cursor .fx-cursor-ring.is-link {
  width: 58px; height: 58px;
  margin: -29px 0 0 -29px;
  border-color: rgba(245, 245, 240, 0.9);
}
html.premium-cursor.premium-pressing .fx-cursor-ring { transform: scale(0.86); }
html.premium-cursor .fx-cursor-hidden { opacity: 0; }
/* the a11y widget's big-arrow mode wins over our cursor too */
html.a11y-cursor .fx-cursor-dot,
html.a11y-cursor .fx-cursor-ring { display: none !important; }
/* exit popup restores the native cursor; ours steps aside there */
.exit-pop { cursor: default; }

/* ---------- nav: transform must not be tweened by the old `all` transition -- */
html.premium-fx nav {
  transition-property: background, background-color, box-shadow, padding, backdrop-filter, border-color;
  will-change: transform;
}

/* ---------- buttons: strip transform from CSS transitions (spring owns it) -- */
html.premium-fx .btn,
html.premium-fx .direct-btn,
html.premium-fx .direct-btn-primary {
  transition-property: color, background, background-color, border-color, box-shadow, opacity;
}

/* ---------- masked line reveals (only when fx.js armed them) --------------- */
html.premium-lines .heading.reveal-left,
html.premium-lines .heading.reveal,
html.premium-lines .heading.reveal-right {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.fx-mask {
  display: block;
  overflow: hidden;
}
.fx-line {
  display: block;
  will-change: transform;
}

/* ---------- border beam ---------------------------------------------------- */
@property --fx-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.fx-beam {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
  background: conic-gradient(
    from var(--fx-angle),
    transparent 0deg,
    transparent 300deg,
    rgba(0, 71, 255, 0.9) 340deg,
    rgba(122, 162, 255, 1) 355deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  z-index: 4;
}
.offer-card:hover .fx-beam,
.portfolio-card:hover .fx-beam,
.offer-card:focus-within .fx-beam,
.portfolio-card:focus-within .fx-beam {
  opacity: 1;
  animation: fx-beam-spin 3.4s linear infinite;
}
@keyframes fx-beam-spin {
  to { --fx-angle: 360deg; }
}
/* no @property support: a still accent edge instead of a dead corner */
@supports not (background: conic-gradient(from var(--fx-angle), #000, #fff)) {
  .fx-beam { background: linear-gradient(135deg, rgba(0,71,255,0.55), transparent 40%); }
  .offer-card:hover .fx-beam, .portfolio-card:hover .fx-beam { animation: none; }
}

/* ---------- film grain ------------------------------------------------------ */
.fx-grain {
  position: fixed;
  inset: -60px;
  pointer-events: none;
  z-index: 9000;
  opacity: 0.032;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}
html.premium-anim .fx-grain { animation: fx-grain-shift 0.9s steps(3) infinite; }
@keyframes fx-grain-shift {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-14px, 9px); }
  66%  { transform: translate(11px, -13px); }
  100% { transform: translate(0, 0); }
}
[data-theme="light"] .fx-grain { display: none; }
html.a11y-stop-motion .fx-grain { animation: none; }

/* ---------- counters settle pop -------------------------------------------- */
html.premium-fx .proof-number { will-change: transform; }

/* ===========================================================================
   AWARD PASS (03.08) — foundations, hero theatre, structure
   ========================================================================== */

/* ---------- #1 · Hebrew display type: Frank Ruhl reaches every heading ----- */
/* The inline CSS binds 29 selectors to Zodiak, which has no Hebrew glyph, so
   Hebrew headings fell to Times. Brand marks and numerals stay Zodiak. */
html[lang="he"] .heading,
html[lang="he"] .manifesto-quote,
html[lang="he"] .pillar h3,
html[lang="he"] .cube-title,
html[lang="he"] .offer-name,
html[lang="he"] .portfolio-client,
html[lang="he"] .lightbox-title,
html[lang="he"] .ind-item,
html[lang="he"] .step h3,
html[lang="he"] .testi-quote,
html[lang="he"] .cta-heading,
html[lang="he"] .case-study-title,
html[lang="he"] .chat-brief h4,
html[lang="he"] .exit-pop h3,
html[lang="he"] .proof-number.proof-text,
html[lang="he"] .marquee-item {
  font-family: var(--font-display-he, 'Frank Ruhl Libre', Georgia, serif);
}
html[lang="he"] .heading,
html[lang="he"] .cta-heading { font-weight: 800; }
html[lang="he"] .hero-title { font-weight: 900; }
html[lang="he"] .manifesto-quote { font-weight: 700; }

/* ---------- #2 · display scale: section titles get real presence ----------- */
/* The inline sheet pins per-breakpoint sizes with !important, so the desktop
   bump must also be !important and later in the cascade. Mobile keeps the
   deliberate declutter sizes. */
html.premium-fx .heading {
  line-height: 1.08;
  letter-spacing: -0.015em;
}
html[lang="he"].premium-fx .heading { letter-spacing: 0; }
@media (min-width: 1024px) {
  html.premium-fx .heading { font-size: clamp(52px, 5.4vw, 84px) !important; }
}

/* ---------- #6 · opening choreography -------------------------------------- */
/* Strike the wordmark, sweep a silver seam, then the hero staggers in. The
   loader's own opacity fade is untouched: the split-text engine listens for
   its transitionend and must keep hearing it. */
html.premium-open .loader-logo {
  animation: fx-strike 0.62s cubic-bezier(0.2, 0, 0, 1) both;
}
@keyframes fx-strike {
  0%   { opacity: 0; filter: blur(14px); transform: scale(1.08); }
  60%  { opacity: 1; filter: blur(0);    transform: scale(0.995); }
  100% { opacity: 1; filter: blur(0);    transform: scale(1); }
}
html.premium-open .loader::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -30%;
  width: 26%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(209,209,214,0.9), transparent);
  animation: fx-seam 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both;
  pointer-events: none;
}
@keyframes fx-seam {
  from { transform: translateX(0); opacity: 0; }
  15%  { opacity: 1; }
  to   { transform: translateX(520%); opacity: 0; }
}
/* staggered hero entrance once the loader is gone */
html.premium-entered .hero-overline { animation: fx-rise 0.7s cubic-bezier(0.16,1,0.3,1) 0.10s both; }
html.premium-entered .hero-sub      { animation: fx-rise 0.7s cubic-bezier(0.16,1,0.3,1) 0.55s both; }
html.premium-entered .hero-cta      { animation: fx-rise 0.7s cubic-bezier(0.16,1,0.3,1) 0.72s both; }
@keyframes fx-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- #5 · vapour title ---------------------------------------------- */
/* Kill only the legacy per-char transition. The hidden pre-reveal state stays
   CSS-owned, and the WAAPI mist entrance takes over on .visible - !important
   on opacity/transform here would override the animation itself. */
html.premium-vapour .hero-title .char {
  transition: none !important;
}

/* ---------- #4 · liquid silk shader ---------------------------------------- */
.fx-silk {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ---------- #10 · shimmer ring on the primary CTA -------------------------- */
html.premium-fx .direct-btn-primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
html.premium-fx .direct-btn-primary::after {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: -1;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 305deg,
    rgba(0, 71, 255, 0.5) 330deg,
    rgba(209, 209, 214, 0.55) 345deg,
    transparent 360deg
  );
  animation: fx-shimmer-spin 4.2s linear infinite;
  opacity: 0.85;
}
@keyframes fx-shimmer-spin { to { transform: rotate(360deg); } }

/* ---------- campaign card framing ------------------------------------------ */
/* offer-campaign.mp4 is a rising comet: the top half is a thin streak, all
   the life is in the particle field at the base. Anchor the crop there. */
html.premium-fx .offer-card[data-media="offer-campaign"] .offer-media {
  object-position: center bottom;
}

/* #7 (number ticker) retired 06.08 - it kept fighting real-world conditions
   (collapsed-section measures, late font swaps shifting the pinned width).
   The original counter + the settle pop is the design of record. */

/* ---------- endless marquees in RTL ---------------------------------------- */
/* The marquee keyframes slide the track left (translateX to -50%), which
   assumes an LTR-aligned track. On the RTL page the track right-aligns, so
   the loop ran off its end and fed empty space in from the right. The strip
   content is language-neutral, so pin the marquee lanes to LTR geometry. */
html[dir="rtl"] .industries-marquee,
html[dir="rtl"] .ind-track,
html[dir="rtl"] .marquee-track {
  direction: ltr;
}

/* ---------- niches banner, award cut ---------------------------------------- */
/* Oversized display type, alternating solid ink and hairline ghost outlines
   (fx.js tags every second item with .fx-ghost). Hebrew never fakes italics. */
html.premium-fx .ind-item {
  font-size: clamp(30px, 3.2vw, 56px) !important;
  padding: 0 34px;
}
html[lang="he"].premium-fx .ind-item {
  font-style: normal;
  font-weight: 700;
}
html.premium-fx .ind-item.fx-ghost {
  color: transparent;
  -webkit-text-stroke: 1px rgba(209, 209, 214, 0.45);
}
html.premium-fx .ind-item.fx-ghost:hover {
  color: transparent;
  -webkit-text-stroke-color: rgba(34, 100, 255, 0.9);
}
html.premium-fx .ind-dot {
  color: #0047FF;
  opacity: 0.55;
}
@media (max-width: 600px) {
  html.premium-fx .ind-item { font-size: clamp(24px, 7vw, 32px) !important; padding: 0 20px; }
}

/* #9 (sticky process) removed 06.08 - the pinned 260vh section read as a
   giant empty gap when sticky lost footing in a mutating layout. */

/* #12 (services bento) retired 06.08 per Oshri - the original uniform
   3-column services grid is the design of record. */

/* ---------- #14 · gallery hall --------------------------------------------- */
/* A curated museum wall: flagship monoliths, a client row, and the studio
   pieces. Everything fully visible at all times, still duotone at rest, one
   piece waking up under the pointer. No 3D, no hidden states. */
@media (min-width: 1024px) {
  html.premium-hall .portfolio-grid.fx-hall {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    grid-auto-flow: dense;
    max-width: 1240px !important;
    gap: 20px;
    margin-inline: auto;
  }
  html.premium-hall .fx-hall .portfolio-card {
    box-shadow: 0 0 0 1px rgba(245, 245, 240, 0.07);
    transition: box-shadow 0.45s ease, opacity 0.45s ease;
  }
  html.premium-hall .fx-hall .portfolio-card:hover {
    box-shadow: 0 0 0 1px rgba(34, 100, 255, 0.55), 0 22px 70px rgba(0, 0, 0, 0.55),
                0 0 42px rgba(0, 71, 255, 0.18);
  }
  /* spotlight: the hovered piece takes the light, its neighbours step back.
     0.62 floor keeps the dimmed 11px captions at AA contrast (4.5:1+). */
  html.premium-hall .fx-hall:hover .portfolio-card:not(:hover) {
    opacity: 0.62;
  }
  /* cinematic push-in: the film inside leans toward you on hover. The card's
     own transform belongs to the legacy tilt engine, so the zoom lives on the
     video layer instead. */
  html.premium-hall .fx-hall .portfolio-card .portfolio-bg-video,
  html.premium-hall .fx-hall .portfolio-card .portfolio-bg {
    transition: filter 0.6s ease, transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  html.premium-hall .fx-hall .portfolio-card:hover .portfolio-bg-video,
  html.premium-hall .fx-hall .portfolio-card:hover .portfolio-bg {
    transform: scale(1.06);
  }
  html.premium-hall .fx-hall .fx-tier1 { aspect-ratio: 5 / 6 !important; }
  html.premium-hall .fx-hall .fx-tier2 { aspect-ratio: 3 / 4 !important; }
  html.premium-hall .fx-hall .fx-tier3 { aspect-ratio: 3 / 4 !important; }

  /* curator caption before the studio row */
  html.premium-hall .fx-hall-label {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 26px;
    font-size: 11px;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: rgba(209, 209, 214, 0.62); /* AA contrast at 11px */
  }
  html.premium-hall .fx-hall-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(209, 209, 214, 0.14);
  }
}

@media (max-width: 1023px) {
  .fx-hall-label {
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(209, 209, 214, 0.62); /* AA contrast at 11px */
    margin: 10px 0 2px;
  }
}


/* ---------- reduced motion: premium effects stand down ---------------------- */
@media (prefers-reduced-motion: reduce) {
  .fx-grain { animation: none !important; }
  .fx-beam { animation: none !important; }
  html.premium-open .loader-logo,
  html.premium-open .loader::after,
  html.premium-entered .hero-overline,
  html.premium-entered .hero-sub,
  html.premium-entered .hero-cta { animation: none !important; }
  html.premium-fx .direct-btn-primary::after { animation: none !important; }
  .fx-silk { display: none !important; }
}
html.a11y-stop-motion .fx-silk { display: none !important; }
html.a11y-stop-motion .direct-btn-primary::after { animation: none !important; }