/* ═══════════════════════════════════════════════════════════════════
   رواد 13 — MOBILE UX ENHANCEMENT LAYER v1.0
   Premium Smooth & Modern Mobile Experience
   ─────────────────────────────────────────────────────────────────
   هذا الملف يُحسّن تجربة الجوال بدون تغيير التصميم الأساسي
   يضيف: حركات ناعمة، تفاعل لمسي، أحجام مريحة، تأثيرات مودرن
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 1. GLOBAL SMOOTH DEFAULTS ─── */
@media (max-width: 992px) {

  /* Fluid smooth scrolling with momentum */
  html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }

  /* Prevent text selection flash on tap */
  * {
    -webkit-tap-highlight-color: transparent;
  }

  /* Smoother font rendering + Safe area for mobile browser bars */
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Prevent content from hiding behind mobile browser bottom bar */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }


  /* ─── 2. UNIVERSAL TOUCH FEEDBACK ─── */
  /* Every clickable element gets satisfying press feedback */
  button,
  .nav-link,
  .grand-pillar-card,
  .op-feature-chip,
  .pillar-footer,
  .cut-ribbon-btn,
  .nav-award-guide-btn,
  [onclick],
  a.btn,
  .ws-card,
  .expedition-station-node {
    transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.2s ease,
                opacity 0.15s ease !important;
    will-change: transform;
  }

  button:active,
  .nav-link:active,
  .grand-pillar-card:active,
  .op-feature-chip:active,
  .pillar-footer:active,
  .cut-ribbon-btn:active,
  .nav-award-guide-btn:active,
  [onclick]:active,
  a.btn:active,
  .ws-card:active,
  .expedition-station-node:active {
    transform: scale(0.96) !important;
    opacity: 0.85 !important;
  }


  /* ─── 3. SCROLL-REVEAL ANIMATIONS ─── */
  /* Elements animate in when they enter the viewport */
  @keyframes mux-fadeInUp {
    from {
      opacity: 0;
      transform: translateY(24px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes mux-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes mux-scaleIn {
    from {
      opacity: 0;
      transform: scale(0.92);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes mux-slideInRight {
    from {
      opacity: 0;
      transform: translateX(30px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  /* Hero section */
  .opening-hero-col {
    animation: mux-fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .opening-actions-col {
    animation: mux-fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
  }

  /* Feature chips stagger */
  .opening-features-row .op-feature-chip:nth-child(1) {
    animation: mux-scaleIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
  }
  .opening-features-row .op-feature-chip:nth-child(2) {
    animation: mux-scaleIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
  }
  .opening-features-row .op-feature-chip:nth-child(3) {
    animation: mux-scaleIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
  }

  /* Pillar cards stagger entrance */
  .grand-pillar-card:nth-child(1) {
    animation: mux-fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
  }
  .grand-pillar-card:nth-child(2) {
    animation: mux-fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
  }
  .grand-pillar-card:nth-child(3) {
    animation: mux-fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
  }
  .grand-pillar-card:nth-child(4) {
    animation: mux-fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
  }

  /* Student ID card */
  .opening-student-id-card {
    animation: mux-scaleIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
  }


  /* ─── 4. MODERN CARD ENHANCEMENTS ─── */
  /* Softer, more modern card feel */
  .grand-pillar-card {
    border-radius: 20px !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s ease !important;
  }

  .opening-student-id-card {
    border-radius: 22px !important;
    box-shadow: 0 8px 32px rgba(135, 42, 8, 0.08),
                0 2px 8px rgba(0, 0, 0, 0.04) !important;
  }


  /* ─── 5. FLUID TYPOGRAPHY ─── */
  /* Text scales smoothly between breakpoints */
  .opening-hero-title {
    font-size: clamp(1.4rem, 5vw, 2.2rem) !important;
    line-height: 1.35 !important;
  }

  .opening-hero-subtitle {
    font-size: clamp(0.82rem, 2.8vw, 1rem) !important;
    line-height: 1.7 !important;
  }

  .pillar-title {
    font-size: clamp(0.95rem, 3.5vw, 1.15rem) !important;
  }

  .pillar-desc {
    font-size: clamp(0.72rem, 2.5vw, 0.85rem) !important;
    line-height: 1.6 !important;
  }


  /* ─── 6. COMFORTABLE TOUCH TARGETS ─── */
  /* Apple HIG: minimum 44px touch targets */
  .cut-ribbon-btn,
  .master-inaugurate-btn {
    min-height: 50px !important;
    border-radius: 16px !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.3px !important;
  }

  .pillar-footer {
    min-height: 44px !important;
    padding: 10px 16px !important;
    border-radius: 0 0 20px 20px !important;
  }

  .nav-link {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Input fields — bigger and easier to tap */
  #opening-student-id-input {
    min-height: 50px !important;
    font-size: 1rem !important;
    border-radius: 14px !important;
    padding: 12px 16px 12px 42px !important;
  }


  /* ─── 7. SMOOTHER OVERLAYS & MODALS ─── */
  /* Overlays slide up from bottom on mobile (sheet-style) */
  .station-overlay {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.3s ease !important;
    transform: translateY(100%);
    opacity: 0;
  }

  .station-overlay.active {
    transform: translateY(0) !important;
    opacity: 1 !important;
  }

  /* PDF drawer smooth entrance */
  .pdf-side-drawer {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  /* Modal backdrops */
  .mobile-nav-backdrop {
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
  }


  /* ─── 8. SMOOTH NAV DRAWER ─── */
  .nav-links {
    transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  /* Nav items stagger in when drawer opens */
  .nav-links.open .nav-link:nth-child(1) { animation: mux-slideInRight 0.3s 0.05s both; }
  .nav-links.open .nav-link:nth-child(2) { animation: mux-slideInRight 0.3s 0.1s both; }
  .nav-links.open .nav-link:nth-child(3) { animation: mux-slideInRight 0.3s 0.15s both; }
  .nav-links.open .nav-link:nth-child(4) { animation: mux-slideInRight 0.3s 0.2s both; }
  .nav-links.open .nav-link:nth-child(5) { animation: mux-slideInRight 0.3s 0.25s both; }
  .nav-links.open .nav-link:nth-child(6) { animation: mux-slideInRight 0.3s 0.3s both; }
  .nav-links.open .nav-link:nth-child(7) { animation: mux-slideInRight 0.3s 0.35s both; }
  .nav-links.open .nav-link:nth-child(8) { animation: mux-slideInRight 0.3s 0.4s both; }


  /* ─── 9. BADGE & CHIP POLISH ─── */
  .opening-prestige-badge {
    animation: mux-fadeIn 0.8s ease 0.1s both;
  }

  .pillar-badge {
    font-size: 0.68rem !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    font-weight: 700 !important;
  }

  .op-feature-chip {
    border-radius: 24px !important;
    padding: 8px 14px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  .op-tag-pill {
    border-radius: 20px !important;
    font-size: 0.62rem !important;
  }


  /* ─── 10. ICON SPHERE POLISH ─── */
  .pillar-icon-sphere {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }

  .grand-pillar-card:active .pillar-icon-sphere {
    transform: scale(1.1) rotate(-5deg) !important;
  }


  /* ─── 11. SIDEBAR DRAWER & DROPDOWN FIX ─── */
  /* Let nav-links scroll smoothly when dropdowns expand */
  .nav-links {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    overscroll-behavior: contain !important;
  }

  .nav-dropdown {
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.3s ease,
                padding 0.3s ease !important;
    overflow: visible !important;
  }

  /* Station sub-group: allow content to show fully */
  .station-sub-group {
    overflow: visible !important;
  }

  /* Dropdown menu: no max-height restriction */
  .dropdown-menu {
    max-height: none !important;
    overflow: visible !important;
  }

  /* Sub-menu: smooth expand */
  .station-sub-group .dropdown-sub-menu {
    max-height: none !important;
    overflow: visible !important;
  }

  /* Ensure enough bottom space inside drawer for scrolling */
  .nav-links {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }


  /* ─── 12. EXPEDITION TOAST POLISH ─── */
  .expedition-toast {
    border-radius: 16px !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    animation: mux-fadeInUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) both !important;
  }


  /* ─── 13. STUDENT PROFILE MODAL SMOOTH ─── */
  #student-profile-modal {
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  #student-profile-modal.active {
    animation: mux-fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) both !important;
  }


  /* ─── 14. PROGRESS BARS ANIMATE ─── */
  @keyframes mux-progressGrow {
    from { width: 0; }
  }

  .sp-prog-fill,
  .progress-fill,
  [class*="prog-fill"] {
    animation: mux-progressGrow 0.8s cubic-bezier(0.16, 1, 0.3, 1) both !important;
  }


  /* ─── 15. CONFETTI-LIKE CELEBRATORY PULSE ─── */
  @keyframes mux-celebratePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(243, 198, 73, 0.3); }
    50% { box-shadow: 0 0 0 12px rgba(243, 198, 73, 0); }
  }

  .is-completed .u-node-sphere,
  .is-done .ws-card-reward-badge {
    animation: mux-celebratePulse 2s ease-in-out infinite !important;
  }


  /* ─── 16. SPACING COMFORT ─── */
  .grand-hero-pillars-grid {
    gap: 14px !important;
    padding: 0 4px !important;
  }

  .opening-center-stage {
    padding: 16px 12px !important;
  }

  /* More breathing room between sections */
  .grand-hero-pillars-grid,
  .welcome-info-section {
    margin-bottom: 20px !important;
  }


  /* ─── 17. FOCUS / ACTIVE STATES ─── */
  #opening-student-id-input:focus {
    border-color: #BC8859 !important;
    box-shadow: 0 0 0 3px rgba(188, 136, 89, 0.15),
                0 4px 12px rgba(188, 136, 89, 0.1) !important;
    transition: border-color 0.2s ease, box-shadow 0.3s ease !important;
  }

  /* Cut ribbon button glow on hover/focus */
  .cut-ribbon-btn:focus,
  .master-inaugurate-btn:focus {
    box-shadow: 0 0 0 3px rgba(135, 42, 8, 0.2),
                0 6px 20px rgba(135, 42, 8, 0.15) !important;
  }


  /* ─── 18. LOADING SKELETON SHIMMER ─── */
  @keyframes mux-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }

  .loading-placeholder,
  [data-loading] {
    background: linear-gradient(
      90deg,
      rgba(211, 180, 139, 0.08) 0%,
      rgba(211, 180, 139, 0.18) 50%,
      rgba(211, 180, 139, 0.08) 100%
    ) !important;
    background-size: 200% 100% !important;
    animation: mux-shimmer 1.5s ease infinite !important;
  }

  /* ─── 13. FOOTER RIBBON MOBILE FIX ─── */
  /* Fix text overflow from ribbon wings and golden seal on mobile */
  .opening-ribbon-footer {
    position: relative !important;
    z-index: 10 !important;
  }

  .ribbon-bar-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .ribbon-wing {
    flex: 1 !important;
    min-width: 0 !important;
    height: 42px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .ribbon-text {
    font-size: 0.58rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    padding: 0 6px !important;
    line-height: 1.3 !important;
  }

  /* Golden seal: properly sized to contain text */
  .ribbon-seal {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    flex-shrink: 0 !important;
    z-index: 5 !important;
    overflow: hidden !important;
  }

  .seal-text {
    font-size: 0.55rem !important;
    white-space: nowrap !important;
  }

  .seal-sub {
    font-size: 0.4rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .seal-crown-icon {
    font-size: 0.7rem !important;
  }

  .seal-inner {
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2px !important;
  }
}

/* Extra small phones */
@media (max-width: 380px) {
  .ribbon-text {
    font-size: 0.5rem !important;
  }

  .ribbon-seal {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
  }

  .seal-text {
    font-size: 0.48rem !important;
  }

  .seal-sub {
    font-size: 0.35rem !important;
  }
}


/* ─── REDUCED MOTION RESPECT ─── */
/* Users who prefer no animations */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}