/* ===== Revista — abertura cinematografica =====
   Feira Regional da Beleza — adicionado 2026-10-14
   Arquivo isolado: remover o <link> e o <script> no index.html desfaz tudo. */

:root{
  --mg-gold:#e3b96b;
  --mg-gold-2:#c9933a;
  --mg-wine:#3a0418;
  --mg-wine-2:#5a0e2a;
}

/* ---------- 1. Capa real no bloco da revista ---------- */
#magCoverPh{
  background-image:url("revista-capa.jpg") !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  position:relative;
}
#magCoverPh > *{ display:none !important; }
#magCoverPh::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(200deg, rgba(255,255,255,.14), transparent 42%);
  pointer-events:none;
}
.magBook{
  transition:transform .55s cubic-bezier(.22,1,.36,1), box-shadow .55s ease;
  will-change:transform;
}
.magBook:hover{
  transform:translateY(-6px) rotate(-.6deg);
  box-shadow:0 26px 60px rgba(0,0,0,.42);
}

/* ---------- 2. Fundo do leitor ---------- */
#flipModal{
  background:
    radial-gradient(1100px 760px at 50% 26%, rgba(90,14,42,.55), transparent 68%),
    linear-gradient(180deg, rgba(18,2,9,.97), rgba(7,0,4,.99)) !important;
  -webkit-backdrop-filter:blur(14px) saturate(115%);
  backdrop-filter:blur(14px) saturate(115%);
}
#flipModal::before{
  content:"";
  position:absolute; inset:-20%;
  background:radial-gradient(520px 520px at 30% 35%, rgba(227,185,107,.10), transparent 62%),
             radial-gradient(460px 460px at 72% 68%, rgba(144,24,62,.16), transparent 64%);
  pointer-events:none;
  animation:mgDrift 22s ease-in-out infinite alternate;
}
@keyframes mgDrift{
  from{ transform:translate3d(-2%,-1.5%,0) scale(1); }
  to  { transform:translate3d(2.5%,2%,0) scale(1.06); }
}

/* ---------- 3. Entrada dos elementos ---------- */
#flipModal .flipTop,
#flipModal .flipNav,
#flipModal .flipCount{ opacity:0; }

#flipModal.open .flipTop{ animation:mgTop .62s .10s cubic-bezier(.22,1,.36,1) forwards; }
#flipModal.open .flipPrev{ animation:mgLeft .6s .42s cubic-bezier(.22,1,.36,1) forwards; }
#flipModal.open .flipNext{ animation:mgRight .6s .42s cubic-bezier(.22,1,.36,1) forwards; }
#flipModal.open .flipCount{ animation:mgUp .6s .52s cubic-bezier(.22,1,.36,1) forwards; }

@keyframes mgTop  { from{opacity:0;transform:translateY(-16px)} to{opacity:1;transform:none} }
@keyframes mgLeft { from{opacity:0;transform:translateX(-18px)} to{opacity:1;transform:none} }
@keyframes mgRight{ from{opacity:0;transform:translateX(18px)}  to{opacity:1;transform:none} }
@keyframes mgUp   { from{opacity:0;transform:translateY(12px)}  to{opacity:1;transform:none} }

#flipModal .flipNav{
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, background-color .3s ease;
}
#flipModal .flipNav:hover{
  transform:scale(1.1);
  box-shadow:0 10px 30px rgba(227,185,107,.28);
}

/* ---------- 4. Carregamento ---------- */
#flipLoad .flSpin{ display:none !important; }
#flipLoad{
  background:none !important;
  z-index:6;
  justify-content:flex-end !important;
  padding-bottom:7vh;
}
#flipLoad .flipBar{
  width:min(260px,52vw) !important;
  height:3px !important;
  border-radius:99px;
  overflow:hidden;
  background:rgba(255,255,255,.14) !important;
}
#flipLoad .flipBar > i{
  background:linear-gradient(90deg,var(--mg-gold-2),var(--mg-gold)) !important;
  box-shadow:0 0 14px rgba(227,185,107,.65);
  transition:width .4s cubic-bezier(.22,1,.36,1);
}

/* ---------- 5. A capa que abre ---------- */
#mgOpener{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  perspective:1900px;
  pointer-events:none;
  z-index:7;
}
#mgOpener .mgCover{
  height:min(62vh,540px);
  aspect-ratio:620/876;
  max-width:min(78vw,460px);
  border-radius:3px 9px 9px 3px;
  background:url("revista-capa.jpg") center/cover no-repeat, var(--mg-wine);
  box-shadow:0 38px 86px rgba(0,0,0,.66), 0 0 0 1px rgba(255,255,255,.07);
  transform-origin:left center;
  transform-style:preserve-3d;
  position:relative;
  animation:mgCoverIn .82s cubic-bezier(.22,1,.36,1) both,
            mgFloat 5.5s 1s ease-in-out infinite;
}
/* lombada */
#mgOpener .mgCover::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:16px;
  border-radius:3px 0 0 3px;
  background:linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,.08));
  pointer-events:none;
}
/* brilho que varre */
#mgOpener .mgCover::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(105deg, transparent 36%, rgba(255,255,255,.26) 48%, transparent 61%);
  background-size:260% 100%;
  background-position:165% 0;
  animation:mgShine 2.8s 1.2s ease-in-out infinite;
  pointer-events:none;
}
@keyframes mgCoverIn{
  from{ opacity:0; transform:translateY(26px) scale(.9) rotateY(10deg); filter:blur(7px); }
  to  { opacity:1; transform:none; filter:none; }
}
@keyframes mgFloat{
  0%,100%{ translate:0 0; rotate:y -1.5deg; }
  50%    { translate:0 -10px; rotate:y 1.5deg; }
}
@keyframes mgShine{
  0%{ background-position:165% 0; }
  58%,100%{ background-position:-65% 0; }
}

/* abrindo */
#mgOpener.mg-opening .mgCover{
  animation:mgOpen 1.12s cubic-bezier(.58,.02,.2,1) forwards;
}
#mgOpener.mg-opening .mgCover::after{ animation:none; opacity:0; }
#mgOpener.mg-opening .mgCover::before{
  animation:mgShade 1.12s cubic-bezier(.58,.02,.2,1) forwards;
}
@keyframes mgOpen{
  0%  { transform:rotateY(0deg); }
  100%{ transform:rotateY(-114deg) translateZ(26px); }
}
@keyframes mgShade{
  0%  { width:16px;  background:linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,.08)); }
  100%{ width:100%;  background:linear-gradient(90deg, rgba(0,0,0,.70), rgba(0,0,0,.42)); }
}
#mgOpener.mg-opening{ animation:mgOpenerOut .34s .78s ease-out forwards; }
@keyframes mgOpenerOut{ to{ opacity:0; } }

/* ---------- 6. A revista aparecendo ---------- */
#flipStage.mg-reveal{
  animation:mgStageIn .92s cubic-bezier(.22,1,.36,1) both;
}
@keyframes mgStageIn{
  0%  { opacity:0; transform:scale(.9) rotateX(7deg); filter:blur(7px); }
  100%{ opacity:1; transform:none; filter:none; }
}

/* ---------- 7. Menos movimento ---------- */
@media (prefers-reduced-motion: reduce){
  #mgOpener{ display:none !important; }
  #flipModal::before{ animation:none; }
  #flipModal .flipTop,
  #flipModal .flipNav,
  #flipModal .flipCount{ opacity:1; animation:none !important; }
  #flipStage.mg-reveal{ animation:mgPlain .3s ease both; }
  @keyframes mgPlain{ from{opacity:0} to{opacity:1} }
  .magBook{ transition:none; }
}