/* =============================================================
   Doronow — Banner 1  (static compose)
   Full-width background; all elements centered on a 1400px stage.
   Positioning uses % of the stage so the whole scene scales.
============================================================= */

:root {
  --stage-w: 1400px;               /* design width of the centered content */
  --banner-bg: #ffffff;
  /* shared elevation, from the Figma effect panel:
     X 9  Y 9  Blur 20  Spread 0  Color #000000 @ 15% */
  --elev: 9px 9px 20px 0 rgba(0, 0, 0, 0.15);
  --elev-drop: drop-shadow(9px 9px 20px rgba(0, 0, 0, 0.15));
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--banner-bg);
}

/* ---- full-width banner shell ---- */
.banner {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--banner-bg);
  display: flex;
  justify-content: center;
}

/* full-width background image, centered, covers the whole banner */
.banner__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}

/* ---- centered coordinate stage ---- */
.stage {
  position: relative;
  z-index: 1;
  width: min(var(--stage-w), 100%);
  aspect-ratio: 1508 / 863;   /* matches the Figma banner frame */
}

/* every scene layer is absolutely positioned inside the stage */
.stage > * {
  position: absolute;
  margin: 0;
}
.stage img,
.stage video { display: block;}

/* FOUC guard — while GSAP is set up, keep animated layers hidden so they
   don't flash at their final position. Removed/overridden by the timeline.
   (Falls back to fully visible if JS never runs.) */
.gsap-anim [data-anim],
.gsap-anim .sides > * { opacity: 0; }

/* =============================================================
   Phone group — the D-shape backdrop + the masked phone as ONE unit,
   so they move / scale together (kept aligned at every screen size).
   Sits at the Figma phone+mask group box (x440.99–1143.1, y16–898.5).
============================================================= */
.phoneGroup {
  position: absolute;
  left: 29.24%;
  top: 1.85%;
  width: 46.56%;
  aspect-ratio: 702.14 / 882.46;   /* group box shape → children stay correct */
  z-index: 3;
}

/* D-shape backdrop (back-d.webp fill, mask.svg shape), positioned as a
   % of the group. Its rounded bulge sits BESIDE the phone on the right. */
.blob {
  position: absolute;
  left: 1%;
  top: 7%;
  width: 87%;
  height: 91.6%;
  object-fit: cover;
  -webkit-mask: url(../assets/banner/mask.svg) 0 0 / 100% 100% no-repeat;
          mask: url(../assets/banner/mask.svg) 0 0 / 100% 100% no-repeat;
  filter: drop-shadow(12px 20px 34px rgba(60, 55, 80, 0.12));
  z-index: 1;
}

/* =============================================================
   Floating cards (postcard + greeting card)
============================================================= */
.card { z-index: 2; }
.card img {
  width: 100%;
  height: auto;
  box-shadow: var(--elev);
  border-radius: 3px;
}

.card--postcard {
  left: 11.5%;
  top: 22.6%;
  width: 18.6%;
  transform: rotate(-6deg);
}

.card--greeting {
  left: 20%;
  top: 52%;
  width: 15.5%;
  transform: rotate(9deg);
  z-index:8;
}
.card--greeting img{
  box-shadow: none;
}

/* =============================================================
   Phone (center) — AddWishes shows through the cut-out mobile frame
============================================================= */

/* the Figma "mask" layer (D-shape vector) clips the whole phone.
   Wrapper is placed at the phone+mask group box; the D-mask (extracted
   from the Figma render) clips everything inside it. */
.phoneClip {
  position: absolute;
  inset: 0;              /* fills the group box */
  z-index: 2;            /* above the D-shape backdrop */
  -webkit-mask: url(../assets/banner/phone-dmask.png) 0 0 / 100% 100% no-repeat;
          mask: url(../assets/banner/phone-dmask.png) 0 0 / 100% 100% no-repeat;
}

.phone {
  position: absolute;
  left: 13.67%;
  top: 7.14%;
  width: 59.67%;
  aspect-ratio: 629 / 1254;
  height: auto;
}

/* the transparent frame (bezel + notch + buttons) sits on TOP;
   its screen area is cut out, so the app screen behind shows through */
.phone__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(6px 14px 22px rgba(45, 40, 65, 0.22));
}

/* the app screen behind the frame, skewed onto the phone's tilted plane.
   Screen quad (from the cut frame): TL 21.6%,5.4% · TR 87.6%,5.4%
   · BR 70.7%,94.3% · BL 8.3%,92.2%  — the transform approximates it and
   the frame's cut-out edges do the final clean masking. */
.phone__screen {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  /* clip to the exact cut-out shape so the screen can never poke past the bezel */
  -webkit-mask: url(../assets/banner/screen-mask.png) 0 0 / 100% 100% no-repeat;
          mask: url(../assets/banner/screen-mask.png) 0 0 / 100% 100% no-repeat;
}
/* each screen is a plain sliding layer (GSAP moves it R→L); the skew lives
   on the inner <img> so the slide translate never fights the perspective */
.screen {
  position: absolute;
  inset: 0;
}
.screen img {
  position: absolute;
  left: 12.5%;
  top: 4.5%;
  width: 68%;
  height: 86.5%;
  object-fit: cover;
  object-position: top center;
  transform: perspective(1600px) rotateY(-6deg) rotate(7deg) scale(1.05);
  transform-origin: center center;
}

/* =============================================================
   Polaroid (right) with autoplaying clip + clapperboard
============================================================= */
.polaroid {
  left: 67%;
  top: 38.9%;
  width: 16.5%;
  aspect-ratio: 372 / 417;
  z-index: 4;
  transform: rotate(2deg);
  /* elevation applies to the whole polaroid/video card */
  filter: var(--elev-drop);
}

/* video sits in the photo window (measured from Polaroid.webp),
   behind the transparent polaroid frame */
.polaroid__clip {
  position: absolute;
  left: 4%;
  top: 3.6%;
  width: 91.7%;
  height: 81.8%;
  object-fit: cover;
  z-index: 1;
}
.polaroid__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 2;
  pointer-events: none;
}

/* clapperboard accent — top-right corner of the polaroid */
.polaroid__clap {
  position: absolute;
  right: -7%;
  top: -13%;
  width: 31%;
  height: auto;
  z-index: 3;
  transform: rotate(-8deg);
}

/* =============================================================
   Side-element layers — one per banner; only the active one shows.
   Sit above the phone group.
============================================================= */
.sides {
  position: absolute;
  inset: 0;
  z-index: 5;
}
/* side children are absolutely placed within the layer (like .stage > *) */
.sides > * { position: absolute; margin: 0; }

/* generic flat side card (banners 2 & 3) */
.side { position: absolute; }
.side img {
  width: 100%;
  height: auto;
  filter: var(--elev-drop);
}

/* --- Banner 2 --- */
.side--invite  { left: 8.36%;  top: 35.66%; width: 24.67%; }
.side--collect { left: 67.81%; top: 19.35%; width: 20.38%; }
.side--email   { left: 63.33%; top: 58.82%; width: 23.87%; }

/* --- Banner 3 --- */
.side--gallery { left: 14.59%; top: 28.97%; width: 18.76%; }
.side--bday    { left: 63.33%; top: 28.18%; width: 18.44%; }
.pol--3        { left: 74.5%;  top: 50.06%; width: 13%; transform: rotate(3deg); }

/* =============================================================
   Mobile — hide ALL side pieces, center the phone + UI.
   The D-shape backdrop and the phone mask stay (they scale with the
   phone group); only the side elements are dropped.
============================================================= */
@media (max-width: 640px) {
  .stage { aspect-ratio: 5 / 7; }   /* taller banner so the phone is the hero */

  .stage .sides { display: none; }

  /* enlarge + center the whole phone group */
  .phoneGroup {
    left: 3%;
    top: -3%;
    width: 108%;
  }
}