/* ===================================================
   OBYS AGENCY MOTION SYSTEM - AESTHETICS & ANIMATIONS
   High Performance | Zero-Lag Mobile Slide Engine
   Ali Sarah Electronics Trading Co. LLC
   =================================================== */

/* ── Hardware Compositing for Fast Scroll Elements ── */
.hero-video-bg,
.panoramic-video-track,
.apple-slider-track {
  will-change: transform;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ── Mobile Touch Scroll Smoothness ── */
@media (hover: none), (pointer: coarse) {
  html, body {
    -webkit-overflow-scrolling: touch;
  }
}

/* ── 1. Custom Magnetic Fluid Cursor (Desktop Only) ── */
  html.has-custom-cursor,
  html.has-custom-cursor body,
  html.has-custom-cursor a,
  html.has-custom-cursor button,
  html.has-custom-cursor [role="button"],
  html.has-custom-cursor input[type="button"],
  html.has-custom-cursor input[type="submit"],
  html.has-custom-cursor .nav-link,
  html.has-custom-cursor .btn-primary,
  html.has-custom-cursor .btn-secondary,
  html.has-custom-cursor .category-card,
  html.has-custom-cursor .product-card,
  html.has-custom-cursor .apple-slider-card,
  html.has-custom-cursor .chapter-btn {
    cursor: auto;
  }

  /* Keep native I-beam cursor for typing in text input fields */
  html.has-custom-cursor input[type="text"],
  html.has-custom-cursor input[type="email"],
  html.has-custom-cursor input[type="tel"],
  html.has-custom-cursor input[type="number"],
  html.has-custom-cursor input[type="search"],
  html.has-custom-cursor input[type="password"],
  html.has-custom-cursor textarea,
  html.has-custom-cursor select {
    cursor: text !important;
  }
}

.obys-cursor-dot,
.obys-cursor-follower {
  display: none !important;
}
  position: fixed;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  pointer-events: none;
  z-index: 2147483646;
  transform: translate(-50%, -50%);
  transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
              height 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
              background 0.3s ease,
              border-color 0.3s ease,
              opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}

.obys-cursor-text {
  font-family: var(--font-main, 'Outfit', sans-serif);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  opacity: 0;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}

body.cursor-hover .obys-cursor-follower {
  width: 65px;
  height: 65px;
  background: rgba(232, 25, 44, 0.2);
  border-color: rgba(255, 71, 87, 0.9);
  box-shadow: 0 0 25px rgba(232, 25, 44, 0.4);
}

body.cursor-media-hover .obys-cursor-follower {
  width: 90px;
  height: 90px;
  background: rgba(10, 12, 20, 0.85);
  border-color: rgba(232, 25, 44, 0.8);
  box-shadow: 0 0 30px rgba(232, 25, 44, 0.5);
  backdrop-filter: blur(10px);
}

body.cursor-media-hover .obys-cursor-text {
  opacity: 1;
}

body.cursor-media-hover .obys-cursor-dot {
  opacity: 0;
}

/* Hide custom cursor when hovering modals, inputs, or when mouse leaves window */
body.cursor-modal-hover .obys-cursor-dot,
body.cursor-modal-hover .obys-cursor-follower,
body.cursor-input-hover .obys-cursor-dot,
body.cursor-input-hover .obys-cursor-follower,
body.cursor-hidden .obys-cursor-dot,
body.cursor-hidden .obys-cursor-follower {
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (pointer: coarse), (max-width: 1024px) {
  .obys-cursor-dot,
  .obys-cursor-follower {
    display: none !important;
  }
}

/* ── 2. Kinetic Infinite Typography Marquee Ribbons ── */
.kinetic-marquee-section {
  width: 100%;
  overflow: hidden;
  padding: 1.3rem 0;
  background: #090b12;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  z-index: 3;
}

.kinetic-marquee-track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: marqueeScrollLeft 32s linear infinite;
  will-change: transform;
}

.kinetic-marquee-track.reverse {
  animation: marqueeScrollRight 32s linear infinite;
}

.kinetic-marquee-track:hover {
  animation-play-state: paused;
}

@keyframes marqueeScrollLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes marqueeScrollRight {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

[dir="rtl"] .kinetic-marquee-track {
  animation: marqueeScrollRight 32s linear infinite;
}

[dir="rtl"] .kinetic-marquee-track.reverse {
  animation: marqueeScrollLeft 32s linear infinite;
}

[dir="rtl"] .kinetic-marquee-track:hover {
  animation-play-state: paused;
}

.kinetic-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 1.8rem;
  padding: 0 1.2rem;
  font-family: var(--font-main, 'Outfit', 'Noto Kufi Arabic', sans-serif);
  font-size: clamp(1.2rem, 3.2vw, 2.5rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  transition: color 0.3s ease;
  user-select: none;
}

.kinetic-marquee-item:hover {
  color: #ffffff;
}

.kinetic-marquee-item.highlight {
  color: #ffffff;
}

.kinetic-marquee-item.gradient {
  background: var(--gradient-red, linear-gradient(135deg, #e8192c, #ff6b35));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.kinetic-marquee-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red, #e8192c);
  box-shadow: 0 0 12px var(--red, #e8192c);
  flex-shrink: 0;
}

/* ── 3. Full-Screen Interactive Ambient Video Matrix (Desktop Only) ── */
.ambient-video-matrix-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.8s ease;
}

.ambient-video-matrix-canvas.active {
  opacity: 1;
  visibility: visible;
}

.ambient-video-matrix-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ambient-video-matrix-layer.active {
  opacity: 0.32;
  transform: scale(1);
}

.ambient-video-matrix-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(10, 12, 20, 0.3) 0%, rgba(10, 12, 20, 0.88) 70%, #0a0c14 100%),
              linear-gradient(180deg, #0a0c14 0%, transparent 20%, transparent 80%, #0a0c14 100%);
  pointer-events: none;
  z-index: 2;
}

/* On mobile/tablet, hide ambient matrix completely to free GPU memory */
@media (max-width: 1024px) {
  .ambient-video-matrix-canvas {
    display: none !important;
  }
}

/* ── 4. 6-Video Showcase Track (Desktop Sticky / Mobile Fluid Slider) ── */
.obys-scroll-section {
  position: relative;
  width: 100%;
  background: #05060a;
}

/* Desktop: 520vh sticky track */
@media (min-width: 1025px) {
  .obys-scroll-section {
    height: 520vh;
  }

  .obys-scroll-stage {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
  }
}

/* Mobile: Fluid 100dvh High-Performance Slide Theater */
@media (max-width: 1024px) {
  .obys-scroll-section {
    height: auto;
    min-height: 100dvh;
    overflow: hidden;
  }

  .obys-scroll-stage {
    position: relative;
    width: 100%;
    height: 100dvh;
    min-height: 580px;
    max-height: 100dvh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    touch-action: pan-y;
  }
}

/* 6 Background Video Layers */
.obys-video-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04) translateZ(0);
  transition: opacity 0.75s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
  z-index: 1;
  will-change: opacity, transform;
}

.obys-video-layer.active {
  opacity: 0.84;
  transform: scale(1) translateZ(0);
}

.obys-video-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(10, 12, 20, 0.35) 0%, rgba(5, 6, 10, 0.88) 75%, #05060a 100%),
              linear-gradient(180deg, rgba(5, 6, 10, 0.95) 0%, rgba(5, 6, 10, 0.25) 25%, rgba(5, 6, 10, 0.6) 75%, rgba(5, 6, 10, 0.98) 100%);
  z-index: 2;
  pointer-events: none;
}

/* Narrative Overlay Container */
.obys-scroll-hud {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1280px;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: none;
}

[dir="rtl"] .obys-scroll-hud {
  align-items: flex-end;
  text-align: right;
}

/* Desktop Narrative Story Phases */
@media (min-width: 1025px) {
  .obys-story-phase {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    max-width: 720px;
    opacity: 0;
    visibility: hidden;
    filter: blur(10px);
    transition: opacity 0.65s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1),
                filter 0.65s cubic-bezier(0.2, 0.8, 0.2, 1),
                visibility 0.65s ease;
    pointer-events: auto;
  }

  .obys-story-phase.active {
    opacity: 1;
    visibility: visible;
    filter: blur(0px);
    transform: translateY(-50%) translateX(0);
  }

  .obys-story-phase.exit-up {
    opacity: 0;
    transform: translateY(-68%) scale(0.96);
    filter: blur(10px);
  }

  .obys-story-phase.enter-down {
    opacity: 0;
    transform: translateY(-32%) scale(0.96);
    filter: blur(10px);
  }
}

/* Badge, Typography & Specs */
.obys-phase-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.45rem 1.2rem;
  border-radius: 50px;
  font-family: var(--font-main, 'Outfit', 'Noto Kufi Arabic', sans-serif);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  background: rgba(10, 12, 20, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.obys-phase-badge.red {
  color: #ff6b7a;
  border-color: rgba(232, 25, 44, 0.6);
  box-shadow: 0 0 25px rgba(232, 25, 44, 0.35);
}

.obys-phase-badge.cyan {
  color: #38bdf8;
  border-color: rgba(0, 210, 255, 0.6);
  box-shadow: 0 0 25px rgba(0, 210, 255, 0.35);
}

.obys-phase-badge.purple {
  color: #c084fc;
  border-color: rgba(168, 85, 247, 0.6);
  box-shadow: 0 0 25px rgba(168, 85, 247, 0.35);
}

.obys-phase-badge.gold {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.6);
  box-shadow: 0 0 25px rgba(251, 191, 36, 0.35);
}

.obys-phase-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
  animation: liveDotPulse 1.5s infinite;
}

@keyframes liveDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.3); }
}

.obys-phase-title {
  font-family: var(--font-main, 'Outfit', 'Noto Kufi Arabic', sans-serif);
  font-size: clamp(2.3rem, 5.2vw, 4rem);
  font-weight: 900;
  line-height: 1.1;
  color: #ffffff;
  margin-bottom: 1.2rem;
  letter-spacing: -1.5px;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.95);
}

[dir="rtl"] .obys-phase-title {
  letter-spacing: normal;
}

.obys-phase-desc {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  color: #d8dceb;
  line-height: 1.7;
  margin-bottom: 1.8rem;
  max-width: 620px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9);
}

/* 6-Phase Desktop Side Chapter Tracker */
.obys-tracker {
  position: absolute;
  right: 3rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  z-index: 6;
  pointer-events: auto;
}

[dir="rtl"] .obys-tracker {
  right: auto;
  left: 3rem;
}

.obys-tracker-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 6px;
  color: rgba(255, 255, 255, 0.45);
  font-family: var(--font-main, 'Outfit', 'Noto Kufi Arabic', sans-serif);
  font-size: 0.8rem;
  font-weight: 700;
  transition: all 0.3s ease;
  flex-direction: row-reverse;
}

[dir="rtl"] .obys-tracker-btn {
  flex-direction: row;
}

.obys-tracker-btn:hover {
  color: #ffffff;
}

.obys-tracker-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.obys-tracker-btn:hover .obys-tracker-dot {
  background: #ffffff;
  transform: scale(1.3);
}

.obys-tracker-btn.active {
  color: #ffffff;
}

.obys-tracker-btn.active .obys-tracker-dot {
  background: var(--red, #e8192c);
  transform: scale(1.6);
  box-shadow: 0 0 15px rgba(232, 25, 44, 0.9);
}

/* ===================================================
   5. MOBILE SLIDE ENGINE & RESPONSIVE PERFECTION
   True Horizontal Slide Animation without Lag
   =================================================== */
@media (max-width: 1024px) {
  .obys-tracker {
    display: none !important;
  }

  .obys-scroll-hud {
    padding: 1rem 1.25rem 5.8rem;
    width: 100%;
    max-width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
  }

  [dir="rtl"] .obys-scroll-hud {
    align-items: center;
  }

  /* TRUE HORIZONTAL SLIDE ANIMATION ON MOBILE */
  .obys-story-phase {
    position: absolute;
    top: 48%;
    left: 50%;
    width: calc(100% - 2rem);
    max-width: 500px;
    padding: 1.35rem 1.2rem;
    background: rgba(9, 11, 20, 0.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 22px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9);
    text-align: left;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) translateX(105%) translateZ(0);
    transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.32s ease,
                visibility 0.42s ease;
    will-change: transform, opacity;
  }

  [dir="rtl"] .obys-story-phase {
    text-align: right;
    transform: translate(-50%, -50%) translateX(-105%) translateZ(0);
  }

  /* Active Slide: Centered and interactive */
  .obys-story-phase.active {
    transform: translate(-50%, -50%) translateX(0) translateZ(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Slide Exited to Previous (Left in LTR, Right in RTL) */
  .obys-story-phase.slide-prev {
    transform: translate(-50%, -50%) translateX(-105%) translateZ(0);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  /* Slide Exited to Next (Right in LTR, Left in RTL) */
  .obys-story-phase.slide-next {
    transform: translate(-50%, -50%) translateX(105%) translateZ(0);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  [dir="rtl"] .obys-story-phase.slide-prev {
    transform: translate(-50%, -50%) translateX(105%) translateZ(0);
  }

  [dir="rtl"] .obys-story-phase.slide-next {
    transform: translate(-50%, -50%) translateX(-105%) translateZ(0);
  }

  .obys-phase-badge {
    padding: 0.32rem 0.9rem;
    font-size: 0.72rem;
    margin-bottom: 0.6rem;
  }

  .obys-phase-title {
    font-size: clamp(1.35rem, 5.2vw, 1.9rem);
    line-height: 1.15;
    letter-spacing: -0.5px;
    margin-bottom: 0.6rem;
  }

  .obys-phase-desc {
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 0.85rem;
    color: #e2e6f4;
  }

  .scroll-specs-row {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
  }

  .scroll-spec-chip {
    font-size: 0.72rem;
    padding: 0.24rem 0.6rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #ffffff;
  }

  .scroll-phase-actions {
    display: flex;
    gap: 0.6rem;
    width: 100%;
  }

  .scroll-action-primary,
  .scroll-action-secondary {
    flex: 1;
    text-align: center;
    padding: 0.65rem 0.85rem;
    font-size: 0.82rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    text-decoration: none;
  }

  .scroll-action-primary {
    background: var(--red, #e8192c);
    color: #ffffff;
    box-shadow: 0 4px 18px rgba(232, 25, 44, 0.4);
  }

  .scroll-action-secondary {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
  }

  /* Mobile Slide Navigation Bar */
  .obys-mobile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    bottom: 1.25rem;
    left: 1.25rem;
    right: 1.25rem;
    z-index: 22;
    pointer-events: auto;
    background: rgba(10, 12, 22, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50px;
    padding: 0.5rem 0.85rem;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.8);
  }

  .obys-mobile-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
  }

  .obys-mobile-arrow svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
  }

  .obys-mobile-arrow:active {
    background: var(--red, #e8192c);
    transform: scale(0.92);
  }

  .obys-mobile-pills {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .obys-mobile-pill {
    width: 14px;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.25);
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    cursor: pointer;
    border: none;
    padding: 0;
  }

  .obys-mobile-pill.active {
    width: 28px;
    background: var(--red, #e8192c);
    box-shadow: 0 0 10px var(--red, #e8192c);
  }

  .obys-mobile-counter {
    font-family: var(--font-main, 'Outfit', 'Noto Kufi Arabic', sans-serif);
    font-size: 0.8rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.6);
  }

  .obys-mobile-counter span {
    color: #ffffff;
  }

  .scroll-hint-bar {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .obys-story-phase {
    padding: 1.15rem 1rem;
    border-radius: 18px;
    top: 45%;
  }

  .obys-phase-title {
    font-size: 1.3rem;
  }

  .obys-phase-desc {
    font-size: 0.82rem;
    line-height: 1.45;
  }
}

/* ===================================================
   6. 4-DIRECTIONAL 3D SLIDE ANIMATION SYSTEM
   Left-to-Right, Right-to-Left, Down-to-Up, Up-to-Down
   =================================================== */
.obys-story-phase.slide-from-left {
  transform: translate(-50%, -50%) translate3d(-105%, 0, 0) scale(0.95);
  opacity: 0;
  visibility: hidden;
}

.obys-story-phase.slide-to-right {
  transform: translate(-50%, -50%) translate3d(105%, 0, 0) scale(0.95);
  opacity: 0;
  visibility: hidden;
}

.obys-story-phase.slide-from-right {
  transform: translate(-50%, -50%) translate3d(105%, 0, 0) scale(0.95);
  opacity: 0;
  visibility: hidden;
}

.obys-story-phase.slide-to-left {
  transform: translate(-50%, -50%) translate3d(-105%, 0, 0) scale(0.95);
  opacity: 0;
  visibility: hidden;
}

.obys-story-phase.slide-from-bottom {
  transform: translate(-50%, -50%) translate3d(0, 100%, 0) scale(0.92);
  opacity: 0;
  visibility: hidden;
}

.obys-story-phase.slide-to-top {
  transform: translate(-50%, -50%) translate3d(0, -100%, 0) scale(0.92);
  opacity: 0;
  visibility: hidden;
}

.obys-story-phase.slide-from-top {
  transform: translate(-50%, -50%) translate3d(0, -100%, 0) scale(0.92);
  opacity: 0;
  visibility: hidden;
}

.obys-story-phase.slide-to-bottom {
  transform: translate(-50%, -50%) translate3d(0, 100%, 0) scale(0.92);
  opacity: 0;
  visibility: hidden;
}

/* Desktop Slide Direction Overrides */
@media (min-width: 1025px) {
  .obys-story-phase.slide-from-left {
    transform: translateY(-50%) translate3d(-105%, 0, 0) scale(0.95);
  }
  .obys-story-phase.slide-to-right {
    transform: translateY(-50%) translate3d(105%, 0, 0) scale(0.95);
  }
  .obys-story-phase.slide-from-right {
    transform: translateY(-50%) translate3d(105%, 0, 0) scale(0.95);
  }
  .obys-story-phase.slide-to-left {
    transform: translateY(-50%) translate3d(-105%, 0, 0) scale(0.95);
  }
  .obys-story-phase.slide-from-bottom {
    transform: translateY(-50%) translate3d(0, 100%, 0) scale(0.92);
  }
  .obys-story-phase.slide-to-top {
    transform: translateY(-50%) translate3d(0, -100%, 0) scale(0.92);
  }
  .obys-story-phase.slide-from-top {
    transform: translateY(-50%) translate3d(0, -100%, 0) scale(0.92);
  }
  .obys-story-phase.slide-to-bottom {
    transform: translateY(-50%) translate3d(0, 100%, 0) scale(0.92);
  }
}

/* 4-Directional Control Dock */
.obys-directional-dock {
  position: absolute;
  bottom: 2.2rem;
  right: 3rem;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(10, 12, 22, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 8px 14px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

[dir="rtl"] .obys-directional-dock {
  right: auto;
  left: 3rem;
}

.obys-dir-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.obys-dir-btn:hover {
  background: var(--red, #e8192c);
  border-color: var(--red, #e8192c);
  transform: scale(1.12);
  box-shadow: 0 0 15px rgba(232, 25, 44, 0.6);
}

.obys-dir-mode-tag {
  font-family: var(--font-main, 'Outfit', 'Noto Kufi Arabic', sans-serif);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  padding: 0 6px;
}

@media (max-width: 1024px) {
  .obys-directional-dock {
    display: none;
  }
}

/* ===================================================
   7. CINEMATIC ALL-VIDEOS PANORAMIC SHOWCASE BANNER
   10 HD Videos in Smooth Panoramic Flow
   =================================================== */
.panoramic-video-banner-section {
  position: relative;
  width: 100%;
  background: #07080f;
  padding: 6rem 0;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.panoramic-banner-header {
  max-width: 1280px;
  margin: 0 auto 3rem;
  padding: 0 2rem;
  text-align: center;
}

.panoramic-banner-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.35rem 1.1rem;
  border-radius: 50px;
  background: rgba(232, 25, 44, 0.12);
  border: 1px solid rgba(232, 25, 44, 0.3);
  color: #ff6b7a;
  font-family: var(--font-main, 'Outfit', 'Noto Kufi Arabic', sans-serif);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.panoramic-banner-badge .pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e8192c;
  box-shadow: 0 0 10px #e8192c;
  animation: pulse-glow 1.5s infinite;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

.panoramic-banner-title {
  font-family: var(--font-main, 'Outfit', 'Noto Kufi Arabic', sans-serif);
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -1.2px;
  margin-bottom: 0.85rem;
}

.panoramic-banner-subtitle {
  color: rgba(255, 255, 255, 0.65);
  font-size: clamp(0.95rem, 1.8vw, 1.12rem);
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.65;
}

/* Panoramic Video Track Ribbon */
.panoramic-video-track-wrap {
  position: relative;
  width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  padding: 1.5rem 1.5rem 3rem;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.panoramic-video-track-wrap:active {
  cursor: grabbing;
}

.panoramic-video-track-wrap::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.panoramic-video-track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  animation: panoramic-marquee 50s linear infinite;
  will-change: transform;
}

.panoramic-video-track:hover,
.panoramic-video-track.is-paused {
  animation-play-state: paused;
}

@keyframes panoramic-marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

/* RTL Support: keep horizontal ribbon order consistent (LTR) to ensure seamless 0% to -50% marquee loop without blank screens, while cards maintain native RTL Arabic layout */
[dir="rtl"] .panoramic-video-track-wrap {
  direction: ltr;
}

[dir="rtl"] .panoramic-video-track {
  animation: panoramic-marquee 50s linear infinite;
}

[dir="rtl"] .panoramic-video-track:hover,
[dir="rtl"] .panoramic-video-track.is-paused {
  animation-play-state: paused;
}

[dir="rtl"] .panoramic-video-card {
  direction: rtl;
  text-align: right;
}

/* Individual Video Banner Card */
.panoramic-video-card {
  position: relative;
  width: 320px;
  height: 440px;
  border-radius: 24px;
  overflow: hidden;
  flex-shrink: 0;
  background: radial-gradient(circle at 50% 20%, #171b30 0%, #0a0d18 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.8rem;
  color: #ffffff;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s ease,
              box-shadow 0.4s ease;
}

.panoramic-video-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(232, 25, 44, 0.7);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(232, 25, 44, 0.3);
}

.panoramic-video-card video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.68;
  background: #0a0d18;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
  z-index: 0;
  pointer-events: none;
}

.panoramic-video-card:hover video {
  transform: scale(1.08);
  opacity: 0.92;
}

.panoramic-video-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 10, 18, 0.05) 0%, rgba(8, 10, 18, 0.55) 45%, #080a14 100%);
  z-index: 1;
  pointer-events: none;
}

.panoramic-video-card-content {
  position: relative;
  z-index: 2;
}

.panoramic-video-card-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.7rem;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-family: var(--font-main, 'Outfit', 'Noto Kufi Arabic', sans-serif);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red-light, #ff4757);
  margin-bottom: 0.65rem;
}

.panoramic-video-card h3 {
  font-family: var(--font-main, 'Outfit', 'Noto Kufi Arabic', sans-serif);
  font-size: 1.35rem;
  font-weight: 800;
  margin-bottom: 0.4rem;
  color: #ffffff;
  line-height: 1.25;
}

.panoramic-video-card p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.panoramic-video-card-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-main, 'Outfit', 'Noto Kufi Arabic', sans-serif);
  font-size: 0.84rem;
  font-weight: 700;
  color: #ffffff;
  transition: transform 0.2s ease, color 0.2s ease;
}

.panoramic-video-card:hover .panoramic-video-card-action {
  color: var(--red-light, #ff4757);
  transform: translateX(4px);
}

[dir="rtl"] .panoramic-video-card:hover .panoramic-video-card-action {
  transform: translateX(-4px);
}

@media (max-width: 768px) {
  .panoramic-video-banner-section {
    padding: 4rem 0;
  }
  .panoramic-video-card {
    width: 280px;
    height: 390px;
    padding: 1.4rem;
  }
}

/* ── 4D Directional Transitions for 01-06 Showcase ── */
.obys-story-phase.slide-from-left {
  animation: obysSlideFromLeft 0.52s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}
.obys-story-phase.slide-from-right {
  animation: obysSlideFromRight 0.52s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}
.obys-story-phase.slide-from-bottom {
  animation: obysSlideFromBottom 0.52s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}
.obys-story-phase.slide-from-top {
  animation: obysSlideFromTop 0.52s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.obys-story-phase.slide-to-left {
  animation: obysSlideToLeft 0.42s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}
.obys-story-phase.slide-to-right {
  animation: obysSlideToRight 0.42s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}
.obys-story-phase.slide-to-top {
  animation: obysSlideToTop 0.42s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}
.obys-story-phase.slide-to-bottom {
  animation: obysSlideToBottom 0.42s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes obysSlideFromLeft {
  from { opacity: 0; transform: translateY(-50%) translateX(-60px); filter: blur(8px); }
  to { opacity: 1; transform: translateY(-50%) translateX(0); filter: blur(0); }
}
@keyframes obysSlideFromRight {
  from { opacity: 0; transform: translateY(-50%) translateX(60px); filter: blur(8px); }
  to { opacity: 1; transform: translateY(-50%) translateX(0); filter: blur(0); }
}
@keyframes obysSlideFromBottom {
  from { opacity: 0; transform: translateY(-30%); filter: blur(8px); }
  to { opacity: 1; transform: translateY(-50%); filter: blur(0); }
}
@keyframes obysSlideFromTop {
  from { opacity: 0; transform: translateY(-70%); filter: blur(8px); }
  to { opacity: 1; transform: translateY(-50%); filter: blur(0); }
}

@keyframes obysSlideToLeft {
  from { opacity: 1; transform: translateY(-50%) translateX(0); filter: blur(0); }
  to { opacity: 0; transform: translateY(-50%) translateX(-60px); filter: blur(8px); }
}
@keyframes obysSlideToRight {
  from { opacity: 1; transform: translateY(-50%) translateX(0); filter: blur(0); }
  to { opacity: 0; transform: translateY(-50%) translateX(60px); filter: blur(8px); }
}
@keyframes obysSlideToTop {
  from { opacity: 1; transform: translateY(-50%); filter: blur(0); }
  to { opacity: 0; transform: translateY(-70%); filter: blur(8px); }
}
@keyframes obysSlideToBottom {
  from { opacity: 1; transform: translateY(-50%); filter: blur(0); }
  to { opacity: 0; transform: translateY(-30%); filter: blur(8px); }
}

@media (max-width: 1024px) {
  @keyframes obysSlideFromLeft {
    from { opacity: 0; transform: translate(-50%, -50%) translateX(-60px); filter: blur(6px); }
    to { opacity: 1; transform: translate(-50%, -50%) translateX(0); filter: blur(0); }
  }
  @keyframes obysSlideFromRight {
    from { opacity: 0; transform: translate(-50%, -50%) translateX(60px); filter: blur(6px); }
    to { opacity: 1; transform: translate(-50%, -50%) translateX(0); filter: blur(0); }
  }
  @keyframes obysSlideFromBottom {
    from { opacity: 0; transform: translate(-50%, -35%); filter: blur(6px); }
    to { opacity: 1; transform: translate(-50%, -50%); filter: blur(0); }
  }
  @keyframes obysSlideFromTop {
    from { opacity: 0; transform: translate(-50%, -65%); filter: blur(6px); }
    to { opacity: 1; transform: translate(-50%, -50%); filter: blur(0); }
  }
  @keyframes obysSlideToLeft {
    from { opacity: 1; transform: translate(-50%, -50%) translateX(0); filter: blur(0); }
    to { opacity: 0; transform: translate(-50%, -50%) translateX(-60px); filter: blur(6px); }
  }
  @keyframes obysSlideToRight {
    from { opacity: 1; transform: translate(-50%, -50%) translateX(0); filter: blur(0); }
    to { opacity: 0; transform: translate(-50%, -50%) translateX(60px); filter: blur(6px); }
  }
  @keyframes obysSlideToTop {
    from { opacity: 1; transform: translate(-50%, -50%); filter: blur(0); }
    to { opacity: 0; transform: translate(-50%, -65%); filter: blur(6px); }
  }
  @keyframes obysSlideToBottom {
    from { opacity: 1; transform: translate(-50%, -50%); filter: blur(0); }
    to { opacity: 0; transform: translate(-50%, -35%); filter: blur(6px); }
  }
}