/* ============================================================
   MOBILE-ONLY DEEP POLISH — Apple-grade responsive experience
   WARNING: All rules scoped to @media (max-width: 767px).
   Desktop styles are NEVER touched!
   ============================================================ */

/* Default: hide orbital overlay on desktop */
#mobile-orbit-overlay {
  display: none !important;
}

@media (max-width: 767px) {

  /* ============================================================
     0. GLOBAL MOBILE TWEAKS
     ============================================================ */
  body {
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
  }

  /* ============================================================
     1. ORBIT SECTION — Canvas + Orbital Overlay
     The canvas draws circles vertically stacked on mobile.
     We hide the canvas and show a CSS orbital animation instead.
     ============================================================ */

  /* Hide the canvas on mobile — replaced by CSS orbit */
  .relative.w-full.h-screen.overflow-hidden {
    height: 100svh !important;
    min-height: 100svh !important;
  }

  .relative.w-full.h-screen.overflow-hidden > canvas {
    display: none !important;
  }

  /* Show the CSS orbital overlay */
  #mobile-orbit-overlay {
    display: flex !important;
  }

  /* ---- Orbital Animation Keyframes ---- */
  @keyframes orbit-revolve {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }

  @keyframes orbit-counter-revolve {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
  }

  @keyframes orbit-pulse {
    0%, 100% { box-shadow: 0 0 20px rgba(var(--glow-rgb), 0.15), 0 0 60px rgba(var(--glow-rgb), 0.05); }
    50%      { box-shadow: 0 0 30px rgba(var(--glow-rgb), 0.25), 0 0 80px rgba(var(--glow-rgb), 0.1); }
  }

  @keyframes name-particles {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%      { opacity: 1; transform: scale(1.02); }
  }

  #mobile-orbit-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: #F4F1ED;
  }

  /* Center name */
  #mobile-orbit-overlay .orbit-name {
    font-family: 'Noto Sans SC', 'PingFang SC', sans-serif;
    font-weight: 600;
    font-size: 36px;
    color: #1D1D1F;
    letter-spacing: -0.02em;
    z-index: 10;
    animation: name-particles 4s ease-in-out infinite;
    pointer-events: auto;
    cursor: pointer;
  }

  /* Orbit track (the invisible circle path) */
  #mobile-orbit-overlay .orbit-track {
    position: absolute;
    width: min(75vw, 300px);
    height: min(75vw, 300px);
    border-radius: 50%;
    border: 1px solid rgba(80, 68, 58, 0.06);
    animation: orbit-revolve 30s linear infinite;
    pointer-events: none;
  }

  /* Individual planet */
  #mobile-orbit-overlay .orbit-planet {
    position: absolute;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
    animation: orbit-counter-revolve 30s linear infinite, orbit-pulse 3s ease-in-out infinite;
    -webkit-tap-highlight-color: transparent;
  }

  /* Planet positions — evenly distributed on the circle */
  #mobile-orbit-overlay .orbit-planet:nth-child(1) {
    /* Top (12 o'clock) */
    top: -34px; left: 50%; transform-origin: center center;
    margin-left: -34px;
    --glow-rgb: 255, 160, 90;
    background: linear-gradient(135deg, rgba(255,184,108,0.15), rgba(255,138,61,0.1));
    border: 1px solid rgba(255,160,90,0.25);
  }
  #mobile-orbit-overlay .orbit-planet:nth-child(2) {
    /* Right (3 o'clock) */
    top: 50%; right: -34px;
    margin-top: -34px;
    --glow-rgb: 100, 160, 255;
    background: linear-gradient(135deg, rgba(108,193,255,0.15), rgba(59,130,246,0.1));
    border: 1px solid rgba(100,160,255,0.25);
  }
  #mobile-orbit-overlay .orbit-planet:nth-child(3) {
    /* Bottom (6 o'clock) */
    bottom: -34px; left: 50%;
    margin-left: -34px;
    --glow-rgb: 170, 140, 255;
    background: linear-gradient(135deg, rgba(167,139,250,0.15), rgba(124,58,237,0.1));
    border: 1px solid rgba(170,140,255,0.25);
  }
  #mobile-orbit-overlay .orbit-planet:nth-child(4) {
    /* Left (9 o'clock) */
    top: 50%; left: -34px;
    margin-top: -34px;
    --glow-rgb: 76, 175, 80;
    background: linear-gradient(135deg, rgba(74,222,128,0.15), rgba(34,197,94,0.1));
    border: 1px solid rgba(76,175,80,0.25);
  }

  /* Planet icon */
  #mobile-orbit-overlay .orbit-planet .planet-icon {
    font-size: 16px;
    line-height: 1;
  }

  /* Planet label */
  #mobile-orbit-overlay .orbit-planet .planet-label {
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: rgba(50, 42, 36, 0.7);
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  /* Touch / Hover: pause orbit, enlarge planet */
  #mobile-orbit-overlay .orbit-track:has(.orbit-planet:active),
  #mobile-orbit-overlay .orbit-track.paused {
    animation-play-state: paused !important;
  }

  #mobile-orbit-overlay .orbit-track:has(.orbit-planet:active) .orbit-planet,
  #mobile-orbit-overlay .orbit-track.paused .orbit-planet {
    animation-play-state: paused !important;
  }

  #mobile-orbit-overlay .orbit-planet:active {
    transform: scale(1.18) !important;
    filter: brightness(1.15);
    animation-play-state: paused !important;
  }

  /* Bottom hint */
  .absolute.bottom-10 {
    bottom: 20px !important;
    z-index: 15 !important;
  }

  /* Nav bar — tighter on mobile */
  nav .h-14 {
    padding-left: 16px !important;
    padding-right: 16px !important;
    height: 48px !important;
  }

  nav .gap-7 {
    gap: 12px !important;
  }

  /* Bottom contact bar */
  .fixed.bottom-0 .py-4 {
    padding: 10px 12px !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  .fixed.bottom-0 .gap-8 {
    gap: 10px !important;
  }

  /* ============================================================
     2. ALL DETAIL PANELS — General Mobile Fixes
     ============================================================ */

  /* Smooth scroll */
  .fixed.inset-0.z-50.overflow-y-auto {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }

  /* Container padding — all detail panels */
  .fixed.inset-0.z-50 .max-w-4xl {
    padding: 72px 16px 40px !important;
    width: 90% !important;
    margin: 0 auto !important;
  }

  /* Close button: easier to tap */
  button.fixed.top-5.right-5,
  .fixed.top-5.right-5 {
    width: 40px !important;
    height: 40px !important;
    top: 12px !important;
    right: 12px !important;
  }

  /* Card inner padding */
  .fixed.inset-0.z-50 article.rounded-2xl > div,
  .fixed.inset-0.z-50 .rounded-2xl.p-6 {
    padding: 16px !important;
  }

  /* Header text */
  .fixed.inset-0.z-50 header h2,
  .fixed.inset-0.z-50 .mb-14 h2 {
    font-size: 22px !important;
  }

  /* Links wrap */
  .fixed.inset-0.z-50 .flex.items-center.gap-2.flex-wrap {
    gap: 6px !important;
  }

  .fixed.inset-0.z-50 .flex.items-center.gap-2.flex-wrap a {
    font-size: 9px !important;
    padding: 4px 10px !important;
  }

  /* Prevent overflow */
  .fixed.inset-0.z-50 img {
    max-width: 100% !important;
  }

  .fixed.inset-0.z-50 video {
    max-width: 100% !important;
  }

  /* ============================================================
     3. CONTENT CREATION — Phone + Grid Fix
     (Applied via JS data attributes)
     ============================================================ */

  /* Phone+Grid row → column */
  [data-mobile-layout="phone-grid-row"] {
    flex-direction: column !important;
    gap: 20px !important;
    align-items: center !important;
  }

  /* Phone container: center, full width */
  [data-mobile-layout="phone-container"] {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* ---- Phone mockup: strict iPhone ratio (1:2.16) ---- */
  [data-mobile-layout="phone-container"] > .relative.flex-shrink-0,
  [data-mobile-layout="phone-mockup-fix"] {
    width: 160px !important;
    aspect-ratio: 9 / 19.5 !important;
    max-height: 347px !important; /* 160 * 2.16 */
    overflow: hidden !important;
  }

  /* Phone inner screen: scrollable if content overflows */
  [data-mobile-layout="phone-container"] > .relative.flex-shrink-0 .relative.w-full.h-full,
  [data-mobile-layout="phone-mockup-fix"] .relative.w-full.h-full {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Grid container: full width */
  [data-mobile-layout="grid-container"] {
    width: 100% !important;
  }

  /* Viral grid: 2x2 with proper gap */
  [data-mobile-layout="viral-grid"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }

  /* Viral images: show bottom likes */
  [data-mobile-layout="viral-grid"] img {
    object-fit: cover !important;
    object-position: bottom !important;
  }

  /* ---- XIAOHONGSHU / DEWU: side-by-side → stacked ---- */
  [data-mobile-layout="side-by-side"] {
    flex-direction: column !important;
    gap: 16px !important;
  }

  [data-mobile-layout="side-by-side"] > div {
    width: 100% !important;
    flex: none !important;
  }

  /* Phone pair containers */
  [data-mobile-layout="phone-pair"] {
    gap: 10px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  [data-mobile-layout="phone-pair"] .relative.flex-shrink-0 {
    width: 120px !important;
    max-height: 260px !important;
    overflow: hidden !important;
  }

  /* Phone inner scrollable */
  [data-mobile-layout="phone-pair"] .relative.flex-shrink-0 .relative.w-full.h-full {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Stats row */
  [data-mobile-layout="stats-row"] {
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  [data-mobile-layout="stats-row"] > div {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 0 !important;
    padding: 10px 12px !important;
  }

  /* ============================================================
     4. DATA DRIVEN SECTION — Symmetry & Centering
     ============================================================ */

  /* Data section container: centered with breathing room */
  [data-mobile-section="data"] .max-w-4xl {
    width: 90% !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Data cards: full width, proper padding */
  .fixed.inset-0.z-50 .space-y-8 > div.rounded-2xl {
    padding: 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Data card grid: single column on mobile */
  .fixed.inset-0.z-50 .grid.grid-cols-1.md\:grid-cols-3 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Data card inner blocks: left-aligned text */
  .fixed.inset-0.z-50 .grid.grid-cols-1.md\:grid-cols-3 > div {
    text-align: left !important;
    padding: 14px !important;
  }

  /* Data card title row */
  .fixed.inset-0.z-50 .flex.items-center.justify-between.mb-5 {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* ============================================================
     5. AI APPLICATION SECTION — Mockup Window Ratio
     ============================================================ */

  /* AI section: flex-col already via lg: breakpoint, but ensure */
  .fixed.inset-0.z-50 .flex.flex-col.lg\:flex-row {
    flex-direction: column !important;
    gap: 16px !important;
  }

  .fixed.inset-0.z-50 .flex.flex-col.lg\:flex-row > div {
    width: 100% !important;
  }

  /* Browser mockup window (SS component): 16:9 aspect ratio */
  [data-mobile-layout="browser-mockup"] {
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
  }

  /* Browser mockup inner content area: constrained */
  [data-mobile-layout="browser-mockup"] > div:last-child {
    height: 100% !important;
    overflow: hidden !important;
  }

  [data-mobile-layout="browser-mockup"] > div:last-child img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top !important;
  }

  /* AI section phone mockup (TS component): proper ratio */
  [data-mobile-layout="ai-phone-mockup"] {
    width: 160px !important;
    aspect-ratio: 9 / 19.5 !important;
    max-height: 347px !important;
    overflow: hidden !important;
    margin: 0 auto !important;
  }

  [data-mobile-layout="ai-phone-mockup"] .relative.w-full.h-full {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* AI section space-y-10 */
  .fixed.inset-0.z-50 .space-y-10 {
    gap: 24px !important;
  }

  /* ============================================================
     6. EXPERIENCE SECTION — Timeline mobile
     ============================================================ */
  .fixed.inset-0.z-50 .space-y-8 > div {
    padding-left: 0 !important;
  }

}

/* ============================================================
   VERY SMALL SCREENS (< 375px) — Extra compression
   ============================================================ */
@media (max-width: 374px) {
  [data-mobile-layout="viral-grid"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  [data-mobile-layout="phone-container"] > .relative.flex-shrink-0 {
    width: 130px !important;
    max-height: 281px !important;
  }

  #mobile-orbit-overlay .orbit-track {
    width: 65vw !important;
    height: 65vw !important;
  }

  #mobile-orbit-overlay .orbit-planet {
    width: 58px !important;
    height: 58px !important;
  }

  #mobile-orbit-overlay .orbit-planet:nth-child(1) { top: -29px; margin-left: -29px; }
  #mobile-orbit-overlay .orbit-planet:nth-child(2) { right: -29px; margin-top: -29px; }
  #mobile-orbit-overlay .orbit-planet:nth-child(3) { bottom: -29px; margin-left: -29px; }
  #mobile-orbit-overlay .orbit-planet:nth-child(4) { left: -29px; margin-top: -29px; }
}