/* =============================================================================
   AIO Premium FX — shared by / and /he/ (single source, zero language drift).
   Loaded with fx.js (no animation library since 20.10.2026). Most rules are
   scoped under html.premium-fx, which fx.js adds when it boots, so a failed
   script costs nothing.
   ========================================================================== */

/* cursor v2 removed 20.10.2026 (system cursor is back, performance rule 18.10) */

/* ---------- nav: hides on the way down (fx.js A3 flips .fx-nav-up) ---------- */
html.premium-fx nav {
  transition-property: background, background-color, box-shadow, padding, backdrop-filter, border-color, transform;
}
html.premium-fx nav.fx-nav-up { transform: translateY(calc(-100% - 18px)); }

/* ---------- 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; }
html.premium-lines .fx-line {
  transform: translateY(112%);
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
html.premium-lines .fx-in .fx-line { transform: none; }
html.premium-lines .fx-now .fx-line { transition: none; }
html.a11y-stop-motion .fx-line { transform: none !important; transition: none !important; }

/* ---------- 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 removed 20.10.2026 (full-screen blend layer repainted every frame) */

/* ---------- counters settle pop: a one-shot WAAPI scale (fx.js A4) ---------- */

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

/* ---------- #1 · Hebrew display type: --font-display-he (Heebo since 04.10) 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, 'Heebo', sans-serif);
}
html[lang="he"] .heading,
html[lang="he"] .cta-heading { font-weight: 800; }
html[lang="he"] .hero-title { font-weight: 800; } /* Heebo tops out at 800 */
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 -------------------------------------- */
/* 2026-10-03: the loader now carries the brand motif itself (blue line ->
   wordmark drawn out of the line -> curtain lift; see index.html LOADER).
   The old blur-strike on .loader-logo and the silver seam were retired here
   because they overrode that animation. The hero stagger below is unchanged;
   the split-text engine still listens for the loader's opacity transitionend. */
}
/* 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 · hero exit: a black veil instead of a brightness filter ------- */
/* (the liquid silk canvas was removed 20.10.2026). fx.js B6 drives the veil's
   opacity and the wrapper's scale while the hero scrolls away; both are
   composited, so the playing film is never re-filtered. */
.fx-hero-dim {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}
html.premium-hero-exit .hero-video-wrap { will-change: transform; }

/* ---------- #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 4; /* 21.10.2026: four turns, then rest */
  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-beam { animation: none !important; }
  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; }
}
html.a11y-stop-motion .direct-btn-primary::after { animation: none !important; }

/* ===========================================================================
   DEVICE TIERS (perf.js, 20.10.2026): html.tier-full | tier-balanced | tier-lite
   ========================================================================== */
/* Glass on top of a playing video is re-blurred on every video frame. The
   small "view" chips on the work wall therefore never blur, on any device. */
.portfolio-view {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background-color: rgba(8, 8, 8, 0.62) !important;
}

/* phones, tablets and modest laptops: no backdrop blur, denser glass instead */
html.tier-balanced nav.scrolled,
html.tier-lite nav.scrolled {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: rgba(5, 5, 6, 0.94) !important;
}
html.tier-balanced[data-theme="light"] nav.scrolled,
html.tier-lite[data-theme="light"] nav.scrolled { background: rgba(250, 250, 248, 0.96) !important; }
html.tier-balanced :is(#navLinks, .direct-btn, #chatbot, .chat-msg, .chat-opt-btn, #cookieBanner, #a11yTrigger, .back-to-top),
html.tier-lite :is(#navLinks, .direct-btn, #chatbot, .chat-msg, .chat-opt-btn, #cookieBanner, #a11yTrigger, .back-to-top) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html:is(.tier-balanced, .tier-lite) .direct-btn:not(.direct-btn-primary) { background-color: rgba(28, 28, 30, 0.72) !important; }
html:is(.tier-balanced, .tier-lite) #chatbot { background-color: rgba(12, 12, 14, 0.92); }
html:is(.tier-balanced, .tier-lite)[data-theme="light"] #chatbot { background-color: rgba(250, 250, 248, 0.95); }

/* lite: stills instead of films, no endless motion, no decorative layers */
html.tier-lite .aurora,
html.tier-lite .ambient { display: none; }
html.tier-lite .hero-video-wrap video { opacity: 0.45; }   /* the poster is the hero */
html.tier-lite .hero-video-wrap .hero-video-placeholder { opacity: 0; }
html.tier-lite :is(.scroll-line, .chatbot-presence, .footer-status .pulse-dot, .chat-engage-bubble, .robot-eye, .antenna-dot),
html.tier-lite :is(.scroll-line, .direct-btn-primary)::after { animation: none !important; }
html.tier-lite .reveal-blur { filter: none !important; }
html.tier-lite .fx-beam { display: none; }

/* any tier: small endless animations rest while their element is off screen
   (perf.js toggles .aio-offscreen with an observer) */
.aio-offscreen,
.aio-offscreen *,
.aio-offscreen::before,
.aio-offscreen::after { animation-play-state: paused !important; }

/* ---------- neon accent on the hero signature (21.10.2026, Oshri) ----------
   Electric Blue on onyx is only ~3:1 and the middle word sank into the dark.
   Dark theme: the word turns warm white with an Electric Blue glow (a neon
   tube, the NEON PRECISION direction); same treatment as the story posters.
   Light theme keeps the solid blue - it reads well on a light background. */
html:not([data-theme="light"]) .hero-title em {
  color: #F5F5F0;
  text-shadow:
    0 0 .04em rgba(0, 71, 255, 1),
    0 0 .1em  rgba(0, 71, 255, 1),
    0 0 .22em rgba(0, 71, 255, .85),
    0 0 .45em rgba(0, 71, 255, .5);
}