/* pages/landing/computer-3d/css/inline-3d.css
   ════════════════════════════════════════════════════════════════════
   הטמעת model-viewer inline ב-Hero, גישת IMMEDIATE.

   הקונספט (26/5/2026, אחרי איטרציה ראשונה),
   1. המודל מופיע ישר ב-Hero, auto-rotate ב-22deg/sec.
      auto-rotate מוכיח שזה אובייקט תלת-מימדי שניתן לאינטראקציה,
      בלי צורך בהסבר טקסטואלי. קהל 50-75 רואה תנועה ומבין.
   2. אצבע על המודל לוקחת שליטה, ה-touch-action: pan-y מבטיח שגלילה
      אנכית תמיד עוברת לדף, בלי scroll-trap. סיבוב = swipe ימינה/שמאלה.
   3. Hint עדין בתחתית "סובבו באצבע, ימינה ושמאלה", נעלם בסיבוב ראשון.
   4. Sticky CTA bar מופיע אחרי סיבוב ראשון (camera-change user),
      "אהבתם לסובב? יש עוד 17 רכיבים, 397₪". אם המשתמש גלל בלי לסובב,
      הבר מופיע אחרי scroll מעבר ל-Hero (IntersectionObserver fallback).
   ════════════════════════════════════════════════════════════════════ */

/* ─── BUG FIX קריטי, [hidden] חייב לעקוף display ───────────────
   ה-HTML attribute hidden אמור להשתיק display: none, אבל אם CSS
   אחר מגדיר display: flex / inline-flex / block, הוא דורס אותו.
   הכלל הזה מבטיח שכל אלמנט עם [hidden] באמת לא נראה. */
.hero-3d-wrap [hidden],
.sticky-cta-bar[hidden] {
  display: none !important;
}

/* ─── HERO 3D WRAP ─────────────────────────────────────────── */
.hero-3d-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 500px;
  margin-inline-start: auto;
  border-radius: 24px;
  overflow: hidden;
  /* רקע סטודיו נקי, גרדיאנט בהיר שיגרום למודל הכהה להתבלט */
  background: radial-gradient(ellipse at center, #FFFFFF 0%, #EFEFEC 100%);
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  border: 2px solid rgba(246,166,126,0.4);
}

/* ─── ה-MODEL VIEWER ─────────────────────────────────────────
   זה הלב, ה-3D הוא מה שהמשתמש רואה ראשון.
   touch-action: pan-y הוא ה-FIX הקריטי לקהל 50-75 על מובייל,
   גלילה אנכית עוברת לדף (pan-y), swipe אופקי מסובב את המודל. */
.hero-3d-wrap model-viewer {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: pan-y;
  --poster-color: transparent;
  background: transparent;
  outline: none;
  border: 0;
  /* fade-in רך כשהמודל נטען */
  animation: model-fade-in 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes model-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ─── POSTER LOADER ─────────────────────────────────────────
   מוצג ע"י model-viewer (slot="poster") עד שה-GLB טעון. */
.hero-model-loader {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: radial-gradient(ellipse at center, #FFFFFF 0%, #EFEFEC 100%);
  border-radius: inherit;
  pointer-events: none;
}
.hero-model-loader-icon {
  color: var(--orange-deep);
  animation: model-loader-spin 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  filter: drop-shadow(0 6px 16px rgba(246, 166, 126, 0.35));
}
.hero-model-loader strong {
  color: #1D1D1F;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.hero-model-loader span {
  color: #6E6E73;
  font-size: 0.85rem;
}
@keyframes model-loader-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ─── ROTATE HINT ──────────────────────────────────────────
   צף בתחתית הבמת ה-3D, מוצג מהטעינה עד הסיבוב הראשון.
   הסבר עדין שלא חוסם את הצפייה במודל. */
.rotate-hint {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(15, 26, 46, 0.88);
  color: white;
  border: 1.5px solid rgba(246, 166, 126, 0.5);
  border-radius: 100px;
  padding: 10px 18px 10px 14px;
  font-size: 0.92rem;
  font-weight: 600;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  /* fade-in רך כשהמודל מופיע */
  animation: hint-fade-in 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.5s backwards;
  transition: opacity 0.4s ease;
}
.rotate-hint[data-state="hidden"] {
  opacity: 0;
}

/* ─── MODEL LABEL ──────────────────────────────────────────
   תווית "כונן מהיר (NVMe)" קבועה במרכז העליון של ה-3D wrap.
   28/5/2026, עומר ביקש לחבר ויזואלית בין המודל המסתובב
   לבין הסרטון שמדבר על NVMe למטה בדף. תמיד גלוי (לא נעלם).
   קונצנזוס Gemini 3.5 + GPT 5.5, pill cream + navy + נקודה כתומה. */
.model-label {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cream, #fff7ed);
  color: var(--navy, #1a4a6b);
  border: 1.5px solid rgba(26, 74, 107, 0.15);
  border-radius: 100px;
  padding: 8px 16px;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(26, 74, 107, 0.12);
  /* fade-in רך עם המודל */
  animation: model-label-fade-in 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s backwards;
}
.model-label-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--orange, #E8854A);
  flex-shrink: 0;
  /* פולס עדין כדי שהעין תיתפס לתווית בלי להסיח את הדעת מהמודל */
  animation: model-label-dot-pulse 2.2s ease-in-out infinite;
}
@keyframes model-label-fade-in {
  from { opacity: 0; transform: translate(-50%, -6px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes model-label-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.65; transform: scale(0.85); }
}
.hint-hand {
  color: var(--orange);
  width: 28px;
  height: 28px;
  /* פולס עדין שמושך תשומת לב בלי לרמוז על כיוון מסוים, ה-arrows-out-cardinal
     מ-Phosphor מספר את הסיפור של "לכל הכיוונים". */
  animation: hint-pulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes hint-fade-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes hint-pulse {
  0%, 100% { transform: scale(1); opacity: 0.92; }
  50% { transform: scale(1.15); opacity: 1; }
}

/* ─── STICKY CONVERSION BAR ──────────────────────────────────
   מופיע אחרי סיבוב ראשון או scroll מעבר ל-Hero. */
.sticky-cta-bar {
  position: fixed;
  bottom: 0;
  inset-inline: 0;
  z-index: 90;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  color: white;
  /* safe-area-inset, iPhone X+ home indicator לא חוסם.
     27/5/2026, ישיבת קבינט. */
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.3);
  border-top: 2px solid var(--orange);
  /* slide-in מהמטה בכניסה ראשונה */
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* כשה-sticky CTA גלוי, body מקבל padding-bottom כדי שתוכן הדף
   (footer) לא יוסתר מאחורי הבר.
   27/5/2026, ישיבת קבינט GPT, "Sticky CTA can cover content". */
body.has-sticky-cta {
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 480px) {
  body.has-sticky-cta {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
}
.sticky-cta-bar.is-visible {
  transform: translateY(0);
}
.sticky-cta-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}
.sticky-cta-text strong {
  font-size: 1rem;
  font-weight: 800;
  color: white;
}
.sticky-cta-text span {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.85);
}
.sticky-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--orange-deep);
  color: white;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 0.98rem;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(232,133,74,0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sticky-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(232,133,74,0.5);
}
.sticky-cta-arrow {
  font-size: 1.15rem;
}
.sticky-cta-close {
  background: transparent;
  border: none;
  /* 0.8 במקום 0.6, נראות טובה יותר על navy (Sweep C, WCAG).
     27/5/2026. */
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  /* min 44x44, WCAG 2.5.5 Target Size Level AAA, נדרש לקהל 50-75
     עם אצבעות שמנמנות יותר. flex centering מבטיח שה-SVG עדיין
     ממורכז למרות הקופסה הגדולה. */
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: color 0.15s ease, background 0.15s ease;
  flex-shrink: 0;
}
.sticky-cta-close:hover {
  color: white;
  background: rgba(255,255,255,0.1);
}

/* ─── DEMO VIDEO FRAME (חדש 26/5/2026, ללא autoplay) ──────
   הסרטון של ה-NVMe, ללא autoplay (בקשת עומר). כפתור Play כתום
   גדול במרכז, נעלם בלחיצה. דפוס YouTube/Facebook מוכר לקהל 50-75. */
.demo-video-frame {
  position: relative;
  max-width: 540px;
  margin: 24px auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  border: 2px solid var(--orange-light);
  background: var(--navy-dark);
}
.demo-video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 540px;
  object-fit: contain;
  /* controls מוסתרים עד אחרי הלחיצה הראשונה (ה-JS מוסיף .has-played) */
}
.demo-video-frame:not(.has-played) .demo-video {
  pointer-events: none;
}
/* אחרי שהסרטון הופעל, לחיצה על השטח שלו = toggle play/pause */
.demo-video-frame.has-played .demo-video {
  cursor: pointer;
}

/* כפתור Play גדול במרכז כשהסרטון מושהה (אחרי הפעלה ראשונה).
   נותן feedback ויזואלי שניתן ללחוץ כדי להמשיך. נעלם בעת ניגון. */
.demo-video-frame.has-played.is-paused::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: rgba(232, 133, 74, 0.92);
  border: 3px solid white;
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  background-size: 36px;
  background-position: 56% 50%;
  background-repeat: no-repeat;
  box-shadow: 0 10px 30px rgba(232,133,74,0.45), 0 4px 12px rgba(0,0,0,0.3);
  pointer-events: none;
  animation: paused-play-fade 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes paused-play-fade {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* כפתור Play ענק כתום במרכז, נעלם אחרי לחיצה */
.demo-video-play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(0, 0, 0, 0.25);
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.25s ease, opacity 0.35s ease;
  -webkit-tap-highlight-color: transparent;
}
.demo-video-play:hover {
  background: rgba(0, 0, 0, 0.35);
}
.demo-video-play:hover .demo-video-play-circle {
  transform: scale(1.08);
  box-shadow: 0 14px 40px rgba(246, 166, 126, 0.65), 0 6px 16px rgba(0,0,0,0.4);
}
.demo-video-frame.has-played .demo-video-play {
  opacity: 0;
  pointer-events: none;
}
.demo-video-play-circle {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: var(--orange-deep);
  border: 4px solid white;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 32px rgba(232, 133, 74, 0.55), 0 4px 12px rgba(0,0,0,0.3);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  animation: play-pulse 2.2s ease-in-out infinite;
}
.demo-video-play-circle svg {
  /* תיקון אופטי, המשולש לא מאוזן ב-bounding box */
  margin-inline-start: 6px;
}
@keyframes play-pulse {
  0%, 100% {
    box-shadow: 0 12px 32px rgba(232, 133, 74, 0.55), 0 4px 12px rgba(0,0,0,0.3), 0 0 0 0 rgba(232, 133, 74, 0.4);
  }
  50% {
    box-shadow: 0 12px 32px rgba(232, 133, 74, 0.55), 0 4px 12px rgba(0,0,0,0.3), 0 0 0 18px rgba(232, 133, 74, 0);
  }
}
.demo-video-play-label {
  background: rgba(15, 26, 46, 0.92);
  color: white;
  padding: 10px 22px;
  border-radius: 100px;
  font-size: 1.05rem;
  font-weight: 700;
  border: 1.5px solid rgba(246, 166, 126, 0.5);
  white-space: nowrap;
}

@media (max-width: 760px) {
  .demo-video-play-circle {
    width: 88px;
    height: 88px;
  }
  .demo-video-play-circle svg {
    width: 36px;
    height: 36px;
  }
  .demo-video-play-label {
    font-size: 0.95rem;
    padding: 8px 18px;
  }
}

/* ─── MOBILE ADJUSTMENTS (90% מהתעבורה) ──────────────────── */
@media (max-width: 760px) {
  .hero-3d-wrap {
    margin-inline: auto;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 18px;
  }
  .rotate-hint {
    font-size: 0.86rem;
    padding: 8px 14px 8px 10px;
    bottom: 14px;
  }
  .hint-hand {
    width: 26px;
    height: 26px;
  }
  .model-label {
    font-size: 0.88rem;
    padding: 7px 14px;
    top: 12px;
  }
  .model-label-dot {
    width: 8px;
    height: 8px;
  }

  /* Sticky bar במובייל, layout דחוס יותר */
  .sticky-cta-bar {
    padding: 12px 14px;
    gap: 10px;
  }
  .sticky-cta-text strong {
    font-size: 0.92rem;
  }
  .sticky-cta-text span {
    font-size: 0.78rem;
  }
  .sticky-cta-btn {
    padding: 11px 16px;
    font-size: 0.9rem;
  }
  .sticky-cta-close {
    /* במובייל, אנחנו לא קטנים יותר מ-44x44 (WCAG).
       התיקון של 2px → 44x44 נעשה ב-Sweep D + ישיבת קבינט 27/5/2026.
       padding 8 במקום 10 לחיסכון מקום, אבל min-width/height עדיין 44. */
    min-width: 44px;
    min-height: 44px;
    padding: 8px;
  }

  .demo-video-frame {
    margin: 20px auto;
    border-radius: 14px;
  }
}

/* ה-Sticky CTA מסתיר את ה-WhatsApp Float כשהוא מופיע, מניעת חפיפה.
   ה-JS מוסיף body.has-sticky-cta כשהבר מופיע, וה-CSS מרים את ה-WhatsApp
   Float מעל הבר כדי שיהיו שניהם נגישים בלי להתנגש. */
body.has-sticky-cta .whatsapp-float {
  /* 96 = sticky CTA גובה (~70px) + רווח. + safe-area-inset כדי לא
     להיתפס בהום אינדיקייטור של iPhone X+. */
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  transition: bottom 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}