/* Pagepeel Banner - CSS (Gorart V – huellasdigitales.cl)
   Note: Purely UI/animation styles. Logic handled in pagepeel.js
*/

.pp-wrap.cornerfx-banner{
  position: fixed;
  top: var(--pp-offset-top, 12px);
  right: var(--pp-offset-right, 12px);
  left: auto;
  z-index: 99999;
  width: var(--pp-big-w, 500px);
  height: var(--pp-big-h, 500px);
  pointer-events: auto;
  contain: layout paint;
}

/* Left side support */
.pp-wrap.cornerfx-banner[data-side="left"]{
  left: var(--pp-offset-left, 12px);
  right: auto;
}

.pp-wrap .cornerfx-link{
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

/* Frames */
.pp-wrap .pp-frame{
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--pp-radius, 8px);
  overflow: hidden;
  box-sizing: border-box;
}

/* Small (corner tab) */
.pp-wrap .cornerfx-small{
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  width: var(--pp-small, 100px);
  height: var(--pp-small, 100px);
  z-index: 3;
  transform-origin: top right;
  filter: drop-shadow(0 0 0 rgba(0,0,0,0));
  opacity: 1;
  visibility: visible;
  transition: opacity 220ms ease, transform 260ms ease, visibility 0s linear 0s;
}

/* Extra hover area so acercarse al botón también lo active */
.pp-wrap .cornerfx-small::before{
  content: "";
  position: absolute;
  inset: -26px; /* hover halo */
}

.pp-wrap[data-side="left"] .cornerfx-small{
  left: 0;
  right: auto;
  transform-origin: top left;
}

.pp-wrap .cornerfx-small .pp-frame{
  border: var(--pp-border, 0px) solid var(--pp-border-color-small, rgba(255,255,255,1));
  box-shadow: var(--pp-shadow-small, 0 0 0 rgba(0,0,0,0));
}

.pp-wrap .cornerfx-small img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* CTA label on small */
.pp-wrap .pp-cta{
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  font-size: var(--pp-cta-size, 12px);
  color: var(--pp-cta-color, rgba(255,255,255,1));
  background: var(--pp-cta-bg, rgba(0,0,0,0.55));
  padding: var(--pp-cta-pady, 2px) var(--pp-cta-padx, 6px);
  border-radius: var(--pp-cta-radius, 8px);
  line-height: 1.1;
  white-space: nowrap;
}

/* Big (expanded image) */
.pp-wrap .cornerfx-big{
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  width: min(100%, var(--pp-big-w, 500px));
  height: min(100%, var(--pp-big-h, 500px));
  z-index: 2;
  opacity: 0;
  transform: translate3d(0,0,0) scale(0.92);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity 260ms ease, transform 320ms ease;
}

.pp-wrap[data-side="left"] .cornerfx-big{
  left: 0;
  right: auto;
  transform-origin: top left;
}

.pp-wrap .cornerfx-big .pp-frame{
  border: var(--pp-border, 0px) solid var(--pp-border-color-big, rgba(255,255,255,1));
  box-shadow: var(--pp-shadow-big, 0 0 0 rgba(0,0,0,0));
}

.pp-wrap .cornerfx-big img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* Open state */
.pp-wrap.pp-open .cornerfx-big{
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* While open: hide the small tab completely (no competencia visual) */
.pp-wrap.pp-open .cornerfx-small{
  opacity: 0;
  visibility: hidden;
  transform: scale(0.92);
  pointer-events: none;
  z-index: 6;
  transition: opacity 220ms ease, transform 260ms ease, visibility 0s linear 220ms;
}

/* Big CTA / footer text */
.pp-wrap .pp-cta-big,
.pp-wrap .pp-cta-bigwrap{
  position: absolute;
  top: var(--pp-cta2-top, auto);
  right: var(--pp-cta2-right, auto);
  bottom: var(--pp-cta2-bottom, 10px);
  left: var(--pp-cta2-left, 50%);
  transform: var(--pp-cta2-transform, translateX(-50%));
max-width: var(--pp-cta2-maxw, 90%);
  width: auto;
  text-align: var(--pp-cta2-textalign, center);
  color: var(--pp-cta2-color, rgba(255,255,255,1));
  background: var(--pp-cta2-bg, rgba(0,0,0,0.55));
  padding: var(--pp-cta2-pady, 3px) var(--pp-cta2-padx, 8px);
  border-radius: var(--pp-cta2-radius, 10px);
  font-size: var(--pp-cta2-size, 12px);
  line-height: 1.25;
}

/* Premium wrapper (two lines) */
.pp-wrap .pp-cta-bigwrap{
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}

.pp-wrap .pp-cta-big-title{
  font-size: var(--pp-cta2-title-size, 13px);
  font-weight: 700;
  opacity: 0.98;
}

.pp-wrap .pp-cta-big-sub{
  font-size: var(--pp-cta2-sub-size, 12px);
  font-weight: 400;
  opacity: 0.95;
}

/* Two-line subtle stagger animation */
.pp-wrap[data-cta2-anim="1"] .pp-cta-big-title,
.pp-wrap[data-cta2-anim="1"] .pp-cta-big-sub{
  opacity: 0;
  transform: translateY(6px);
}

.pp-wrap.pp-open[data-cta2-anim="1"] .pp-cta-big-title{
  animation: ppFadeUp 420ms ease forwards;
  animation-delay: var(--pp-cta2-delay-title, 120ms);
}
.pp-wrap.pp-open[data-cta2-anim="1"] .pp-cta-big-sub{
  animation: ppFadeUp 420ms ease forwards;
  animation-delay: var(--pp-cta2-delay-sub, 260ms);
}

@keyframes ppFadeUp{
  to { opacity: 1; transform: translateY(0); }
}

/* Entrance attention grabber (optional)
   Real "from center" motion (visible) */
.pp-wrap.pp-entrance{
  opacity: 0;
  /* default start: slight scale */
  transform: translate(0,0) scale(0.92);
}

/* Start positions by mode (before entered) */
.pp-wrap.pp-entrance[data-enter-mode="center_left"]{
  transform: translate(-40vw, 0) scale(0.92);
}
.pp-wrap.pp-entrance[data-enter-mode="bottom"]{
  transform: translate(0, 40vh) scale(0.92);
}
.pp-wrap.pp-entrance[data-enter-mode="center_diag"]{
  /* from true center toward the corner (fallback; JS handles primary) */
  transform: translate(
    calc(-50vw + 50% + var(--pp-offset-right, 12px)),
    calc(50vh - 50% - var(--pp-offset-top, 12px))
  ) scale(0.92);
}

.pp-wrap.pp-entrance.pp-entered{
  opacity: 1;
  /* settle into the real position (no offset) */
  transform: translate(0,0) scale(1);
  transition: opacity 500ms ease, transform 900ms cubic-bezier(.2,.9,.2,1);
}

/* Hide on landscape (optional) (optional) */
@media (orientation: landscape) and (max-width: 1024px){
  .pp-wrap.pp-hide-landscape{ display:none !important; }
}

/* Responsive adjustments */
@media (max-width: 600px){
  .pp-wrap.cornerfx-banner{
    width: min(96vw, var(--pp-big-w, 500px));
    height: min(96vw, var(--pp-big-h, 500px));
    top: var(--pp-offset-top, 8px);
    right: var(--pp-offset-right, 8px);
  }
  .pp-wrap[data-side="left"].cornerfx-banner{
    left: var(--pp-offset-left, 8px);
    right: auto;
  }
  .cornerfx-big img{
    object-fit: contain;
  }
}


/* Clickable CTA inside big banner */
.pp-wrap .pp-cta-biglink{
  text-decoration: none;
  color: inherit;
}
.pp-wrap .pp-cta-biglink:focus-visible{
  outline: 2px solid rgba(255,255,255,0.9);
  outline-offset: 2px;
}


/* Prevent global lightbox scripts from hijacking clicks on the big image */
.pp-wrap.pp-open .cornerfx-big img{ pointer-events:none; }
.pp-wrap.pp-open .pp-cta-biglink{ pointer-events:auto; }