/* FMST Signature Motion pack
   1) cross-document page transitions  3) film grain + aurora
   4) specular card shine  5) headline mask reveals
   8) watermark footer  10) WhatsApp pulse ring
   All effects respect prefers-reduced-motion. */

/* ── 1. seamless page transitions (View Transitions API, progressive) ── */
@view-transition { navigation: auto; }
@keyframes sigVtOut { to { opacity: 0; transform: translateY(-8px); } }
@keyframes sigVtIn  { from { opacity: 0; transform: translateY(10px); } }
::view-transition-old(root) { animation: sigVtOut .16s ease both; }
::view-transition-new(root) { animation: sigVtIn .26s cubic-bezier(.2,.8,.2,1) both; }

/* ── 3. film grain + ambient aurora ── */
.sig-grain{
  position:fixed;inset:-50%;z-index:2;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  animation:sigGrain 7s steps(8) infinite;
}
@keyframes sigGrain{
  0%{transform:translate(0,0)}12.5%{transform:translate(-3%,2%)}25%{transform:translate(2%,-3%)}
  37.5%{transform:translate(-2%,-2%)}50%{transform:translate(3%,1%)}62.5%{transform:translate(-1%,3%)}
  75%{transform:translate(2%,2%)}87.5%{transform:translate(-3%,-1%)}100%{transform:translate(0,0)}
}
.sig-aurora{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.sig-aurora i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.16;will-change:transform}
.sig-aurora i:nth-child(1){width:52vw;height:52vw;left:-14vw;top:-18vw;background:radial-gradient(circle,#F97316,transparent 66%);animation:sigAu1 26s ease-in-out infinite alternate}
.sig-aurora i:nth-child(2){width:44vw;height:44vw;right:-12vw;top:28vh;background:radial-gradient(circle,#1D4ED8,transparent 66%);animation:sigAu2 34s ease-in-out infinite alternate;opacity:.10}
.sig-aurora i:nth-child(3){width:38vw;height:38vw;left:30vw;bottom:-20vw;background:radial-gradient(circle,#C2570A,transparent 66%);animation:sigAu3 30s ease-in-out infinite alternate;opacity:.12}
@keyframes sigAu1{to{transform:translate(9vw,12vh) scale(1.15)}}
@keyframes sigAu2{to{transform:translate(-10vw,-8vh) scale(1.1)}}
@keyframes sigAu3{to{transform:translate(-6vw,-10vh) scale(1.2)}}

/* ── 4. specular shine sweep on catalog / brand cards ── */
.pcard .pv, .brand-logo-area{position:relative;overflow:hidden}
.pcard .pv::after, .brand-logo-area::after{
  content:'';position:absolute;top:-30%;bottom:-30%;left:-80%;width:55%;z-index:3;pointer-events:none;
  background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.34) 50%,transparent 80%);
  transform:translateX(-140%) rotate(6deg);
}
.pcard:hover .pv::after, .brand-card:hover .brand-logo-area::after{
  transition:transform .8s cubic-bezier(.25,.7,.3,1);
  transform:translateX(420%) rotate(6deg);
}

/* ── 5. headline mask reveals ── */
.sig-h span.sig-w{display:inline-block;overflow:hidden;vertical-align:top}
.sig-h span.sig-w>span{display:inline-block;transform:translateY(112%);transition:transform .65s cubic-bezier(.2,.75,.2,1)}
.sig-h.sig-in span.sig-w>span{transform:none}

/* ── 8. watermark footer ── */
footer{position:relative;overflow:hidden}
footer::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1.5px;
  background:linear-gradient(90deg,transparent,#F97316 30%,#C2570A 70%,transparent);opacity:.6;
}
.sig-wm{
  position:absolute;left:50%;bottom:-.18em;transform:translateX(-50%);
  font-size:clamp(120px,24vw,340px);font-weight:900;letter-spacing:-.02em;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.055);
  pointer-events:none;user-select:none;white-space:nowrap;z-index:0;
  font-family:'Inter',-apple-system,sans-serif;
}
footer>*{position:relative;z-index:1}

/* ── 10. floating WhatsApp button + pulse ring ── */
.sig-wa{position:fixed;bottom:24px;right:24px;z-index:9998;width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,#2BB94D,#1FA23F);display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,.45);transition:transform .22s ease}
.sig-wa:hover{transform:scale(1.1)}
.sig-wa svg{width:28px;height:28px;fill:#fff}
@media(max-width:768px){.sig-wa{bottom:18px;right:16px;width:52px;height:52px}}
@keyframes sigPing{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 22px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.sig-ping{animation:sigPing 8s cubic-bezier(.3,.6,.4,1) infinite;border-radius:50%}

@media (prefers-reduced-motion: reduce){
  .sig-grain,.sig-aurora{display:none}
  .sig-h span.sig-w>span{transform:none;transition:none}
  .sig-ping{animation:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}
@media (max-width:768px){
  .sig-aurora i{filter:blur(60px)}
  .sig-grain{opacity:.04}
}