/* =========================================================
   S.Y.E.D Garment & Co — 3D Scroll Animation Layer
   Non-destructive add-on: keeps existing layout/content 100%
   the same, only adds motion/depth on top of it.
   ========================================================= */

html{ scroll-behavior:smooth; }

/* ---- perspective stages (containers only — never body/html,
   so position:fixed / sticky elements are never affected) ---- */
.hero-inner, .story-grid, .cap-grid, .cat-grid, .fabric-grid,
.testimonial-grid, .why-grid, .stat-row, .service-grid,
.gallery, .shop-grid, .form-grid-2, .location-grid, .gallery-grid,
.nav-cta, .footer-inner, .hero-ctas, .page-head{
  perspective:1400px;
}

/* ---- generic 3D reveal-on-scroll ---- */
[data-3d]{
  opacity:0;
  transform-style:preserve-3d;
  will-change:transform, opacity;
  transition:opacity .9s cubic-bezier(.22,.68,0,1.01),
             transform .9s cubic-bezier(.22,.68,0,1.01);
  transition-delay:var(--d, 0ms);
}
[data-3d].in-view{ opacity:1 !important; transform:none !important; }

[data-3d="up"]    { transform:translateY(64px) rotateX(-16deg) translateZ(-90px); transform-origin:bottom center; }
[data-3d="down"]  { transform:translateY(-50px) rotateX(14deg) translateZ(-70px); transform-origin:top center; }
[data-3d="left"]  { transform:translateX(-80px) rotateY(26deg) translateZ(-60px); transform-origin:left center; }
[data-3d="right"] { transform:translateX(80px) rotateY(-26deg) translateZ(-60px); transform-origin:right center; }
[data-3d="scale"] { transform:scale(.8) translateZ(-140px) rotateX(8deg); }
[data-3d="flip"]  { transform:rotateY(85deg) translateZ(-40px); transform-origin:left center; }

/* ---- pointer-driven card tilt ---- */
.tilt-3d{
  transform-style:preserve-3d;
  transition:transform .25s ease, box-shadow .25s ease;
  will-change:transform;
}
.tilt-3d:hover, .tilt-3d:focus-within{
  box-shadow:0 26px 54px -16px rgba(17,17,17,.28);
  z-index:2;
}

/* ---- nav gets a subtle lifted-depth shadow once scrolled ---- */
nav{ transition:box-shadow .35s ease, transform .35s ease; }
nav.is-scrolled{ box-shadow:0 18px 40px rgba(0,0,0,.28); }

/* ---- loop dividers get a gentle depth sway tied to scroll ---- */
.loop-divider svg{ transition:transform .5s ease-out; will-change:transform; }

/* ---- hero / story visuals: parallax handled inline via JS transform,
   these rules just make sure they animate smoothly ---- */
.hero-visual, .story-photo, .story-photo img{
  will-change:transform;
  transition:transform .1s linear;
}

/* ---- slide depth-cube feel layered on top of existing opacity fade ---- */
.slide{
  transition:opacity 1.1s ease, transform 1.1s cubic-bezier(.22,.68,0,1.01);
  transform-style:preserve-3d;
}
.slide:not(.active){ transform:scale(1.045) translateZ(-50px); }
.slide.active{ transform:scale(1) translateZ(0); }

/* =========================================================
   Word-by-word 3D heading reveal
   Applies to hero + page + section headings site-wide.
   ========================================================= */
.word3d{
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
  padding-bottom:0.12em;
  margin-bottom:-0.12em;
}
.word3d-inner{
  display:inline-block;
  transform:translateY(115%) rotateX(-75deg);
  opacity:0;
  transition:transform .8s cubic-bezier(.22,.68,0,1.01), opacity .6s ease;
  transition-delay:var(--wd, 0ms);
  transform-origin:bottom center;
}
.word3d-trigger.in-view .word3d-inner{
  transform:translateY(0) rotateX(0deg);
  opacity:1;
}

/* =========================================================
   Loop-art hero graphic — a real "knitting loop" animation:
   the ring gently tumbles in 3D while the thread paths draw
   themselves in and out, like yarn being knit in real time.
   ========================================================= */
.loop-art{
  transform-style:preserve-3d;
  animation:loopTumble3D 9s cubic-bezier(.45,.05,.55,.95) infinite;
}
.loop-ring{
  transform-box:fill-box;
  transform-origin:center;
  animation:loopRingPulse 4.5s ease-in-out infinite;
}
.loop-threads{
  transform-box:fill-box;
  transform-origin:center;
}
.loop-threads path{
  stroke-linecap:round;
  animation:loopDraw 4.5s ease-in-out infinite;
}
.loop-threads path:nth-child(1){ animation-delay:0s; }
.loop-threads path:nth-child(2){ animation-delay:.5s; }
.loop-threads path:nth-child(3){ animation-delay:1s; }

@keyframes loopTumble3D{
  0%   { transform:rotateY(0deg)   rotateX(0deg); }
  25%  { transform:rotateY(95deg)  rotateX(12deg); }
  50%  { transform:rotateY(180deg) rotateX(0deg); }
  75%  { transform:rotateY(275deg) rotateX(-12deg); }
  100% { transform:rotateY(360deg) rotateX(0deg); }
}
@keyframes loopRingPulse{
  0%, 100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.035); opacity:.75; }
}
/* stroke-dasharray/offset (--len) is set inline by JS to each path's
   real length, so this genuinely draws the thread rather than just
   fading it — falls back gracefully to a fade if JS hasn't run yet. */
@keyframes loopDraw{
  0%   { stroke-dashoffset:var(--len, 0); opacity:.25; }
  45%  { stroke-dashoffset:0; opacity:1; }
  65%  { stroke-dashoffset:0; opacity:1; }
  100% { stroke-dashoffset:calc(-1 * var(--len, 0)); opacity:.25; }
}

/* =========================================================
   Button 3D hover / press feedback
   ========================================================= */
.btn{
  transition:transform .25s cubic-bezier(.22,.68,0,1.01), box-shadow .25s ease;
  transform-style:preserve-3d;
}
.btn-primary:hover, .btn-outline:hover, .btn-shop:hover{
  transform:translateY(-4px) rotateX(8deg);
  box-shadow:0 18px 32px rgba(17,17,17,.18);
}
.btn:active{
  transform:scale(.95) translateY(1px) rotateX(0deg);
  box-shadow:none;
  transition-duration:.1s;
}

/* =========================================================
   Idle float — small decorative pills feel alive
   ========================================================= */
@keyframes chipFloat{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-5px); }
}
.spec-chip{ animation:chipFloat 3.6s ease-in-out infinite; }
.spec-chip:nth-child(2){ animation-delay:.25s; }
.spec-chip:nth-child(3){ animation-delay:.5s; }

.ticker-pill{ animation:chipFloat 3.2s ease-in-out infinite; }
.ticker-pill:nth-child(odd){ animation-delay:.35s; }
.ticker-pill:nth-child(3n){ animation-delay:.7s; }

/* =========================================================
   Nav logo — tiny persistent life without being distracting
   ========================================================= */
.logo-mark svg, .nav-logo svg{ transition:transform .4s ease; }
.nav-logo:hover svg{ transform:rotate(-12deg); }

/* ---- reduced motion & mobile-friendly fallback ---- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  [data-3d]{ transition:none !important; transform:none !important; opacity:1 !important; }
  .tilt-3d{ transition:none !important; }
  .slide{ transition:opacity .6s ease !important; transform:none !important; }
  .word3d-inner{ transition:none !important; transform:none !important; opacity:1 !important; }
  .loop-art, .loop-ring, .loop-threads, .loop-threads path, .spec-chip, .ticker-pill{ animation:none !important; }
  .btn:hover, .btn:active{ transform:none !important; }
}

@media (max-width:700px){
  [data-3d="left"], [data-3d="right"]{ transform:translateY(46px) rotateX(-10deg) translateZ(-40px); }
  .tilt-3d:hover, .tilt-3d:focus-within{ box-shadow:none; }
}

/* =========================================================
   Responsive polish — mobile / half-tab (tablet) / desktop
   Some pages force these grids to a single column below 900px;
   that wastes a lot of width on tablets, so we restore a
   2-column layout for the tablet band and keep true phones
   at a single column.
   ========================================================= */
@media (min-width:601px) and (max-width:900px){
  .cap-grid, .cat-grid, .fabric-grid,
  .why-grid, .service-grid, .stat-row,
  .testimonial-grid{
    grid-template-columns:repeat(2, 1fr) !important;
  }
  .story-grid, .location-grid{
    grid-template-columns:1fr !important;
  }
  .hero-visual{ max-width:280px !important; }
  .wrap, .nav-inner{ padding-left:32px; padding-right:32px; }
}

@media (max-width:600px){
  .cap-grid, .cat-grid, .fabric-grid,
  .why-grid, .service-grid,
  .testimonial-grid{
    grid-template-columns:1fr !important;
  }
  .hero-visual{ max-width:190px !important; }
  .word3d-inner{ transition-duration:.6s; }
}