/*
 * Cyber Week (6/11 al 14/11). Solo en el inicio, sin el wrapper .gervasini-home. Son DOS
 * elementos separados (ver snipplets/cyberweek-popup.tpl):
 *   1) .cw-intro  - el flyer grande, modal, que cae al entrar a la página. Se cierra y
 *      desaparece hasta la próxima vez que se entra al inicio.
 *   2) .cw-static - una bandera chica fija en la esquina superior izquierda del banner,
 *      con borde recortado tipo tela ondeando. Queda ahí mientras se navega el inicio.
 * TEMPORAL - sacar este archivo, gervasini-cyberweek.js, el snipplet cyberweek-popup.tpl y
 * sus referencias en layout.tpl después de la promo.
 */

.cw-img{ display:block; width:100%; height:auto; }
.cw-img--mobile{ display:none; }
@media (max-width:640px){
  .cw-img--desktop{ display:none; }
  .cw-img--mobile{ display:block; }
}

/* ============== 1) Flyer grande al entrar (modal) ============== */
.cw-intro{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow-y:auto;
  padding:0 0 20px;
  visibility:hidden;
  pointer-events:none;
}
.cw-intro.is-open{ visibility:visible; pointer-events:auto; }
.cw-intro-backdrop{
  position:fixed;
  inset:0;
  background:rgba(6,8,16,.62);
  opacity:0;
  transition:opacity .4s ease;
}
.cw-intro.is-open .cw-intro-backdrop{ opacity:1; }

.cw-intro-panel{
  position:relative;
  z-index:1;
  margin-top:4vh;
  width:min(960px, 92vw, 156vh);
  flex-shrink:0;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 40px 80px rgba(0,0,0,.5);
  transform:translateY(-140%) rotate(-2deg);
  transform-origin:top center;
  opacity:0;
}
.cw-intro.is-open .cw-intro-panel{ animation:cwFlagDrop .9s cubic-bezier(.34,1.56,.64,1) forwards; }
.cw-intro.is-closing .cw-intro-panel{ animation:cwFlagRise .35s ease-in forwards; }

.cw-intro-close{
  position:absolute;
  top:10px;
  right:10px;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  padding:0;
  border:none;
  border-radius:50%;
  background:rgba(10,12,20,.55);
  color:#fff;
  cursor:pointer;
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  transition:background .2s ease;
}
.cw-intro-close svg{ width:16px; height:16px; }
.cw-intro-close:hover{ background:rgba(10,12,20,.82); }
.cw-intro-link{ display:block; line-height:0; }

@media (max-width:640px){
  .cw-intro-panel{ width:min(420px, 92vw); margin-top:6vh; border-radius:12px; }
}

/* ============== 2) Bandera chica fija, arriba a la izquierda ============== */
.cw-static{
  position:fixed;
  top:110px;
  left:20px;
  z-index:80;
  width:min(320px, 44vw);
  transform:rotate(-2.5deg);
  filter:drop-shadow(0 16px 28px rgba(0,0,0,.4));
  transition:opacity .3s ease, transform .3s ease;
}
.cw-static.is-hidden{
  opacity:0;
  transform:rotate(-2.5deg) translateY(-14px);
  pointer-events:none;
}
.cw-static-link{ position:relative; display:block; line-height:0; }
.cw-static .cw-img{
  clip-path:polygon(0 0, 95% 0, 100% 9%, 93% 19%, 100% 31%, 94% 43%, 100% 56%, 93% 69%, 100% 81%, 95% 100%, 0 100%);
}
/* pliegues de tela: franjas diagonales claras/oscuras muy sutiles encima de la imagen */
.cw-static-fold{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:repeating-linear-gradient(
    78deg,
    rgba(255,255,255,.14) 0 3%,
    rgba(0,0,0,.1) 3% 6%,
    transparent 6% 13%
  );
  mix-blend-mode:overlay;
  clip-path:polygon(0 0, 95% 0, 100% 9%, 93% 19%, 100% 31%, 94% 43%, 100% 56%, 93% 69%, 100% 81%, 95% 100%, 0 100%);
}
.cw-static-close{
  position:absolute;
  top:-8px;
  right:4px;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  padding:0;
  border:none;
  border-radius:50%;
  background:rgba(10,12,20,.6);
  color:#fff;
  cursor:pointer;
  transform:rotate(2.5deg);
  transition:background .2s ease;
}
.cw-static-close svg{ width:12px; height:12px; }
.cw-static-close:hover{ background:rgba(10,12,20,.85); }

@media (max-width:720px){
  .cw-static{ top:80px; left:12px; width:min(190px, 48vw); }
  .cw-static-close{ width:20px; height:20px; top:-6px; right:2px; }
  .cw-static-close svg{ width:10px; height:10px; }
}

/* ============== animación compartida: "bandera que cae" ============== */
@keyframes cwFlagDrop{
  0%{ transform:translateY(-140%) rotate(-2deg); opacity:0; }
  55%{ transform:translateY(4%) rotate(1.2deg); opacity:1; }
  75%{ transform:translateY(-1.5%) rotate(-.6deg); }
  100%{ transform:translateY(0) rotate(0deg); opacity:1; }
}
@keyframes cwFlagRise{
  from{ transform:translateY(0) rotate(0deg); opacity:1; }
  to{ transform:translateY(-140%) rotate(-2deg); opacity:0; }
}
@media (prefers-reduced-motion:reduce){
  .cw-intro.is-open .cw-intro-panel{ animation:none; transform:none; opacity:1; }
  .cw-intro.is-closing .cw-intro-panel{ animation:none; }
}