/* =========================================================
   Victory Studios — motion layer
   Scroll reveals, entrance choreography, hover polish,
   mobile navigation. Loaded after styles.css.
   ========================================================= */

/* ---------- Page entrance ---------- */
body{
  opacity:0;
  animation: bodyIn .5s ease forwards;
  animation-delay:.04s;
}
@keyframes bodyIn{ to{ opacity:1; } }

/* ---------- Reveal-on-scroll base ---------- */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.16,.84,.44,1),
             transform .8s cubic-bezier(.16,.84,.44,1);
  will-change:opacity, transform;
}
.reveal.is-visible{
  opacity:1;
  transform:none;
}

/* hero + page-head content reveal slightly differently (soft rise, no delay wait for scroll) */
.hero-inner .reveal, .page-head-inner .reveal{
  transform:translateY(18px);
}

/* stagger — hero */
.hero-inner .eyebrow{transition-delay:.05s;}
.hero-inner h1{transition-delay:.16s;}
.hero-inner p.lede{transition-delay:.28s;}
.hero-inner .hero-actions{transition-delay:.4s;}

/* stagger — page head (about/products/contact) */
.page-head-inner .eyebrow{transition-delay:.05s;}
.page-head-inner h1{transition-delay:.16s;}
.page-head-inner p{transition-delay:.28s;}

/* stagger — grids */
.teasers .teaser:nth-child(1){transition-delay:0ms;}
.teasers .teaser:nth-child(2){transition-delay:90ms;}
.teasers .teaser:nth-child(3){transition-delay:180ms;}
.teasers .teaser:nth-child(4){transition-delay:270ms;}

.values .value-card:nth-child(1){transition-delay:0ms;}
.values .value-card:nth-child(2){transition-delay:120ms;}
.values .value-card:nth-child(3){transition-delay:240ms;}

.steps .step:nth-child(1){transition-delay:0ms;}
.steps .step:nth-child(2){transition-delay:120ms;}
.steps .step:nth-child(3){transition-delay:240ms;}

.stats-inner > div:nth-child(1){transition-delay:0ms;}
.stats-inner > div:nth-child(2){transition-delay:90ms;}
.stats-inner > div:nth-child(3){transition-delay:180ms;}
.stats-inner > div:nth-child(4){transition-delay:270ms;}

.contact-wrap > div:nth-child(1){transition-delay:0ms;}
.contact-wrap > .map-frame{transition-delay:140ms;}

.story-inner > .hero-frame{transition-delay:0ms;}
.story-inner > div:not(.hero-frame){transition-delay:120ms;}

.footer-top > *:nth-child(1){transition-delay:0ms;}
.footer-top > *:nth-child(2){transition-delay:80ms;}
.footer-top > *:nth-child(3){transition-delay:160ms;}
.footer-top > *:nth-child(4){transition-delay:240ms;}

/* ---------- Sticky topbar ---------- */
.topbar{
  transition:box-shadow .35s ease, padding .35s ease;
}
.topbar.is-scrolled{
  box-shadow:0 10px 30px rgba(0,0,0,0.28);
}
.topbar.is-scrolled .topbar-inner{
  padding-top:12px;
  padding-bottom:12px;
}
.topbar-inner{transition:padding .35s ease;}

.brand img{transition:transform .35s cubic-bezier(.16,.84,.44,1);}
.brand:hover img{transform:scale(1.06) rotate(-1deg);}

.nav-links a{transition:opacity .25s ease, border-color .25s ease;}

.cta-btn{transition:background .25s ease, transform .25s ease, box-shadow .3s ease;}
.cta-btn:hover{box-shadow:0 12px 26px rgba(201,49,61,0.35);}
.cta-btn svg{transition:transform .4s cubic-bezier(.16,.84,.44,1);}
.cta-btn:hover svg{transform:rotate(-10deg) scale(1.12);}
.cta-btn:active{transform:translateY(0) scale(.97);}

/* ---------- Page-head background drift ---------- */
.page-head{
  background-size:cover;
  animation:heroDrift 20s ease-in-out infinite alternate;
}
@keyframes heroDrift{
  0%{background-position:center 40%;}
  100%{background-position:center 60%;}
}

/* ---------- Home hero — alternating crossfade slideshow ---------- */
.hero-bg-layer{
  animation:heroCrossfade 36s ease-in-out infinite;
}
.hero-bg-layer:nth-child(1){animation-delay:0s;}
.hero-bg-layer:nth-child(2){animation-delay:9s;}
.hero-bg-layer:nth-child(3){animation-delay:18s;}
.hero-bg-layer:nth-child(4){animation-delay:27s;}
@keyframes heroCrossfade{
  0%{opacity:0; transform:scale(1.06);}
  4%{opacity:1;}
  22%{opacity:1; transform:scale(1.13);}
  25%{opacity:0; transform:scale(1.13);}
  100%{opacity:0; transform:scale(1.06);}
}

.hero-inner .hero-frame{
  transition:transform .6s cubic-bezier(.16,.84,.44,1);
}

/* ---------- Image / media hover zoom ---------- */
.hero-frame{overflow:hidden;}
.hero-frame img{transition:transform .9s cubic-bezier(.16,.84,.44,1);}
.hero-frame:hover img{transform:scale(1.045);}

.frame-slot{overflow:hidden; transition:border-color .3s ease, box-shadow .35s ease;}
.frame-slot img{transition:transform .7s cubic-bezier(.16,.84,.44,1);}
.frame-slot .cam-icon{transition:transform .45s ease, opacity .45s ease;}
.frame-slot::before{transition:opacity .3s ease, inset .45s cubic-bezier(.16,.84,.44,1);}
.product-media:hover .frame-slot img,
.teaser:hover .frame-slot img{transform:scale(1.06);}
.product-media:hover .cam-icon,
.teaser:hover .cam-icon{transform:scale(1.1); opacity:.6;}
.product-media:hover .frame-slot::before,
.teaser:hover .frame-slot::before{opacity:1; inset:8px;}
.product-media:hover .frame-slot{
  border-color:var(--wine);
  box-shadow:0 2px 4px rgba(27,32,40,0.06), 0 24px 48px -16px rgba(201,49,61,0.24);
}
.teaser:hover .frame-slot{border-color:var(--wine);}

.teaser{transition:border-color .3s ease, transform .35s cubic-bezier(.16,.84,.44,1), box-shadow .35s ease;}
.teaser:hover{box-shadow:0 18px 34px rgba(27,32,40,0.10);}

.value-card, .contact-card{transition:transform .35s cubic-bezier(.16,.84,.44,1), box-shadow .35s ease, border-color .3s ease;}
.value-card:hover{transform:translateY(-5px);}
.contact-card:hover{transform:translateY(-3px); box-shadow:0 16px 32px rgba(27,32,40,0.08); border-color:var(--wine);}

.item-order{transition:color .25s ease, transform .25s ease;}
.item-order:hover{transform:translateX(3px);}

.step{transition:transform .35s ease;}
.step:hover{transform:translateY(-3px);}

.stat-num{transition:transform .3s ease;}
.stats-inner > div:hover .stat-num{transform:scale(1.05);}

/* ---------- Mobile hamburger + nav panel ---------- */
.menu-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:34px; height:34px;
  background:none; border:none; padding:0;
  cursor:pointer;
  flex-shrink:0;
}
.menu-toggle span{
  display:block; width:22px; height:2px;
  background:var(--bone);
  transition:transform .3s ease, opacity .3s ease;
}
.menu-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle.active span:nth-child(2){opacity:0;}
.menu-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-nav{
  max-height:0;
  overflow:hidden;
  opacity:0;
  background:var(--ink);
  border-top:0 solid var(--line);
  transition:max-height .45s cubic-bezier(.16,.84,.44,1), opacity .35s ease;
  display:flex;
  flex-direction:column;
}
.mobile-nav.open{
  max-height:320px;
  opacity:1;
  border-top:1px solid var(--line);
}
.mobile-nav a{
  padding:16px 28px;
  color:var(--bone);
  font-size:0.9rem;
  letter-spacing:0.03em;
  border-bottom:1px solid var(--line);
  opacity:0.8;
  transition:opacity .2s ease, background .2s ease, padding-left .2s ease;
}
.mobile-nav a:hover, .mobile-nav a.active{
  opacity:1;
  background:rgba(234,226,206,0.04);
  padding-left:34px;
  color:var(--wine-bright);
}

@media (max-width:820px){
  .menu-toggle{display:flex;}
}

/* ---------- Floating WhatsApp button ---------- */
.whatsapp-float{
  position:fixed;
  right:24px; bottom:24px;
  z-index:80;
  width:60px; height:60px;
  border-radius:50%;
  background:var(--wine);
  color:var(--bone);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 28px rgba(0,0,0,0.35);
  transition:transform .3s cubic-bezier(.16,.84,.44,1), background .3s ease, box-shadow .3s ease;
  opacity:0;
  transform:scale(.5);
  animation:
    whatsappIn .55s cubic-bezier(.16,.84,.44,1) .8s forwards,
    whatsappBob 3.2s ease-in-out 1.6s infinite;
}
.whatsapp-float::before{
  content:'';
  position:absolute; inset:0;
  border-radius:50%;
  background:var(--wine-bright);
  animation: whatsappPing 2.4s cubic-bezier(0,0,.25,1) 1.8s infinite;
  z-index:0;
}
.whatsapp-float svg{
  width:28px; height:28px;
  position:relative; z-index:1;
  transition:transform .3s ease;
}
.whatsapp-float:hover{
  background:var(--wine-bright);
  transform:scale(1.1);
  box-shadow:0 16px 36px rgba(201,49,61,0.45);
}
.whatsapp-float:hover svg{transform:rotate(-8deg) scale(1.08);}
.whatsapp-float:active{transform:scale(.92);}

@keyframes whatsappIn{
  to{opacity:1; transform:scale(1);}
}
@keyframes whatsappBob{
  0%, 100%{transform:translateY(0);}
  50%{transform:translateY(-7px);}
}
@keyframes whatsappPing{
  0%{transform:scale(1); opacity:.5;}
  80%, 100%{transform:scale(1.85); opacity:0;}
}

@media (max-width:600px){
  .whatsapp-float{right:16px; bottom:16px; width:52px; height:52px;}
  .whatsapp-float svg{width:24px; height:24px;}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  body{animation:none; opacity:1;}
  .reveal{opacity:1; transform:none; transition:none;}
  .page-head{animation:none;}
  .hero-bg-layer{animation:none; opacity:0; transform:none;}
  .hero-bg-layer:first-child{opacity:1;}
  .hero-frame:hover img,
  .product-media:hover .frame-slot img,
  .teaser:hover .frame-slot img,
  .brand:hover img{transform:none;}
  .frame-slot::before{transition:none;}
  .whatsapp-float{animation:none; opacity:1; transform:none;}
  .whatsapp-float::before{animation:none; display:none;}
  *{scroll-behavior:auto;}
}