/* ============================================================
   הירו · שדרוג ארבעת הטאבים (27.10.2026)
   משחקים: גיימפליי אמיתי במרינה (וידאו) במקום סטיל.
   אתרים: החלון של השירון נשאר, ולידו טלפון שמחליף אתרים נוספים שבניתי.
   ספר: איורים מתוך הספר מרחפים סביב הספר, כמו דפים שהתעופפו ממנו.
   תוכן: הטלפון הראשי מחליק למעלה כמו פיד, והמונה מתעדכן לכל סרטון.
   ============================================================ */

/* ---------- משחקים ---------- */
.scene--game .scene__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 10, 34, .25), transparent 30%, transparent 70%, rgba(8, 10, 34, .35)); pointer-events: none; }

/* ---------- אתרים ---------- */
.scene--site .win { left: 40%; width: min(52%, 400px); }
.sitephone { position: absolute; z-index: 5; right: 6%; top: 15%; bottom: 7%; aspect-ratio: 9 / 18.6; padding: 5px; border-radius: 24px; background: #070818; border: 3px solid var(--ink); box-shadow: 7px 9px 0 var(--ink), inset 0 0 0 1.5px #2b2f5e;
  opacity: 0; transform: translate(26px, 24px) rotate(9deg); transition: opacity .5s var(--ease) .55s, transform .9s var(--spring) .55s; }
.scene.is-on .sitephone { opacity: 1; transform: rotate(4deg); }
.sitephone::before { content: ""; position: absolute; z-index: 3; top: 10px; left: 50%; width: 30%; height: 10px; translate: -50% 0; border-radius: 8px; background: #070818; }
.sitephone__scr { position: absolute; inset: 5px; border-radius: 19px; overflow: hidden; background: #0c1030; clip-path: inset(100% 0 0 0 round 19px); transition: clip-path .7s cubic-bezier(.77, 0, .18, 1); }
.sitephone__scr.is-on { clip-path: inset(0 0 0 0 round 19px); z-index: 1; }
.sitephone__scr.is-prev { clip-path: inset(0 0 0 0 round 19px); z-index: 0; }
.sitephone__scr img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sitephone__scr.is-on img { animation: site-peek 4.6s ease-in-out .9s both; }
@keyframes site-peek { 0%, 20% { transform: translateY(0); } 60%, 100% { transform: translateY(-9%); } }
/* שם האתר: תווית מתחת לטלפון */
.sitephone__scr b { position: absolute; z-index: 2; left: 50%; bottom: 10px; translate: -50% 0; max-width: 92%; padding: 5px 10px; border-radius: var(--r-pill); background: var(--gold); color: var(--ink); border: 2px solid var(--ink); box-shadow: 2px 3px 0 var(--ink); font: 900 .78rem/1.1 var(--f-brand); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(8px); transition: opacity .3s .35s, transform .5s var(--spring) .35s; }
.sitephone__scr.is-on b { opacity: 1; transform: none; }
.sitecount { position: absolute; z-index: 6; top: 7%; right: 3.5%; padding: 6px 12px; border-radius: 10px; background: rgba(15, 20, 50, .88); border: 2px solid var(--ink); color: #fff; font: 700 .82rem/1.1 var(--f-brand); box-shadow: 3px 3px 0 var(--ink); rotate: 3deg;
  opacity: 0; transform: translateY(10px); transition: opacity .4s .9s, transform .6s var(--spring) .9s; }
.sitecount b { color: var(--gold); font-size: 1.1em; }
.scene.is-on .sitecount { opacity: 1; transform: none; }

/* ---------- ספר ---------- */
.bookfly { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.bookfly i { --x: 0%; --y: 0%; --r: 0deg; --s: 1; position: absolute; left: 50%; top: 52%; width: 15%; aspect-ratio: 1; padding: 4px; border-radius: 6px; background: #fbf6ea; border: 2px solid var(--ink); box-shadow: 4px 5px 0 rgba(10, 11, 34, .7);
  opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(0deg); transition: opacity .5s var(--ease), transform 1.1s var(--spring); transition-delay: calc(.5s + var(--k) * .09s); }
.bookfly i img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.bookfly i:nth-child(1) { --x: -195%; --y: -135%; --r: -11deg; }
.bookfly i:nth-child(2) { --x: 190%; --y: -150%; --r: 9deg; --s: .9; }
.bookfly i:nth-child(3) { --x: -235%; --y: 30%; --r: 7deg; --s: .85; }
.bookfly i:nth-child(4) { --x: 230%; --y: 10%; --r: -8deg; }
.bookfly i:nth-child(5) { --x: 135%; --y: 165%; --r: -5deg; --s: .8; }
.bookfly i:nth-child(6) { --x: 245%; --y: 150%; --r: 12deg; --s: .75; }
.scene.is-on .bookfly i { opacity: 1; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(var(--s)) rotate(var(--r)); }
.scene.is-on .bookfly i img { animation: page-bob 5s ease-in-out infinite; animation-delay: calc(var(--k) * -.8s); }
@keyframes page-bob { 50% { transform: translateY(-6px) rotate(1.5deg); } }

/* ---------- תוכן: פיד שמחליק למעלה ---------- */
.reelfeed img { transform: translateY(100%); transition: transform .75s cubic-bezier(.77, 0, .18, 1); }
.reelfeed img.is-on { transform: none; z-index: 1; }
.reelfeed img.is-prev { transform: translateY(-100%); }
.reelfeed img.is-snap { transition: none; }
.reelfeed::after { content: ""; position: absolute; z-index: 2; left: 50%; bottom: 14px; width: 34%; height: 4px; translate: -50% 0; border-radius: 4px; background: rgba(255, 255, 255, .7); }
/* רמז של אגודל שגולל */
.reelphone--main::after { content: ""; position: absolute; z-index: 6; right: 18%; bottom: 22%; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .55); border: 2px solid rgba(255, 255, 255, .9); opacity: 0; pointer-events: none; }
.reelphone--main.is-swipe::after { animation: thumb .7s cubic-bezier(.45, 0, .2, 1); }
@keyframes thumb { 0% { opacity: 0; transform: translateY(0) scale(.7); } 20% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-120px) scale(.9); } }
[data-reelviews] { display: inline-block; }
.reelphone__views.is-bump [data-reelviews] { animation: views-bump .5s var(--spring); }
@keyframes views-bump { 0% { transform: translateY(8px); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* ---------- טלפון ---------- */
@media (max-width: 600px) {
  .scene--site .win { left: 38%; width: 60%; top: 10%; bottom: 10%; }
  .sitephone { right: 4%; top: 18%; bottom: 8%; border-radius: 18px; padding: 4px; }
  .sitephone__scr { inset: 4px; border-radius: 14px; }
  .sitephone__scr b { font-size: .66rem; padding: 4px 8px; bottom: 7px; }
  .sitecount { font-size: .72rem; top: 5%; }
  .bookfly i { width: 19%; }
  .bookfly i:nth-child(1) { --x: -150%; --y: -170%; } .bookfly i:nth-child(2) { --x: 150%; --y: -185%; }
  .bookfly i:nth-child(3) { --x: -200%; --y: 10%; } .bookfly i:nth-child(4) { --x: 195%; --y: 0%; }
  .bookfly i:nth-child(5) { --x: -140%; --y: 185%; } .bookfly i:nth-child(6) { --x: 150%; --y: 180%; }
}

@media (prefers-reduced-motion: reduce) {
  .sitephone__scr img, .bookfly i img, .reelphone--main::after { animation: none !important; }
  .reelfeed img, .sitephone__scr { transition: none !important; }
}
html.reduce-motion .sitephone__scr img, html.reduce-motion .bookfly i img, html.reduce-motion .reelphone--main::after { animation: none !important; }

/* ---------- לוגואים: שתי רצועות, לקוחות ופרויקטים (27.10.2026) ----------
   הרצועה נבנית LTR ונעה שמאלה (מימין לשמאל על המסך), חצי אחרי חצי, בלי קפיצה */
.logos { display: grid; gap: clamp(18px, 2.4vw, 30px); }
.logos__band { overflow: hidden; direction: ltr; }
.logos__band .logos__label { direction: rtl; }
.logos__band .logos__label { margin-bottom: 14px; }
.logos .logos__track { direction: ltr; width: max-content; animation: logos-go var(--dur, 40s) linear infinite; mask-image: none; }
.logos__band { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
@keyframes logos-go { from { transform: translateX(0); } to { transform: translateX(calc(var(--half, 50%) * -1)); } }
.logos__row img { max-width: 210px; }
.logos__band--projects .logos__row img { opacity: .7; }
.logos__band--projects .logos__label { color: var(--faint); }
@media (prefers-reduced-motion: reduce) { .logos .logos__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } }
html.reduce-motion .logos .logos__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
html.reduce-motion .logos__row[aria-hidden], .logos__row[aria-hidden]:is(html.reduce-motion *) { display: none; }