/* GiftNest motion layer — loaded after giftnest-plus.css
   Everything here is decorative and switches off under prefers-reduced-motion. */

/* ---------- scroll progress bar ---------- */
.gn-progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:200;pointer-events:none;
  background:linear-gradient(90deg,#ffb3cf,#e75d8e 55%,#ff9a76);
  transform-origin:0 50%;transform:scaleX(0);box-shadow:0 0 12px rgba(231,93,142,.55)}

/* ---------- hero: one orchestrated entrance on page load ---------- */
@keyframes gnRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes gnPhotoIn{from{opacity:0;transform:translateY(30px) scale(.94) rotate(7deg)}to{opacity:1;transform:rotate(2.5deg)}}
@keyframes gnPop{0%{opacity:0;transform:scale(.4)}70%{transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
html.js .home-hero .hero-content>*{opacity:0;animation:gnRise .75s cubic-bezier(.2,.8,.2,1) forwards}
html.js .home-hero .hero-content>*:nth-child(1){animation-delay:.05s}
html.js .home-hero .hero-content>*:nth-child(2){animation-delay:.16s}
html.js .home-hero .hero-content>*:nth-child(3){animation-delay:.28s}
html.js .home-hero .hero-content>*:nth-child(4){animation-delay:.38s}
html.js .home-hero .hero-content>*:nth-child(5){animation-delay:.48s}
html.js .home-hero .hero-content>*:nth-child(6){animation-delay:.58s}
html.js .home-hero .hero-content>*:nth-child(7){animation-delay:.68s}
/* photo frame enters first, then continues its existing slow tilt */
html.js .hero-photo .frame{animation:gnPhotoIn 1s cubic-bezier(.2,.8,.2,1) .15s both,heroTilt 9s ease-in-out 1.2s infinite}
html.js .hero-chip{animation:gnPop .6s cubic-bezier(.3,1.5,.5,1) both,float 5s ease-in-out 1.4s infinite}
html.js .hero-chip.chip-a{animation-delay:.8s,1.4s}
html.js .hero-chip.chip-b{animation-delay:1s,2.2s}
html.js .hero-chip.chip-c{animation-delay:1.2s,3s}

/* halo behind the hero photo breathes */
@keyframes gnBreathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.09);opacity:1}}
.hero-photo .stage-halo{animation:gnBreathe 6s ease-in-out infinite}

/* soft drifting hearts + sparkles in the hero (spans added by JS) */
.gn-drift{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.gn-drift i{position:absolute;bottom:-30px;font-style:normal;color:#f08ab0;opacity:0;
  animation:gnDrift linear infinite;will-change:transform,opacity}
@keyframes gnDrift{
  0%{transform:translate3d(0,0,0) rotate(0) scale(.7);opacity:0}
  12%{opacity:.55}
  85%{opacity:.3}
  100%{transform:translate3d(var(--dx,30px),-560px,0) rotate(var(--rot,40deg)) scale(1.1);opacity:0}}
.home-hero{position:relative}
.home-hero .hero-grid{position:relative;z-index:1}

/* ---------- buttons: shimmer + press + ripple ---------- */
.btn{position:relative;overflow:hidden;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .25s,color .25s}
.btn:active{transform:scale(.97)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(231,93,142,.38)}
.btn-primary::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);animation:gnShimmer 4.6s ease-in-out 1.6s infinite;pointer-events:none}
@keyframes gnShimmer{0%{left:-70%}22%,100%{left:140%}}
.btn>span{display:inline-block;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.btn:hover>span{transform:translate(3px,-3px)}
.gn-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);
  animation:gnRipple .6s ease-out forwards;pointer-events:none}
@keyframes gnRipple{to{transform:scale(4);opacity:0}}

/* ---------- interest / category tiles ---------- */
.category-tile{position:relative;overflow:hidden}
.category-tile::before{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);
  transform:skewX(-18deg);transition:left .75s ease;pointer-events:none;z-index:1}
.category-tile:hover::before{left:140%}
.tile-emoji,.studio-emoji,.gn-stepicon{display:inline-block;transform-origin:50% 80%;
  transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.category-tile:hover .tile-emoji{animation:gnWiggle .7s ease both}
.studio-card:hover .studio-emoji{animation:gnWiggle .7s ease both}
@keyframes gnWiggle{0%{transform:none}25%{transform:translateY(-9px) rotate(-12deg) scale(1.18)}
  55%{transform:translateY(-3px) rotate(9deg) scale(1.12)}80%{transform:rotate(-4deg) scale(1.1)}100%{transform:scale(1.1)}}
.tile-arrow{display:inline-block;transition:transform .35s cubic-bezier(.2,.8,.2,1),color .3s}
.category-tile:hover .tile-arrow{transform:translate(4px,-4px) scale(1.2);color:#e75d8e}
.category-tile:focus-visible,.photo-tile:focus-visible,.studio-card:focus-visible{outline:3px solid #e75d8e;outline-offset:3px}

/* ---------- photo tiles (people / occasions) ---------- */
.photo-tile .pt-label{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.photo-tile:hover .pt-label{transform:translateY(-6px)}
.photo-tile .pt-arrow{transition:transform .45s cubic-bezier(.3,1.4,.5,1),background .3s,color .3s}

/* ---------- idea cards ---------- */
.idea-card .idea-emoji{transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.idea-card:hover .idea-emoji{transform:scale(1.12) rotate(-6deg)}
.idea-num{transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.idea-card:hover .idea-num{transform:scale(1.14) rotate(-5deg)}
.save-idea{transition:transform .25s,background .25s,color .25s,border-color .25s}
.save-idea:active{transform:scale(.94)}
.save-idea.gn-pop{animation:gnHeart .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes gnHeart{0%{transform:scale(1)}35%{transform:scale(1.22) rotate(-3deg)}65%{transform:scale(.96)}100%{transform:scale(1)}}
.gn-burst{position:fixed;pointer-events:none;z-index:300;font-size:16px;color:#e75d8e;
  animation:gnBurst .9s ease-out forwards}
@keyframes gnBurst{from{opacity:1;transform:translate(0,0) scale(.6)}to{opacity:0;transform:translate(var(--bx),var(--by)) scale(1.3) rotate(var(--br))}}
.saved-count{animation:gnPop .45s cubic-bezier(.3,1.6,.5,1)}

/* ---------- process steps + promo ---------- */
.gn-process-card.in .gn-stepicon{animation:gnPop .7s cubic-bezier(.3,1.6,.5,1) .25s both}
.gn-process-card:hover .gn-stepicon{transform:scale(1.18) rotate(-8deg)}
@keyframes gnBob2{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(-.5deg) translateY(-10px)}}
.promo-photo img{animation:gnBob2 7s ease-in-out infinite}
.promo-photo{position:relative}
.promo-photo::after{content:"♥";position:absolute;right:-6px;bottom:18px;width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;background:#fff;color:#e75d8e;font-size:1.5rem;
  box-shadow:0 14px 30px rgba(220,100,150,.3);animation:gnBeat 2.4s ease-in-out infinite}
@keyframes gnBeat{0%,100%{transform:scale(1)}12%{transform:scale(1.18)}24%{transform:scale(1)}36%{transform:scale(1.12)}48%{transform:scale(1)}}

/* ---------- headings: accent dot bounces in once revealed ---------- */
.section-heading.in .accent,.section-heading .accent{display:inline-block}
html.js .section-heading.reveal.in .accent{animation:gnPop .6s cubic-bezier(.3,1.8,.5,1) .35s both}
html.js .home-hero h1 .accent{display:inline-block;animation:gnPop .6s cubic-bezier(.3,1.8,.5,1) 1s both}

/* ---------- nav: underline grows, dropdown eases in ---------- */
.nav-trigger,.site-header nav>a{position:relative}
.mega{transform-origin:50% 0}
.nav-drop.open .mega{animation:gnMega .32s cubic-bezier(.2,.8,.2,1)}
@keyframes gnMega{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}
.brand-icon{transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.brand:hover .brand-icon{transform:rotate(-14deg) scale(1.12)}

/* ---------- back to top ---------- */
.gn-top{position:fixed;right:22px;bottom:22px;z-index:150;width:48px;height:48px;border-radius:50%;border:0;
  background:#e75d8e;color:#fff;font-size:1.2rem;cursor:pointer;box-shadow:0 14px 30px rgba(231,93,142,.4);
  opacity:0;transform:translateY(16px) scale(.8);pointer-events:none;
  transition:opacity .3s,transform .35s cubic-bezier(.3,1.5,.5,1),background .25s}
.gn-top.show{opacity:1;transform:none;pointer-events:auto}
.gn-top:hover{background:#d84a80;transform:translateY(-4px)}
.gn-top:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px #e75d8e}

/* ---------- reduced motion: keep everything static ---------- */
@media (prefers-reduced-motion:reduce){
  html.js .home-hero .hero-content>*,html.js .hero-chip,html.js .hero-photo .frame,
  html.js .home-hero h1 .accent,html.js .section-heading.reveal.in .accent{animation:none!important;opacity:1}
  .hero-photo .stage-halo,.promo-photo img,.promo-photo::after,.btn-primary::after,.gn-drift,.saved-count,
  .gn-process-card.in .gn-stepicon{animation:none!important}
  .category-tile::before{display:none}
  .category-tile:hover .tile-emoji,.studio-card:hover .studio-emoji{animation:none}
  .gn-progress{display:none}
}