/* ========================================================
   ORIGAMI â€” MOBILE PERFORMANCE PATCH v4
   Fixes: marquee, client scroll, 3D smoothness
   + Full override prefers-reduced-motion
   + Text-based client wordmarks for marquee (NEW in v4)
   Apply: Add as last <link> in <head> to override existing CSS
   ======================================================== */

/* ============ GPU acceleration hints ============ */
.marquee-track,
.client-track,
.kusudama,
.kusudama-stage,
.ring-outer{
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

/* ============ FIX 1: Marquee text scroll smoothness ============ */
@media (max-width: 900px){
  .marquee-track{
    font-size: 16px !important;
    letter-spacing: 0.03em !important;
    animation-duration: 45s !important;
  }
  .marquee-2 .marquee-track{
    animation-duration: 50s !important;
  }
  .marquee{
    transform: rotate(-0.8deg) translateY(0) !important;
    padding: 14px 0 !important;
  }
  .marquee-2{
    transform: rotate(0.8deg) translateY(-8px) !important;
  }
}

@media (max-width: 600px){
  .marquee-track{
    font-size: 14px !important;
    animation-duration: 50s !important;
  }
  .marquee-2 .marquee-track{
    animation-duration: 55s !important;
  }
  .marquee{
    transform: rotate(-0.5deg) translateY(0) !important;
  }
  .marquee-2{
    transform: rotate(0.5deg) translateY(-6px) !important;
  }
}

/* ============ FIX 2: Client marquee speed (portfolio) ============ */
@media (max-width: 900px){
  .client-track{
    animation-duration: 60s !important;
  }
  .client-row{
    gap: 50px !important;
    padding-right: 50px !important;
  }
}

@media (max-width: 600px){
  .client-track{
    animation-duration: 70s !important;
  }
  .client-row{
    gap: 40px !important;
    padding-right: 40px !important;
  }
}

/* ============ FIX 3: 3D animation mobile smoothness ============ */
@media (max-width: 900px){
  .kusudama{
    animation-duration: 30s !important;
  }
  .ring-outer{
    animation-duration: 45s !important;
  }
  .kusudama-face svg{
    filter: drop-shadow(0 0 10px var(--pink)) drop-shadow(0 0 6px var(--cyan)) !important;
  }
}

/* ============ FIX 4: Disable expensive effects on tiny screens ============ */
@media (max-width: 480px){
  .binary-col{
    display: none !important;
  }
  .grid-bg{
    animation: none !important;
  }
}

/* ========================================================
   FIX 5: TEXT-BASED CLIENT WORDMARKS (NEW)
   Replace logo images with styled text â€” instant, no upload needed
   ======================================================== */

/* Client wordmark in marquee (text-based) */
.client-row .client-wm{
  font-family: 'Unbounded', 'Helvetica Neue', sans-serif;
  font-weight: 800;
  font-size: 32px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  transition: color 0.3s, transform 0.3s;
  flex-shrink: 0;
}

.client-row .client-wm:hover{
  color: rgba(255, 255, 255, 1);
  transform: scale(1.05);
}

.client-row .client-wm em{
  font-style: normal;
  font-weight: 600;
  margin-left: 2px;
}

/* Brand-specific accent colors (matching brand identity) */
.client-wm.wm-mrdiy em{ color: #ffb800; }       /* MR.DIY signature yellow */
.client-wm.wm-tefal em{ color: #ff0080; }       /* Tefal red-pink */
.client-wm.wm-jec em{ color: #00f0ff; }          /* JEC clinic blue */
.client-wm.wm-btn em{ color: #ffb800; }          /* BTN gold */
.client-wm.wm-bodyshop em{ color: #00f0ff; }     /* Body Shop green-cyan */

/* Mobile sizing */
@media (max-width: 900px){
  .client-row .client-wm{
    font-size: 26px !important;
  }
}

@media (max-width: 600px){
  .client-row .client-wm{
    font-size: 22px !important;
  }
}

/* ========================================================
   FIX 6: FULL OVERRIDE prefers-reduced-motion
   Force animations to run normally regardless of OS setting
   ======================================================== */
@media (prefers-reduced-motion: reduce){
  
  *,
  *::before,
  *::after{
    animation-duration: revert !important;
    animation-delay: revert !important;
    transition-duration: revert !important;
    transition-delay: revert !important;
  }
  
  .grid-bg{ animation: gridMove 20s linear infinite !important; }
  
  .ring-outer{ animation: rotateY 30s linear infinite !important; }
  .kusudama{ animation: kusudamaSpin 20s linear infinite !important; }
  
  .marquee-track{ animation: marqueeScroll 30s linear infinite !important; }
  .marquee-2 .marquee-track{ animation-duration: 35s !important; }
  
  .client-track{ animation: clientScroll 38s linear infinite !important; }
  
  @media (max-width: 900px){
    .marquee-track{ animation-duration: 45s !important; }
    .marquee-2 .marquee-track{ animation-duration: 50s !important; }
    .client-track{ animation-duration: 60s !important; }
    .kusudama{ animation-duration: 30s !important; }
    .ring-outer{ animation-duration: 45s !important; }
  }
  
  @media (max-width: 600px){
    .marquee-track{ animation-duration: 50s !important; }
    .marquee-2 .marquee-track{ animation-duration: 55s !important; }
    .client-track{ animation-duration: 70s !important; }
  }
}