/* =========================================================
   Pastora Irene Familia · Pase · Premium motion and effects
   Loaded after style.css. Everything here is visual polish;
   removing this file leaves a fully working card.
   ========================================================= */
:root{
  --spring:cubic-bezier(.34,1.56,.64,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --gold-1:#E9CF95; --gold-2:#B8924A; --gold-3:#8C6A2C;
}

/* ---------- Shared press physics ---------- */
.fx{position:relative;overflow:hidden;isolation:isolate;
  transition:transform .55s var(--spring), box-shadow .35s var(--ease-out), background-color .3s, border-color .3s}
.fx:active{transform:scale(.965);transition-duration:.09s}
.ripple{position:absolute;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle, rgba(255,255,255,.45) 0%, rgba(255,255,255,.18) 40%, rgba(255,255,255,0) 70%);
  transform:scale(0);opacity:1;animation:ripple .7s var(--ease-out) forwards}
.row .ripple,.btn-share .ripple,.btn-more .ripple,.sheet-grid .ripple{
  background:radial-gradient(circle, rgba(142,35,56,.16) 0%, rgba(142,35,56,.06) 45%, rgba(142,35,56,0) 70%)}
.book .ripple{background:radial-gradient(circle, rgba(233,207,149,.22) 0%, rgba(233,207,149,0) 65%)}
@keyframes ripple{to{transform:scale(1);opacity:0}}
.fx > *:not(.ripple){position:relative;z-index:1}

/* ---------- Language pill: sliding thumb ---------- */
.lang{position:relative}
.lang-thumb{position:absolute;top:4px;left:4px;height:34px;width:50px;border-radius:999px;background:var(--wine,#5A1022);
  box-shadow:0 4px 12px -4px rgba(90,16,34,.55);transition:transform .5s var(--spring), width .3s var(--ease-out);z-index:0}
.lang button{position:relative;z-index:1;width:50px;min-width:0;transition:color .3s}
.lang button[aria-pressed="true"]{color:#FBF4EE}

/* ---------- The pass: lift, tilt, holographic shine ---------- */
.pass{transform:perspective(1000px) rotateX(var(--rx,0)) rotateY(var(--ry,0));
  transition:transform .7s var(--spring), box-shadow .4s var(--ease-out)}
.pass.tilting{transition:transform .12s linear, box-shadow .4s}
.pass-shine{position:absolute;inset:0;pointer-events:none;z-index:3;border-radius:inherit;mix-blend-mode:soft-light;
  background:linear-gradient(115deg, transparent 32%, rgba(255,236,200,.55) 44%, rgba(255,210,225,.45) 50%, rgba(210,230,255,.4) 56%, transparent 68%);
  background-size:260% 100%;background-position:130% 0;animation:passShine 7s var(--ease-out) 2.4s infinite}
@keyframes passShine{0%{background-position:130% 0}24%,100%{background-position:-30% 0}}
.pass.tilting .pass-shine{animation:none;background-position:var(--sx,50%) 0;transition:background-position .12s linear}
.pass-head{position:relative;overflow:hidden}
.pass-head::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0) 60%);pointer-events:none}
.pass-photo{transition:transform .6s var(--spring)}
.pass:hover .pass-photo{transform:translateY(-3px) scale(1.02)}

/* ---------- Save: wine satin, gold hairline, periodic sheen ---------- */
.btn-save{
  background:linear-gradient(180deg,#7A1A31 0%, #5E1024 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(233,207,149,.28),
             0 12px 24px -12px rgba(94,16,36,.75)}
.btn-save::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;pointer-events:none;
  background:linear-gradient(105deg, transparent 30%, rgba(255,236,200,.38) 46%, rgba(255,255,255,.55) 50%, rgba(255,236,200,.38) 54%, transparent 70%);
  transform:translateX(-120%);animation:sheen 6.5s var(--ease-out) 3.2s infinite}
@keyframes sheen{0%{transform:translateX(-120%)}22%,100%{transform:translateX(120%)}}
.btn-save.done{background:linear-gradient(180deg,var(--gold-2) 0%, var(--gold-3) 100%);color:#FFFDF7;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 12px 26px -12px rgba(140,106,44,.8)}
.btn-save.done::before{animation:none;opacity:0}
.btn-save.celebrate{animation:pop .6s var(--spring)}
@keyframes pop{0%{transform:scale(.96)}55%{transform:scale(1.04)}100%{transform:scale(1)}}
.btn-save.celebrate svg path{stroke-dasharray:24;stroke-dashoffset:24;animation:draw .45s var(--ease-out) .08s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.btn-save.celebrate::after{content:"";position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 0 rgba(233,207,149,.7);animation:halo .9s var(--ease-out) forwards}
@keyframes halo{to{box-shadow:0 0 0 14px rgba(233,207,149,0)}}

/* ---------- Tiles: gradient at rest, fills to solid wine on hover / tap ---------- */
.tile{transition:transform .55s var(--spring), box-shadow .4s var(--ease-out)}
.tile span{transition:color .3s var(--ease-out)}
.tile svg{transition:transform .5s var(--spring), color .3s}
/* Solid wine fill uses an inset shadow so it animates smoothly over the gradient */
.tile.lit,.tile:focus-visible{box-shadow:inset 0 0 0 60px #5A1022, 0 14px 26px -14px rgba(74,20,32,.75), 0 2px 0 rgba(59,12,24,1)}
.tile.lit span,.tile:focus-visible span{color:#FBF4EE}
@media (hover:hover){
  .tile:hover{box-shadow:inset 0 0 0 60px #5A1022, 0 14px 26px -14px rgba(74,20,32,.75), 0 2px 0 rgba(59,12,24,1)}
  .tile:hover span{color:#FBF4EE}
  .tile:hover svg{transform:translateY(-3px)}
}
.tile:active{box-shadow:inset 0 0 0 60px #5A1022, 0 4px 10px -8px rgba(74,20,32,.6), 0 0 0 rgba(59,12,24,1);transform:translateY(2px) scale(.97)}
.tile:active span{color:#FBF4EE}
.tile:active svg{transform:translateY(-4px) scale(1.12);transition-duration:.12s}
.tile .ripple{background:radial-gradient(circle, rgba(255,240,230,.35) 0%, rgba(255,240,230,0) 65%)}
.tile::after{content:"";position:absolute;bottom:6px;left:50%;width:4px;height:4px;border-radius:50%;background:var(--gold-1);
  transform:translateX(-50%) scale(0);transition:transform .4s var(--spring)}
.tile.lit::after,.tile:active::after,.tile:focus-visible::after{transform:translateX(-50%) scale(1)}
.tile.beckon svg{animation:beckon 1.2s var(--ease-out) 2}
.tile.beckon::before{content:"";position:absolute;top:8px;left:50%;width:34px;height:34px;margin-left:-17px;border-radius:50%;
  border:1.5px solid rgba(233,207,149,.9);animation:ring 1.2s var(--ease-out) 2;pointer-events:none}
@keyframes beckon{0%,100%{transform:none}30%{transform:translateY(-4px) rotate(-8deg)}60%{transform:translateY(0) rotate(6deg)}}
@keyframes ring{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.6);opacity:0}}
#tiles [data-sfx="whatsapp"] span{color:#1F6B45}
#tiles [data-sfx="whatsapp"].lit span,#tiles [data-sfx="whatsapp"]:active span{color:#FBF4EE}
@media (hover:hover){#tiles [data-sfx="whatsapp"]:hover span{color:#FBF4EE}}
.btn-share{transition:transform .55s var(--spring), background .3s, color .3s}
.btn-share:hover{background:var(--wine);color:#FBF4EE}
.btn-share:active{transform:scale(.97)}
.btn-share svg{transition:transform .5s var(--spring)}
.btn-share:hover svg{transform:scale(1.1) rotate(-4deg)}
/* Pinned bar slides up after the pass lands */
.dockbar{transform:translateY(110%);transition:transform .8s var(--spring) .7s}
body.booted .dockbar{transform:none}

/* ---------- Book card ---------- */
.book{box-shadow:0 16px 34px -20px rgba(42,14,22,.8)}
.book:hover{box-shadow:0 22px 40px -18px rgba(42,14,22,.85)}
.book::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%), rgba(255,236,200,.28), rgba(255,236,200,0) 55%);transition:opacity .3s}
.book.tilting::after{opacity:1}
.book img{transform-origin:left center;transition:transform .6s var(--spring), box-shadow .4s}
.book:hover img,.book:focus-visible img{transform:translateY(-4px) rotateY(-12deg);box-shadow:12px 18px 28px -12px rgba(0,0,0,.75)}
.book .pill{position:relative;overflow:hidden;transition:transform .5s var(--spring)}
.book .pill::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  transform:translateX(-120%);transition:transform .7s var(--ease-out)}
.book:hover .pill::after{transform:translateX(120%)}
.pill-arrow svg{transition:transform .45s var(--spring)}
.book:hover .pill-arrow svg{transform:translateX(3px)}

/* ---------- Link rows ---------- */
.row .badge{transition:background .3s, transform .5s var(--spring), color .3s}
.row:hover .badge{background:var(--wine);color:#FBF4EE;transform:rotate(-6deg) scale(1.04)}
.row .arrow{transition:transform .45s var(--spring)}
.row:hover .arrow,.row:active .arrow{transform:translateX(5px)}
.row:active{transform:none}

/* ---------- Sheets ---------- */
.modal{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sheet{transform:translateY(100%);transition:transform .55s var(--spring);box-shadow:0 -20px 40px -20px rgba(42,14,22,.45)}
.sheet::before{content:"";display:block;width:40px;height:4px;border-radius:4px;background:#D9BFB0;margin:-10px auto 16px}
.modal.show .sheet{transform:none}
.sheet-grid > *{opacity:0;transform:translateY(12px);transition:opacity .35s var(--ease-out), transform .5s var(--spring)}
.modal.show .sheet-grid > *{opacity:1;transform:none}
.modal.show .sheet-grid > *:nth-child(2){transition-delay:.05s}
.modal.show .sheet-grid > *:nth-child(3){transition-delay:.1s}
.modal.show .sheet-grid > *:nth-child(4){transition-delay:.15s}
.qrbox{transform:scale(.92);opacity:0;transition:transform .6s var(--spring) .08s, opacity .3s .08s}
.modal.show .qrbox{transform:none;opacity:1}
.sheet-close{background:linear-gradient(180deg,#7A1A31,#5E1024)}
.toast{transition:opacity .25s, transform .5s var(--spring)}

/* ---------- Entrance: the pass slides up like it's handed to you ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease-out), transform .9s var(--ease-out);
  transition-delay:calc(var(--i,0) * 100ms + 150ms)}
.pass.reveal{transform:perspective(1000px) translateY(46px) rotateX(14deg) scale(.96);
  transition:opacity .9s var(--ease-out) .15s, transform 1.1s var(--spring) .15s}
body.booted .reveal{opacity:1;transform:none}
body.booted .pass.reveal{transform:perspective(1000px) rotateX(var(--rx,0)) rotateY(var(--ry,0))}
body.settled .pass.reveal{transition:transform .7s var(--spring), box-shadow .4s var(--ease-out)}
body.settled .pass.reveal.tilting{transition:transform .12s linear, box-shadow .4s}

/* ---------- Reduced motion: keep it calm ---------- */
@media (prefers-reduced-motion: reduce){
  .reveal,.pass.reveal,.dockbar{opacity:1!important;transform:none!important;transition:none!important}
  .btn-save::before,.pass-shine{animation:none}
  .fx,.book,.row,.sheet,.qrbox,.sheet-grid > *,.pass{transition:none!important}
  .modal.show .sheet-grid > *{opacity:1;transform:none}
  .qrbox{opacity:1;transform:none}
}