/* ============================================================
   AlmaniStore Modern — motion & micro-interaction layer (v1.5.0)
   Pairs with assets/js/motion.js and assets/js/vapor.js.
   Hidden states are only ever created by the JS at runtime, so a
   no-JS visitor always sees fully visible content.
   ============================================================ */

/* ------------------------------------------------ hero vapor canvas */
.hero-vapor{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:1;
}
.hero__grid{z-index:2}
.shop-hero,.about-hero,.account-hero{position:relative;overflow:hidden}
.shop-hero .container,.about-hero .container,.account-hero .container{position:relative;z-index:2}

/* ------------------------------------------------ hero intro */
.split-ready .split-word{
  display:inline-block;
  transform:translateY(1.15em) rotate(2deg);
  opacity:0;
  transition:transform .9s cubic-bezier(.19,1,.22,1),opacity .6s ease;
  transition-delay:calc(.12s + var(--wi,0) * 75ms);
  will-change:transform;
}
body.hero-in .split-ready .split-word{transform:none;opacity:1}
.hero__content h1{overflow:hidden}
/* Split-word spans must not pick up the accent styling that targets the
   h1's own <span>: they inherit color from whatever wraps them. */
.hero__content h1 .split-word{color:inherit;-webkit-text-stroke:inherit}

/* The generic .icon-btn display rule wins over .mobile-only in theme.css;
   make sure the hamburger never leaks into the desktop header. */
@media(min-width:861px){.mobile-only{display:none!important}}

.hero-seq{
  opacity:0;transform:translateY(26px);
  transition:opacity .8s ease,transform .9s cubic-bezier(.19,1,.22,1);
  transition-delay:var(--hd,.6s);
}
body.hero-in .hero-seq{opacity:1;transform:none}

/* ------------------------------------------------ scroll reveals */
[data-reveal]{
  opacity:0;transform:translateY(34px) scale(.985);
  transition:opacity .75s ease,transform .85s cubic-bezier(.2,.75,.2,1);
  transition-delay:var(--d,0s);
  will-change:transform,opacity;
}
[data-reveal].in-view{opacity:1;transform:none;will-change:auto}

/* ------------------------------------------------ parallax */
.is-parallax{translate:0 var(--py,0px)}

/* ------------------------------------------------ magnetic elements */
.btn,.icon-btn,.cart-btn,.slider-controls button,.promo-slider__arrow,.add-btn{
  translate:var(--mx,0px) var(--my,0px);
}

/* ------------------------------------------------ button ripple + shine */
.btn,.add-btn{position:relative;overflow:hidden}
.btn-ripple{
  position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.4),rgba(255,255,255,0) 65%);
  transform:scale(0);opacity:1;
  animation:btnRipple .65s ease-out forwards;
}
@keyframes btnRipple{to{transform:scale(1);opacity:0}}

.btn--primary::after{
  content:"";position:absolute;top:0;bottom:0;width:44%;
  left:-60%;transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  transition:left .55s ease;pointer-events:none;
}
.btn--primary:hover::after{left:130%}

/* ------------------------------------------------ 3D tilt + glare */
.tilt.tilt{
  transform:perspective(1050px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));
  transform-style:preserve-3d;
}
.tilt.tilt:hover{--lift:-6px}
.tilt-glare{
  position:absolute;inset:0;z-index:9;pointer-events:none;border-radius:inherit;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.16),transparent 42%);
  opacity:0;transition:opacity .3s ease;
}
.tilt:hover .tilt-glare{opacity:1}
.categories .tilt-glare{background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.34),transparent 42%)}

/* ------------------------------------------------ custom cursor */
.cursor-dot,.cursor-ring{
  position:fixed;top:0;left:0;z-index:9990;pointer-events:none;border-radius:50%;
  transition:opacity .25s ease;
}
.cursor-dot{
  width:7px;height:7px;margin:-3.5px 0 0 -3.5px;
  background:var(--lime,#c8ff32);
  box-shadow:0 0 12px rgba(200,255,50,.8);
}
.cursor-ring{
  width:34px;height:34px;margin:-17px 0 0 -17px;
  border:1.5px solid rgba(200,255,50,.55);
  transition:width .28s ease,height .28s ease,margin .28s ease,border-color .28s ease,opacity .25s ease,background .28s ease;
}
html.cursor-hot .cursor-ring{
  width:56px;height:56px;margin:-28px 0 0 -28px;
  border-color:rgba(84,226,210,.85);
  background:rgba(84,226,210,.08);
}
html.cursor-down .cursor-ring{width:24px;height:24px;margin:-12px 0 0 -12px}
html.has-cursor body{cursor:none}
html.has-cursor input,html.has-cursor textarea,html.has-cursor select{cursor:auto}

/* ------------------------------------------------ header behaviour */
.site-header{transition:transform .4s cubic-bezier(.4,0,.2,1),background .25s,border-color .25s}
.site-header.header--hidden{transform:translateY(-110%)}
.scroll-progress{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--cyan,#54e2d2),var(--lime,#c8ff32));
  transform:scaleX(0);transform-origin:100% 50%;
  box-shadow:0 0 10px rgba(200,255,50,.45);
  pointer-events:none;
}

/* ------------------------------------------------ ambient micro-details */
.eyebrow i{animation:eyebrowPulse 2.4s ease-in-out infinite}
@keyframes eyebrowPulse{0%,100%{box-shadow:0 0 18px var(--lime,#c8ff32)}50%{box-shadow:0 0 4px rgba(200,255,50,.4)}}

.text-link{position:relative}
.text-link::after{
  content:"";position:absolute;right:0;bottom:-3px;height:2px;width:0;
  background:currentColor;opacity:.6;transition:width .3s ease;
}
.text-link:hover::after{width:100%}

.product-card .product-art{transition:transform .45s cubic-bezier(.2,.75,.2,1)}
.product-card:hover .product-art{transform:translateY(-9px) rotate(var(--tilt,-4deg)) scale(1.03)}
.product-card .product-card__media img{transition:transform .45s cubic-bezier(.2,.75,.2,1)}
.product-card:hover .product-card__media img{transform:translateY(-7px) scale(1.04)}
.product-badge{animation:badgeFloat 3.2s ease-in-out infinite}
@keyframes badgeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

.category-card .round-arrow{transition:transform .3s ease,background .3s ease,color .3s ease}
.category-card:hover .round-arrow{transform:translateX(-6px);background:rgba(17,21,16,.9);color:#fff}

.brand-card{transition:transform .3s ease,border-color .3s ease,filter .3s ease}
.brand-card:hover{transform:translateY(-4px)}
/* Grayscale-until-hover only where hover exists — touch devices keep colour. */
@media (hover:hover){
  .brand-card__logo{filter:grayscale(1) contrast(1.05);opacity:.75;transition:filter .35s ease,opacity .35s ease}
  .brand-card:hover .brand-card__logo{filter:none;opacity:1}
}

.float-chip{animation:chipFloat 5.5s ease-in-out infinite}
.float-chip--2{animation-delay:-1.8s}
.float-chip--3{animation-delay:-3.4s}
@keyframes chipFloat{0%,100%{margin-top:0}50%{margin-top:-10px}}

.faq-item button i{transition:transform .3s ease,border-color .3s ease}
.faq-item.open button i{transform:rotate(180deg);border-color:rgba(17,21,16,.55)}

.testimonial-card{transition:transform .35s ease,border-color .35s ease}
.testimonial-card:hover{border-color:rgba(200,255,50,.35)}

/* accessible focus */
:focus-visible{outline:2px solid var(--lime,#c8ff32);outline-offset:3px;border-radius:4px}

/* ------------------------------------------------ touch / tablet */
@media (pointer:coarse){
  .cursor-dot,.cursor-ring{display:none}
  html.has-cursor body{cursor:auto}
}
@media (max-width:860px){
  .split-ready .split-word{transition-delay:calc(.08s + var(--wi,0) * 55ms)}
  [data-reveal]{transform:translateY(24px)}
  /* the shop filter drawer keeps height:max-content from its desktop
     sticky rule; stretch it so it fills the viewport as a drawer */
  .filters{height:auto}
}
/* (The old ≤600px category-card overrides were removed here: the current
   theme's two-per-row in-flow mobile category design must stay untouched.) */

/* ------------------------------------------------ reduced motion */
@media (prefers-reduced-motion:reduce){
  .hero-vapor{display:none}
  .split-ready .split-word,.hero-seq,[data-reveal]{opacity:1!important;transform:none!important}
  .cursor-dot,.cursor-ring{display:none}
  html.has-cursor body{cursor:auto}
  .site-header.header--hidden{transform:none}
  .is-parallax{translate:none}
}