/* =============================================================
   SUMB — Hero 2.0 (Cinematic Product Presentation)
   -----------------------------------------------------------
   Extends (does not replace) the base .hero rules in style.css.
   Loaded after style.css + responsive.css so it can safely
   override the few properties that need a darker, more premium
   treatment (background, badge cards, entrance animation owner).
   All motion here is driven by js/hero.js (GSAP). This file only
   defines *appearance* + *idle/CSS-only* motion (grid, glow drift,
   particle drift, orbit spin) so those keep running smoothly even
   before JS finishes loading.
   ============================================================= */

.hero{
  --hero-bg:#050505;
  --hero-text:#F5F5F5;
  --hero-card:rgba(255,255,255,.04);
  background:var(--hero-bg) !important;
  color:var(--hero-text);
}

/* Replace the old soft-blob background with the new dark/ambient system */
.hero-bg::before,
.hero-bg::after{ display:none; }

/* The base file animates these with CSS keyframes on load; js/hero.js
   now owns their entrance + idle motion via GSAP, so hand control over. */
.hero-content,
.hero-visual,
.hero-visual img,
.hero-badge{ animation:none; }

.hero-content{ position:relative; z-index:2; }

/* ---------------- Layout: text right→left swap ----------------
   Brief asks for text on the left / product on the right. In this
   RTL grid the first source column sits on the physical right, so
   we flip placement with `order` (no markup changes, nothing else
   breaks) and mirror the column ratio to match. */
.hero .container{ grid-template-columns:.9fr 1.1fr; }
.hero-content{ order:2; }
.hero-visual{ order:1; }

/* ---------------- Ambient backdrop layers ---------------- */
.hero-noise{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.hero-ambient-glow{
  position:absolute; z-index:1; width:900px; height:900px; max-width:140vw; max-height:140vw;
  left:60%; top:45%; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(181,101,29,.22), transparent 70%);
  filter:blur(60px); pointer-events:none; will-change:transform;
  animation:hero-glow-drift 13s ease-in-out infinite;
}
@keyframes hero-glow-drift{
  0%,100%{ transform:translate(-54%,-46%) scale(1); }
  50%{ transform:translate(-46%,-54%) scale(1.1); }
}

/* ---------------- Product stage ---------------- */
.hero-visual{ position:relative; }
.hero-visual-inner{
  position:relative; min-height:460px;
}

.hero-bigword{
  position:absolute; z-index:1; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:clamp(120px,17vw,260px); font-weight:900; letter-spacing:.01em;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.07);
  opacity:.6; user-select:none; pointer-events:none; white-space:nowrap; line-height:1;
}

.hero-orbit{
  position:absolute; z-index:2; width:84%; padding-top:84%; left:50%; top:50%;
  transform:translate(-50%,-50%);
  border:1px solid rgba(181,101,29,.22); border-radius:50%; pointer-events:none;
  animation:hero-orbit-spin 20s linear infinite;
}
.hero-orbit::before{
  content:""; position:absolute; width:7px; height:7px; border-radius:50%;
  background:var(--color-accent); top:-3.5px; left:50%; margin-left:-3.5px;
  box-shadow:0 0 14px 2px rgba(181,101,29,.75);
}
@keyframes hero-orbit-spin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }

.hero-particles{ position:absolute; inset:-8% -4%; z-index:1; pointer-events:none; overflow:hidden; }
.hero-particles span{
  position:absolute; bottom:10%; width:3px; height:3px; border-radius:50%;
  background:var(--color-accent); opacity:0; animation:hero-particle-float linear infinite;
}
@keyframes hero-particle-float{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  12%{ opacity:.7; }
  88%{ opacity:.35; }
  100%{ transform:translateY(-180px) translateX(16px); opacity:0; }
}

.hero-shoe-glow-wrap{
  position:absolute; z-index:1; width:60%; padding-top:60%; left:52%; top:54%;
  transform:translate(-50%,-50%); pointer-events:none;
  animation:hero-shoe-glow-drift 9s ease-in-out infinite;
}
@keyframes hero-shoe-glow-drift{
  0%,100%{ margin-left:0; margin-top:0; }
  50%{ margin-left:14px; margin-top:-10px; }
}
.hero-shoe-glow{
  position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle, rgba(181,101,29,.4), transparent 68%);
  filter:blur(26px); will-change:transform,opacity;
}

.hero-shoe-shadow{
  position:absolute; z-index:2; left:50%; bottom:14%; width:46%; height:24px;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.6), transparent 74%);
  transform:translateX(-50%); filter:blur(3px); pointer-events:none; will-change:transform,opacity;
}

.hero-shoe-float{
  position:absolute; z-index:3; left:50%; top:50%; width:min(540px,86%);
  transform:translate(-50%,-50%); will-change:transform;
}
.hero-shoe-img{
  display:block; width:100%; height:auto;
  filter:drop-shadow(0 30px 36px rgba(0,0,0,.5));
  will-change:transform;
}

.hero-badge{
  background:var(--hero-card); border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(14px);
}

.hero-product-counter{
  position:absolute; z-index:4; bottom:2%; right:4%; display:flex; align-items:center; gap:8px;
  font-size:12px; letter-spacing:.08em; color:rgba(255,255,255,.5); font-weight:700; direction:ltr;
}
.hero-product-counter i{ width:22px; height:1px; background:rgba(255,255,255,.3); display:inline-block; }
.hero-product-counter span:first-child{ color:var(--color-accent); }

.hero-nav-dots{
  position:absolute; z-index:4; top:50%; right:-6px; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:14px;
}
.hero-nav-dots span{
  width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.25);
  display:block; transition:background .3s var(--ease),transform .3s var(--ease);
}
.hero-nav-dots span.active{
  background:var(--color-accent); transform:scale(1.5);
  box-shadow:0 0 10px rgba(181,101,29,.7);
}

/* ---------------- Word-by-word title reveal (entrance target) --------- */
.hero-title .word-wrap{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; margin-bottom:-.08em; }
.hero-title .word{ display:inline-block; will-change:transform; }

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion:reduce){
  .hero-orbit,
  .hero-ambient-glow,
  .hero-shoe-glow-wrap,
  .hero-particles span{ animation:none !important; }
}

/* ---------------- Responsive ---------------- */
@media (max-width:992px){
  /* Brief: on mobile, text goes on top, shoe below — restore natural order */
  .hero-content{ order:1; }
  .hero-visual{ order:2; }
  .hero .container{ grid-template-columns:1fr; }

  .hero-visual-inner{ min-height:320px; }
  .hero-shoe-float{ width:min(360px,78%); }
  .hero-bigword{ font-size:clamp(70px,24vw,150px); }
  .hero-nav-dots,
  .hero-product-counter{ display:none; }
}

@media (max-width:640px){
  .hero-shoe-float{ width:min(280px,82%); }
  .hero-orbit{ display:none; }
  .hero-visual-inner{ min-height:260px; }
}