/* paaalette modern layer. Loaded last. Remove its <link> in site/layout.blade.php to go back to the previous look.
   Idea: a gift being wrapped. One big motion (a satin ribbon that follows the scroll), small motions that answer a tap. */
:root{
  --ribbon:#B3264F;
  --font-head:'Fraunces','Young Serif','Noto Serif Malayalam',Georgia,serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}
h1,h2,h3,.s2-head h2,.slide h2{font-variation-settings:'SOFT' 100,'opsz' 120;letter-spacing:-.022em}
h1,h2,.slide h2{font-weight:600}
.lead,.s2-head p{font-size:1.1rem}

/* ---- header: a floating pill ---- */
.site-header{top:10px;margin:10px auto 0;width:min(1180px,100% - 20px);border:1px solid rgba(110,31,54,.12);border-radius:999px;background:rgba(255,249,245,.78);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);box-shadow:0 10px 30px -22px rgba(59,15,30,.55);transition:box-shadow .3s var(--ease),background .3s}
.site-header.is-scrolled{background:rgba(255,249,245,.92);box-shadow:0 16px 36px -20px rgba(59,15,30,.6)}
.site-header .container{width:100%;padding:0 12px 0 22px}
.site-header .nav{height:60px}
.nav-links a{transition:background .2s,color .2s}
@media(max-width:900px){
  .site-header{top:8px;margin-top:8px;width:calc(100% - 16px)}
  .site-header .container{padding:0 8px 0 16px}
  .nav-links{top:calc(100% + 8px);border:1px solid var(--line);border-radius:24px;box-shadow:0 24px 44px -24px rgba(59,15,30,.6);padding:10px 14px 16px}
}

/* ---- buttons: a satin sheen passes over when you hover or press ---- */
.btn{position:relative;overflow:hidden;transition:transform .25s var(--ease),background .25s,box-shadow .25s,color .25s}
.btn-primary::after,.btn-wa::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-120%);transition:transform .7s var(--ease);pointer-events:none}
.btn-primary:hover::after,.btn-wa:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(0) scale(.97)}

/* ---- hero: the photos are unwrapped one by one when the slide shows ---- */
@keyframes unwrap{from{clip-path:inset(100% 0 0 0 round 16px);opacity:.4}to{clip-path:inset(0 0 0 0 round 16px);opacity:1}}
@keyframes pop{from{opacity:0;scale:.8}to{opacity:1;scale:1}}
@keyframes rise{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
.slide.on .gift-stack figure{animation:unwrap .9s var(--ease) backwards}
.slide.on .gift-stack .g1{animation-delay:.1s}.slide.on .gift-stack .g3{animation-delay:.3s}.slide.on .gift-stack .g2{animation-delay:.45s}.slide.on .gift-stack .g4{animation-delay:.6s}
.slide.on .gift-stack .fchip{animation:pop .5s var(--ease) backwards}
.slide.on .gift-stack .fchip.c1{animation-delay:.75s}.slide.on .gift-stack .fchip.c2{animation-delay:.9s}
.slide.on .hc h2{animation:rise .8s var(--ease) backwards}
.slide.on .hc .lead{animation:rise .8s var(--ease) .12s backwards}
.slide.on .hc .hero-actions{animation:rise .8s var(--ease) .24s backwards}
.slide.on .hc .proof{animation:rise .8s var(--ease) .34s backwards}

/* ---- gift types: label slides up and the photo leans in when you point at it ---- */
.type{border-radius:24px;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.type:hover,.type:focus-visible{transform:translateY(-6px);box-shadow:0 28px 40px -26px rgba(59,15,30,.7)}
.type div{transition:transform .45s var(--ease)}
.type span{max-height:0;opacity:0;overflow:hidden;transition:max-height .4s var(--ease),opacity .3s}
.type:hover span,.type:focus-visible span{max-height:3em;opacity:.95}
@media(hover:none){.type span{max-height:none;opacity:.92}}

/* ---- our work: the mosaic unwraps once when it scrolls into view ---- */
.js .work.mosaic a{clip-path:inset(0 0 100% 0 round 18px);transition:clip-path .8s var(--ease)}
.js .work.mosaic.in a{clip-path:inset(0 0 0 0 round 18px)}
.work.mosaic a:nth-child(2){transition-delay:.08s}.work.mosaic a:nth-child(3){transition-delay:.16s}.work.mosaic a:nth-child(4){transition-delay:.24s}
.work.mosaic a:nth-child(5){transition-delay:.32s}.work.mosaic a:nth-child(6){transition-delay:.4s}.work.mosaic a:nth-child(7){transition-delay:.48s}.work.mosaic a:nth-child(8){transition-delay:.56s}

/* ---- price as a gift tag that swings when you point at the card ---- */
.sc-price{display:inline-block;position:relative;padding:.12rem .9rem .12rem 1.7rem;margin-left:-4px;background:var(--blush);color:var(--wine);font:600 1.35rem var(--font-hand);transform-origin:8px 50%;clip-path:polygon(14px 0,100% 0,100% 100%,14px 100%,0 50%);border-radius:0 6px 6px 0}
.sc-price::before{content:"";position:absolute;left:11px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.5px var(--wine)}
.sc-card{transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.sc-card:hover{transform:translateY(-4px);box-shadow:0 30px 44px -30px rgba(59,15,30,.7)}
.sc-card:hover .sc-price{animation:swing 1s var(--ease)}
@keyframes swing{0%{rotate:0deg}25%{rotate:-9deg}50%{rotate:5deg}75%{rotate:-2deg}100%{rotate:0deg}}

/* ---- the satin ribbon that follows the scroll (wide screens only) ---- */
.ribbon{position:fixed;right:6px;top:0;bottom:0;width:20px;z-index:40;pointer-events:none;display:none}
.ribbon-band{position:absolute;left:0;top:0;width:100%;height:0;background:linear-gradient(90deg,#8e1c40,#d94a78 38%,#f59ab5 50%,#c73660 66%,#8e1c40);box-shadow:0 0 14px rgba(179,38,79,.35);border-radius:0 0 4px 4px}
.ribbon-bow{position:absolute;left:50%;top:0;width:46px;height:46px;margin-left:-23px;color:var(--ribbon);transition:transform .5s var(--ease);transform-origin:50% 50%}
.ribbon-bow svg{width:100%;height:100%;filter:drop-shadow(0 4px 6px rgba(59,15,30,.3))}
.ribbon.done .ribbon-bow{transform:scale(1.35) rotate(-6deg)}
@media(min-width:1300px) and (prefers-reduced-motion:no-preference){.js .ribbon{display:block}}

/* ---- footer ---- */
.site-footer{border-radius:36px 36px 0 0}

@media(prefers-reduced-motion:reduce){
  .slide.on .gift-stack figure,.slide.on .gift-stack .fchip,.slide.on .hc>*{animation:none}
  .js .work.mosaic a{clip-path:none;transition:none}
  .btn::after,.sc-card:hover .sc-price{animation:none;transition:none}
}
.sc-price{align-self:flex-start;width:fit-content}
h1,h2,h3,.s2-head h2,.slide h2{letter-spacing:-.012em}

/* ---- the page colour runs behind the floating header (no white strip above the hero) ---- */
.site-header{margin-bottom:-72px}
main>.hero{padding-top:72px}
main:not(:has(>.hero)){padding-top:72px}
@media(max-width:900px){.site-header{margin-bottom:-70px}main>.hero{padding-top:70px}main:not(:has(>.hero)){padding-top:70px}}

/* ---- phones: the picture or demo comes first, then the words ---- */
@media(max-width:900px){
  .slide .hero-stage{order:-1;padding:14px 0 6px}
  .slide .hc{order:1;padding-top:6px}
  .gift-stack{margin:46px auto 40px}
}
@media(max-width:600px){.slide .phone{zoom:.82}}
/* phones: the floating tags cover the demo, and the same facts are in the text below, so hide them */
@media(max-width:600px){.slide .fchip{display:none!important}.gift-stack{margin:40px auto 30px}}