/* 300x600 HTML5 banner – smooth transitions + background swap on final */
:root{
  --w: 300px;
  --h: 600px;
  --white: rgba(255,255,255,0.98);
  --shadow: rgba(0,0,0,0.35);
  --shadow2: rgba(0,0,0,0.55);
  --ease: cubic-bezier(.2,.9,.2,1);
}

html,body{ height:100%; margin:0; }
body{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f2f2f2;
  font-family: Arial, Helvetica, sans-serif;
}

#clickArea{
  width:var(--w);
  height:var(--h);
  display:block;
  text-decoration:none;
}

.ad{
  width:var(--w);
  height:var(--h);
  position:relative;
  overflow:hidden;
  background:#000;
  cursor:pointer;
}

.bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  will-change: transform, opacity, filter;
  transform: scale(1.02);
  transition: opacity 1700ms var(--ease), transform 2100ms var(--ease), filter 1700ms var(--ease);
}

.bg1{ background-image:url("img/bg_morgan.webp"); background-position: 50% 25%; opacity:1; }
.bg2{ background-image:url("img/bg_wall.webp"); background-position: 50% 55%; opacity:0; filter: blur(0px); }

.shade{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.04) 0%,
    rgba(0,0,0,0.10) 40%,
    rgba(0,0,0,0.22) 100%);
}

/* Frame 1 subtle zoom */
.ad.frame1 .bg1{ transform: scale(1.06); }

/* Frame 3: swap background smoothly */
.ad.frame3 .bg1{ opacity:0; transform: scale(1.03); }
.ad.frame3 .bg2{ opacity:1; transform: scale(1.06); }

/* Brand */
.brand{
  position:absolute;
  left:12px;
  top:12px;
  z-index:3;
  background: rgba(255,255,255,0.92);
  border-radius: 10px;
  padding:6px 8px;
  box-shadow: 0 8px 18px var(--shadow);
  opacity:0;
  transform: translateY(-8px);
  transition: opacity 1420ms var(--ease), transform 1420ms var(--ease);
}
.brand img{ display:block; height:16px; width:auto; }
.ad.frame1 .brand,
.ad.frame2 .brand,
.ad.frame3 .brand{ opacity:1; transform: translateY(0); }

/* Headline */
.headline{
  position:absolute;
  left:16px;
  right:16px;
  top: 250px;
  z-index:2;

  opacity:0;
  transform: translateY(14px);
  transition:
    opacity 1600ms var(--ease),
    transform 1800ms var(--ease),
    top 1800ms var(--ease);
}
.h1{
  color:var(--white);
  font-weight:900;
  letter-spacing:-0.3px;
  font-size:30px;
  line-height:1.02;
  text-shadow: 0 10px 22px var(--shadow2);
}
.ad.frame1 .headline{ opacity:1; transform: translateY(0); }

/* Panel */
.panel{
  position:absolute;
  left:16px;
  right:16px;
  top:300px;
  z-index:2;

  opacity:0;
  transform: translateX(26px);
  transition:
    opacity 1600ms var(--ease),
    transform 1800ms var(--ease),
    top 1800ms var(--ease);
}
.ad.frame2 .panel{ opacity:1; transform: translateX(0); }

.h2{
  color:var(--white);
  font-weight:800;
  font-size:18px;
  line-height:1.15;
  text-shadow: 0 8px 18px var(--shadow2);
}
.sig{
  margin-top:8px;
  color: rgba(255,255,255,0.92);
  font-size:14px;
  line-height:1.25;
  font-weight:600;
  text-shadow: 0 8px 16px var(--shadow2);
}

/* CTA */
.cta{
  position:absolute;
  left:16px;
  right:16px;
  bottom:22px;
  z-index:3;

  padding:14px 14px;
  border-radius: 14px;

  background: rgba(255,255,255,0.92);
  color: #111;
  font-weight:900;
  font-size:16px;
  text-align:center;

  box-shadow: 0 10px 22px var(--shadow);

  opacity:0;
  transform: translateY(18px);
  transition: opacity 1600ms var(--ease), transform 1800ms var(--ease);
}
.ad.frame3 .cta{ opacity:1; transform: translateY(0); }

/* FINAL STACK (Frame 3): move headline + panel down (no overlap) */
.ad.frame3 .headline{
  opacity:1;
  top:270px;
  transform: translateY(0);
}
.ad.frame3 .panel{
  opacity:1;
  top:355px;
  transform: translateX(0);
}

/* Hover */
.ad:hover .cta{
  filter: brightness(0.98);
  transform: translateY(-1px);
}

/* Border */
.border{
  position:absolute;
  inset:0;
  border:1px solid rgba(0,0,0,0.18);
  pointer-events:none;
}


/* Subline under headline */
.subline{
  margin-top:10px;
  color: rgba(255,255,255,0.92);
  font-weight:800;
  font-size:14px;
  letter-spacing:-0.1px;
  text-shadow: 0 8px 16px rgba(0,0,0,0.55);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1600ms var(--ease), transform 1800ms var(--ease);
}


/* Frame 1 (Morgan): center stack then drop */
.ad.frame1 .headline{ opacity:1; top:300px; transform: translateY(0); }
.ad.frame1 .panel{ opacity:1; top:4000px; transform: translateX(0); }
.ad.frame1 .subline{ opacity:1; transform: translateY(0); }

/* Triggered drop within frame 1 */
.ad.frame1.final .headline{ top:500px; }
.ad.frame1.final .panel{ top:355px; }


/* FINAL BRAND FRAME */
.brandEnd{
  position:absolute;
  left:16px;
  right:16px;
  top:220px;
  z-index:4;
  text-align:center;
  opacity:0;
  transform: translateY(20px);
  transition: opacity 1600ms var(--ease), transform 1800ms var(--ease);
}
.brandBig{
  font-size:36px;
  font-weight:900;
  letter-spacing:-0.5px;
  color:#fff;
  text-shadow:0 10px 24px rgba(0,0,0,.6);
}
.brandSmall{
  margin-top:6px;
  font-size:16px;
  font-weight:700;
  color:rgba(255,255,255,.92);
  text-shadow:0 8px 18px rgba(0,0,0,.55);
}

/* Show brandEnd, hide others on final */
.ad.finalBrand .headline,
.ad.finalBrand .panel,
.ad.finalBrand .cta{
  opacity:0;
}
.ad.finalBrand .brandEnd{
  opacity:1;
  transform: translateY(0);
}


/* Fade overlay before final brand */
.fade{
  position:absolute;
  inset:0;
  background:#fff; /* fade to white */
  opacity:0;
  z-index:3; /* above bg, below brandEnd (z=4) */
  pointer-events:none;
  transition: opacity 1800ms var(--ease);
}
.ad.fading .fade{ opacity:1; }
.ad.finalBrand .fade{ opacity:0; } /* let brand be clean after swap */

/* Brand hero + micro letter animation */
.brandBig{
  font-size:44px; /* more hero */
  line-height:1;
}
.brandBig .char{
  display:inline-block;
  opacity:0;
  transform: translateY(10px);
  transition: opacity 1400ms var(--ease), transform 1600ms var(--ease);
}
.ad.finalBrand .brandBig .char{
  opacity:1;
  transform: translateY(0);
}


/* Hide panel at very start (avoid kakemonos at load) */
.ad.frame1 .panel{
  opacity:0 !important;
}

/* Reveal panel only during frame1 drop / transition */
.ad.frame1.final .panel{
  opacity:1;
}


/* ===== FIX v14: 3 backgrounds controlled by sections ===== */
.bg1{ background-image:url("img/bg_morgan.webp"); background-position:50% 25%; opacity:1; }
.bg2{ background-image:url("img/bg2_stand_right.webp"); background-position:100% 50%; opacity:0; }
.bg3{ background-image:url("img/bg3_woman.webp"); background-position:center; opacity:0; }

/* Default: show only bg1 */
.ad .bg1{ opacity:1; }
.ad .bg2, .ad .bg3{ opacity:0; }

/* Section 2: show bg2 only */
.ad.section2 .bg1{ opacity:0; }
.ad.section2 .bg2{ opacity:1; }

/* Section 3: show bg3 only */
.ad.section3 .bg2{ opacity:0; }
.ad.section3 .bg3{ opacity:1; }

/* Fade overlay used between section2 -> section3 */
.ad.fading .fade{ opacity:1; }
.ad.section3 .fade{ opacity:0; }


/* Show brand outro on section3 */
.ad.section3 .headline,
.ad.section3 .panel,
.ad.section3 .cta{
  opacity:0;
}
.ad.section3 .brandEnd{
  opacity:1;
  transform: translateY(0);
}


/* === FINAL TWEAK v15: brand placement === */
.brandEnd{
  top:300px; /* move whole block lower to avoid face */
}

.brandBig{
  font-size:52px; /* bigger hero */
  letter-spacing:-0.8px;
}

.brandSmall{
  margin-top:14px; /* push 'z nami nie ma nudy' lower */
  font-size:17px;
  opacity:0.95;
}


/* ===== v18 FIX: background sections + visible brand text ===== */
.bg2{ background-image:url("img/bg2_stand_right.webp"); background-position:100% 50%; background-size:cover; opacity:0; }
.bg3{ background-image:url("img/bg3_woman.webp"); background-position:center; background-size:cover; opacity:0; }

/* default */
.ad .bg2, .ad .bg3{ opacity:0; }

/* section2 */
.ad.section2 .bg1{ opacity:0; }
.ad.section2 .bg2{ opacity:1; }

/* section3 */
.ad.section3 .bg2{ opacity:0; }
.ad.section3 .bg3{ opacity:1; }

/* fade overlay */
.fade{
  position:absolute; inset:0; background:#fff; opacity:0; z-index:3; pointer-events:none;
  transition: opacity 1800ms var(--ease);
}
.ad.fading .fade{ opacity:1; }
.ad.section3 .fade{ opacity:0; }

/* Brand: ensure letters appear in section3 */
.ad.section3 .brandBig .char{
  opacity:1;
  transform: translateY(0);
}

/* CTA behavior: hide during fading, return at default bottom in section3 */
.ad.fading .cta{
  opacity:0 !important;
  transform: translateY(18px) !important;
}
.ad.section3 .cta{
  opacity:1 !important;
  transform: translateY(0) !important;
  bottom:22px !important;
  top:auto !important;
}


/* === SECTION 2 SPACING FIX (>= 1cm) === */
.ad.section2 .headline{
  top:230px;
}

.ad.section2 .panel{
  top:395px; /* ~165px gap ≈ >1cm on standard monitor */
}