/* Home banner carousel: the studio hero, the mobile-apps banner with floating phones, then the websites banner.
   Slide 1 keeps its original layout and alone sets the banner's height; slide 2 overlays it
   and fits itself inside, so the banner size never changes. */
html body .hero.hero-deck{display:grid;align-items:stretch}
.hero-deck>.hero-slide{grid-area:1/1;position:relative;min-width:0;display:flex;align-items:center;min-height:560px}
.hero-deck>.hero-slide:not(.is-active){visibility:hidden;pointer-events:none;transition:visibility 0s linear .9s}
.hero-deck>.hero-slide.is-active{visibility:visible;transition:visibility 0s}
.hero-deck>.hero-slide-apps{z-index:1;position:absolute;inset:0;min-height:0}

/* ---- slide 1 leaves: text drifts out, the photo eases back, the hologram powers down ---- */
.hero-slide-main .hero-bg,.hero-slide-main .hero-gl,.hero-slide-main .hero-scrim{transition:opacity .9s ease,scale 1.4s cubic-bezier(.2,.7,.2,1)}
.hero-slide-main .hero-txt{transition:opacity .6s ease,translate .8s cubic-bezier(.2,.7,.2,1)}
.hero-slide-main .holo{transition:opacity .45s ease,scale .6s cubic-bezier(.5,0,.75,0),rotate .6s ease-in}
.hero-slide-main:not(.is-active) .hero-bg{opacity:0;scale:1.06}
.hero-slide-main:not(.is-active) .hero-gl,.hero-slide-main:not(.is-active) .hero-scrim{opacity:0}
.hero-slide-main:not(.is-active) .hero-txt{opacity:0;translate:calc(-40px*var(--hd-dir,1)) 0}
.hero-slide-main:not(.is-active) .holo{opacity:0;scale:.2;rotate:-120deg}
.hero-slide-main.is-active .hero-txt{transition-delay:.25s}
.hero-slide-main.is-active .holo{transition:opacity .5s ease .55s,scale .9s cubic-bezier(.34,1.56,.64,1) .45s,rotate .9s cubic-bezier(.2,.8,.2,1) .45s}

/* ---- slide 2: the mobile-apps banner ---- */
.hero-slide-apps{background:#080101;transition:opacity .9s ease}
.hero-slide-apps:not(.is-active){opacity:0}
.hd-art{position:absolute;inset:0;container-type:size;overflow:hidden;pointer-events:none}
.hd-art>*{position:absolute}
/* backdrop + phones share one artwork box (--bw x --bh, origin --ox), sized in the art's
   container units so it tracks the banner; resolved on the children, where cq units apply */
.hd-art>*{--bh:min(88cqh,calc(100cqw*.9*941/1672));--bw:calc(var(--bh)*1672/941);--ox:calc(97cqw - var(--bw))}
.hd-backdrop,.hd-phone{opacity:0}
.hd-backdrop{left:var(--ox);top:50%;width:var(--bw);height:var(--bh);translate:0 -50%;scale:1.08;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(transparent,#000 8%,#000 92%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(transparent,#000 8%,#000 92%,transparent);mask-composite:intersect;transition:opacity 1s ease,scale 1.6s cubic-bezier(.2,.7,.2,1)}
.hd-phone{height:auto;top:calc(50% - var(--bh)/2 + var(--bh)*var(--y));left:calc(var(--ox) + var(--bw)*var(--x));width:calc(var(--bw)*var(--w));translate:0 60px;transition:opacity .5s ease,translate .5s ease}
.hd-store{--x:.424043;--y:.323061;--w:.182416}
.hd-game{--x:.606459;--y:.166844;--w:.183014}
.hd-ar{--x:.789474;--y:.02763;--w:.180024}
.hero-slide-apps.is-active .hd-art.is-loaded .hd-backdrop{opacity:1;scale:1}
.hero-slide-apps.is-active .hd-art.is-loaded .hd-phone{opacity:1;translate:0 0;transition:opacity .8s ease var(--d),translate 1.1s cubic-bezier(.16,1,.3,1) var(--d)}
.hd-store{--d:.3s}.hd-game{--d:.42s}.hd-ar{--d:.54s}
/* gentle idle float once they have landed; paused whenever the slide or banner is out of view */
.hd-phone{animation:hd-float 6s ease-in-out infinite;animation-play-state:paused}
.hd-game{animation-duration:6.8s;animation-delay:-2.2s}
.hd-ar{animation-duration:7.4s;animation-delay:-4.1s}
.hero-deck:not(.is-offscreen) .hero-slide-apps.is-active .hd-phone{animation-play-state:running}
@keyframes hd-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-1.8%) rotate(.35deg)}}

.hd-txt{position:relative;z-index:2;padding:64px 48px;max-width:min(540px,47%)}

.hd-txt::before{content:"";position:absolute;inset:-40% -30% -40% -60%;z-index:-1;background:radial-gradient(closest-side,rgba(8,1,1,.85),rgba(8,1,1,0));pointer-events:none}
.hd-eyebrow{font-family:var(--body);font-weight:600;font-size:.72rem;letter-spacing:.24em;color:var(--hot-text,#ff4d64);margin:0 0 18px}
.hd-title{font-family:var(--display);font-weight:700;font-size:clamp(1.55rem,4.4vw,3.3rem);line-height:1.06;letter-spacing:.02em;margin:0}
.hd-title em{font-style:normal;color:var(--hot)}
.hd-lead{color:var(--dim);max-width:40ch}
.hd-txt .hero-cta{gap:14px 26px}
.hd-txt>*{transition:opacity .45s ease,translate .45s ease}
.hero-slide-apps:not(.is-active) .hd-txt>*{opacity:0;translate:calc(40px*var(--hd-dir,1)) 0}
.hero-slide-apps.is-active .hd-txt>*{transition:opacity .7s ease,translate .9s cubic-bezier(.16,1,.3,1)}
.hero-slide-apps.is-active .hd-txt>:nth-child(1){transition-delay:.15s}
.hero-slide-apps.is-active .hd-txt>:nth-child(2){transition-delay:.22s}
.hero-slide-apps.is-active .hd-txt>:nth-child(3){transition-delay:.29s}
.hero-slide-apps.is-active .hd-txt>:nth-child(4){transition-delay:.36s}
.hero-slide-apps.is-active .hd-txt>:nth-child(5){transition-delay:.43s}

/* RTL: text sits on the right, so the phone group moves left; the art itself is not mirrored,
   keeping the phones rising left to right */
[dir="rtl"] .hd-art>*{--ox:calc(3cqw - var(--bw)*.4)}
[dir="rtl"] .hd-txt::before{inset:-40% -60% -40% -30%}

/* ---- slide 3: the websites banner, a tilted desktop and phone (shares slide 2's text and fade rules) ---- */
.hd-art-web>img{height:auto;opacity:0;translate:0 40px;transition:opacity .5s ease,translate .5s ease}
.hd-web-desk{--dw:min(52cqw,118cqh);width:var(--dw);right:7cqw;top:50%;margin-top:calc(var(--dw)*-.34);border-radius:10px;border:1px solid rgba(255,255,255,.18);box-shadow:0 30px 60px rgba(0,0,0,.7),0 0 80px rgba(200,16,46,.28);transform:perspective(1800px) rotateY(-16deg) rotateX(6deg) rotateZ(-1deg)}
.hd-web-phone{--pw:min(12.5cqw,30cqh);width:var(--pw);right:3cqw;top:50%;margin-top:calc(var(--pw)*-.78);border-radius:calc(var(--pw)*.13);border:calc(var(--pw)*.035) solid #1a1114;box-shadow:0 26px 50px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.15);transform:perspective(1800px) rotateY(-12deg) rotateX(5deg) rotateZ(2deg)}
.hero-slide-web.is-active .hd-art-web.is-loaded>img{opacity:1;translate:0 0;transition:opacity .8s ease var(--d),translate 1.1s cubic-bezier(.16,1,.3,1) var(--d)}
.hd-web-desk{--d:.3s}.hd-web-phone{--d:.5s}
[dir="rtl"] .hd-web-desk{right:auto;left:9cqw;transform:perspective(1800px) rotateY(16deg) rotateX(6deg) rotateZ(1deg)}
[dir="rtl"] .hd-web-phone{right:auto;left:3cqw;transform:perspective(1800px) rotateY(12deg) rotateX(5deg) rotateZ(-2deg)}

/* ---- arrows on the banner's sides, dots underneath; both run left to right in every language ---- */
.hero-deck-nav{direction:ltr;display:flex;align-items:center;justify-content:center;margin:10px auto -12px}
.hero-deck-nav[hidden]{display:none}
.hd-arrow{position:absolute;z-index:4;top:50%;width:38px;height:38px;margin-top:-19px;border-radius:50%;display:grid;place-items:center;padding:0;cursor:pointer;color:var(--bone);
  background:radial-gradient(circle at 50% 28%,rgba(255,255,255,.1),rgba(255,255,255,0) 62%),rgba(20,9,12,.62);
  border:1px solid rgba(240,234,228,.18);box-shadow:0 8px 24px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08);
  opacity:.72;transition:opacity .3s,border-color .25s,background-color .25s,box-shadow .25s,color .25s,scale .2s}
.hd-arrow[hidden]{display:none}
.hd-prev{left:6px}.hd-next{right:6px}
.hero-deck:hover .hd-arrow,.hd-arrow:focus-visible{opacity:1}
.hd-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:translate .25s cubic-bezier(.2,.8,.2,1)}
.hd-arrow::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(200,16,46,0);transition:border-color .3s,inset .3s}
.hd-arrow:hover{color:#fff;border-color:var(--hot);background-color:rgba(200,16,46,.85);box-shadow:0 0 0 1px rgba(200,16,46,.4),0 8px 28px rgba(200,16,46,.45)}
.hd-arrow:hover::after{inset:-7px;border-color:rgba(200,16,46,.35)}
.hd-prev:hover svg{translate:-2px 0}
.hd-next:hover svg{translate:2px 0}
.hd-arrow:active{scale:.93}
.hd-arrow:focus-visible,.hd-dot:focus-visible{outline:2px solid var(--hot);outline-offset:3px}
.hd-dots{display:flex;gap:4px}
.hd-dot{width:40px;height:24px;display:grid;place-items:center;padding:0;border:0;background:none;cursor:pointer}
.hd-dot span{position:relative;display:block;width:8px;height:8px;border-radius:8px;background:rgba(240,234,228,.28);overflow:hidden;transition:width .45s cubic-bezier(.2,.8,.2,1),background-color .3s}
.hd-dot:hover span{background:rgba(240,234,228,.55)}
.hd-dot[aria-current="true"] span{width:34px;background:rgba(240,234,228,.2)}
.hd-dot span::after{content:"";position:absolute;inset:0;background:var(--hot);transform-origin:left;transform:scaleX(0)}
.hd-dot[aria-current="true"] span::after{transform:scaleX(1)}
/* autoplay: the active dot fills up; hero-deck.js advances when the fill ends */
.hero-deck-nav.is-auto .hd-dot[aria-current="true"] span::after{animation:hd-progress var(--hd-time,7s) linear forwards}
.hero-deck-nav.is-auto.is-paused .hd-dot[aria-current="true"] span::after{animation-play-state:paused}
@keyframes hd-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---- stacked layouts: art band on top, text beneath (mirrors how slide 1 stacks) ---- */
@media(max-width:900px){
  .hero-deck>.hero-slide{display:block;min-height:0}
  .hero-deck>.hero-slide-apps{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}
  .hd-art{position:relative;inset:auto;flex:1 1 0;min-height:0;height:auto}
  /* zoom so the three phones fill the band, their group centred */
  .hd-art>*,[dir="rtl"] .hd-art>*{--bh:min(calc(150cqw*941/1672),100cqh);--bw:calc(var(--bh)*1672/941);--ox:calc(50cqw - var(--bw)*.695)}
  .hd-art::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(180deg,transparent,#080101)}
  .hd-txt{max-width:none;padding:10px 28px 30px}
  .hd-txt::before{display:none}
  /* the slide must fit inside slide 1's original height: drop the eyebrow, keep the art band */
  .hd-eyebrow{display:none}
  .hd-art{min-height:170px}
  .hd-txt .plat{margin:14px 0 12px}
  .hd-txt .hero-cta{margin-top:22px}
  .hd-title{font-size:clamp(1.55rem,8.5vw,2.6rem)}
  /* stacked: arrows sit on the image band, clear of the text */
  .hd-arrow{top:140px;width:40px;height:40px;margin-top:-20px;opacity:.9}
  .hd-prev{left:10px}.hd-next{right:10px}
  .hd-web-desk,[dir="rtl"] .hd-web-desk{--dw:min(84cqw,165cqh);left:4cqw;right:auto;margin-top:calc(var(--dw)*-.33);transform:perspective(1800px) rotateY(-14deg) rotateX(6deg) rotateZ(-1deg)}
  .hd-web-phone,[dir="rtl"] .hd-web-phone{--pw:min(23cqw,50cqh);right:3cqw;left:auto;margin-top:calc(var(--pw)*-.95);transform:perspective(1800px) rotateY(-10deg) rotateX(5deg) rotateZ(2deg)}

}
/* Hebrew stacks slide 1 up to 1100px (site.css), so slide 2 follows suit there */
@media(min-width:901px) and (max-width:1100px){
  html[lang="he"] .hero-deck>.hero-slide-main{display:block;min-height:0}
  html[lang="he"] .hero-deck>.hero-slide-apps{flex-direction:column;align-items:stretch;justify-content:flex-start;min-height:0}
  html[lang="he"] .hd-art{position:relative;inset:auto;flex:1 1 0;min-height:0;height:auto}
  html[lang="he"] .hd-art>*,html[lang="he"][dir="rtl"] .hd-art>*{--bh:min(calc(150cqw*941/1672),100cqh);--bw:calc(var(--bh)*1672/941);--ox:calc(50cqw - var(--bw)*.695)}
  html[lang="he"] .hero-deck>.hero-slide-apps{display:flex}
  html[lang="he"] .hd-art::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(180deg,transparent,#080101)}
  html[lang="he"] .hd-txt{max-width:none;padding:18px 28px 44px}
  html[lang="he"] .hd-arrow{top:180px}
  html[lang="he"] .hd-txt::before{display:none}
  html[lang="he"] .hd-web-desk{--dw:min(84cqw,165cqh);left:4cqw;right:auto;margin-top:calc(var(--dw)*-.33);transform:perspective(1800px) rotateY(-14deg) rotateX(6deg) rotateZ(-1deg)}
  html[lang="he"] .hd-web-phone{--pw:min(23cqw,50cqh);right:3cqw;left:auto;margin-top:calc(var(--pw)*-.95);transform:perspective(1800px) rotateY(-10deg) rotateX(5deg) rotateZ(2deg)}
}
@media(prefers-reduced-motion:reduce){
  .hero-deck *,.hero-deck-nav *{transition-duration:.01s!important;transition-delay:0s!important;animation:none!important}
  .hero-deck>.hero-slide:not(.is-active){transition:visibility 0s}
}

/* The accessibility menu's text-size option zooms <main>; the banner is a fixed composition
   (photo, hologram, phones) whose breakpoints don't see that zoom, so it would squeeze into a
   narrower box and push the headline over the photo. Undo the zoom for the banner only. */
.rc-a11y-size .hero-deck{zoom:calc(1/var(--rc-a11y-scale,1))}