/* =========================================================================
   LILY BISSET — Hero v2 (collage / concrete approach)
   Light grunge concrete bg, magenta wordmark, layered cutouts.
   ========================================================================= */

.hero2{
  position:relative;
  width:100%;
  background:#d9d5cc;
  border-bottom:2px solid #000;
  isolation:isolate;
  overflow:hidden;
}

/* fixed 16:9 stage so all baked-in bg elements + overlays share one grid */
.hero2__stage{
  position:relative;
  width:100%;
  aspect-ratio:2732 / 1536;
  max-height:100vh;
  overflow:hidden;
}
.hero2__bg{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;will-change:translate;
}
.hero2__bg img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center;
}

/* giant LILY BISSET wordmark (transparent png, 1445x1445 square) */
.hero2__name{
  position:absolute;z-index:2;
  top:-3.5%;right:-1%;width:62%;height:auto;
  pointer-events:none;
  will-change:translate,rotate;
}

/* woman cutout standing on the baked-in TV */
.hero2__girl{
  position:absolute;z-index:3;
  bottom:1%;right:21.2%;height:92%;width:auto;
  pointer-events:none;
  filter:drop-shadow(0 14px 26px rgba(20,12,18,.32));
  will-change:translate;
}

/* REBEL magazine clipping bottom-right */
.hero2__mag{
  position:absolute;z-index:4;
  bottom:3.2%;right:2.4%;width:11.5%;height:auto;
  pointer-events:none;
  filter:drop-shadow(0 8px 18px rgba(20,12,18,.4));
  will-change:translate;
}

/* ---- idle float: layers breathe even at rest ---------------------------- */
@media (prefers-reduced-motion: no-preference){
  .hero2__name{animation:hero2NameFloat 8s ease-in-out infinite;}
  .hero2__mag{animation:hero2MagFloat 6.5s ease-in-out infinite;}
  .hero2__girl{animation:hero2GirlFloat 9s ease-in-out infinite;}
}
@keyframes hero2NameFloat{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-0.9%) rotate(-0.18deg);}
}
@keyframes hero2MagFloat{
  0%,100%{transform:translate(0,0) rotate(0deg);}
  50%{transform:translate(-0.5%,-0.9%) rotate(0.5deg);}
}
@keyframes hero2GirlFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-0.35%);}
}

/* ---- left copy block, dark on concrete --------------------------------- */
.hero2__copy{
  position:absolute;z-index:6;
  left:var(--pad);top:50%;transform:translateY(-50%);
  width:min(40%,520px);max-width:520px;
}
.hero2__copy .kicker{
  color:var(--pink-deep);
  font-family:var(--font-mono);font-weight:700;
  font-size:clamp(9px,0.74vw,12.5px);letter-spacing:.22em;line-height:1.95;
  margin:0 0 1.2em;text-transform:uppercase;
}
.hero2__copy h1{
  font-family:var(--font-head);font-weight:800;font-stretch:condensed;
  font-size:clamp(32px,3.6vw,58px);line-height:1.04;letter-spacing:-.015em;
  margin:0 0 .7em;color:#16140f;text-wrap:balance;
}
.hero2__copy h1 .pinkword{color:var(--pink-deep);}
.hero2__copy p{
  font-family:var(--font-mono);font-size:clamp(13px,1.1vw,17px);
  line-height:1.65;color:#3a352c;margin:0 0 1.7em;max-width:44ch;text-wrap:pretty;
}
.hero2__copy .cta{
  display:inline-flex;align-items:center;gap:.8em;
  font-family:var(--font-mono);font-weight:700;letter-spacing:.16em;font-size:12.5px;
  text-transform:uppercase;color:#16140f;
  border:1.5px solid #16140f;padding:.85em 1.4em;transition:.22s ease;background:transparent;
}
.hero2__copy .cta .arr{transition:transform .22s ease;}
.hero2__copy .cta:hover{background:var(--pink);border-color:var(--pink);color:#fff;}
.hero2__copy .cta:hover .arr{transform:translateX(5px);}

/* tiny eyebrow tag above kicker */
.hero2__copy .eyebrow{
  display:inline-flex;align-items:center;gap:.6em;margin:0 0 1.4em;
  font-family:var(--font-mono);font-weight:700;letter-spacing:.24em;
  font-size:clamp(9px,0.72vw,11.5px);text-transform:uppercase;color:#16140f;
}
.hero2__copy .eyebrow .sq{width:.7em;height:.7em;background:var(--pink);display:inline-block;}

/* nav over light hero needs dark ink legibility */
.hero2-page .topnav{color:#16140f;}
.hero2-page .topnav .eye ellipse{stroke:#16140f;}
.hero2-page .topnav .eye line{stroke:#16140f;}
.hero2-page .topnav nav b{color:#16140f;}
.hero2-page .topnav .swatches i{background:#16140f;}
.hero2-page .topnav .swatches i:first-child{background:var(--pink);}
.hero2-page .topnav .nav-div{background:#7c776b;}
.hero2-page .topnav .nav-corner{display:none;}

/* ---- responsive: stack copy below the art ------------------------------ */
@media (max-width:860px){
  .hero2{display:flex;flex-direction:column;}
  .hero2__stage{max-height:none;}
  /* mobile bg is a complete composition — hide desktop collage overlays */
  .hero2__name,.hero2__girl,.hero2__mag{display:none;}
  .hero2__copy{
    position:relative;left:auto;top:auto;transform:none;
    width:auto;max-width:none;
    padding:clamp(26px,7vw,44px) var(--pad) clamp(34px,9vw,52px);
    background:#16140f;
    display:flex;flex-direction:column;align-items:center;text-align:center;
  }
  .hero2__copy h1{font-size:clamp(30px,7.5vw,48px);color:var(--white);}
  .hero2__copy h1 .pinkword{color:var(--pink);}
  .hero2__copy p{color:#cdc8bd;max-width:42ch;}
  .hero2__copy .kicker{color:var(--white);}
  .hero2__copy .eyebrow{color:var(--white);}
  .hero2__copy .cta{color:var(--white);border-color:var(--white);}
  .hero2-page .topnav{color:var(--white);}
  .hero2-page .topnav nav{display:none;}
}