/* ── KCB Mortgage Landing · LIME POSTER — fx: room world, drawn icons, poster shapes, stickers ── */

/* Sections go transparent so the 3D room world reads behind the content.
   The body background is tinted lime ↔ navy by GSAP as each act begins. */
.ratecut, .journey, .countdown-sec, .section-light, .final { background: transparent; }
body.reduced .ratecut, body.reduced .journey, body.reduced .countdown-sec { background: var(--navy); }
body.reduced .section-light, body.reduced .final { background: var(--lime); }

/* lime flash while crossing the front-door threshold */
.portal-flash { position: fixed; inset: 0; z-index: 1; background: var(--lime); opacity: 0; pointer-events: none; }

/* room name sticker (bottom-left while walking the house) */
.room-tag {
  position: fixed; left: 1.1rem; bottom: 1.2rem; z-index: 70;
  background: #fff; border: 3px solid var(--navy); box-shadow: 5px 5px 0 var(--navy);
  padding: .5rem .9rem; rotate: -2deg; pointer-events: none;
  font-weight: 800; font-size: .8rem; text-transform: uppercase; color: var(--navy);
  opacity: 0; translate: 0 14px;
  transition: opacity .35s ease, translate .35s ease;
}
.room-tag.on { opacity: 1; translate: 0 0; }

/* ── drawn line icons ── */
.ic { width: 46px; height: 46px; color: var(--navy); opacity: 0; margin: 0 auto 1rem; }
.ic .d { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.stat-cell .ic { margin-bottom: .5rem; }
.step .ic { width: 38px; height: 38px; color: var(--gold); margin: 0 0 .8rem; }
.step:nth-child(odd) .ic { margin-left: auto; }
.elig-card .ic { width: 42px; height: 42px; margin-bottom: .9rem; }
.contact-tile .ic { width: 40px; height: 40px; margin: 0 0 .2rem; }
body.reduced .ic { opacity: 1; }

/* ── hero poster shapes ── */
.pshape { position: absolute; z-index: 1; pointer-events: none; }
.ps-sq { left: 7%; top: 24%; width: 84px; height: 84px; border: 4px solid var(--navy); rotate: 12deg; }
.ps-circle { left: 14%; bottom: 27%; width: 46px; height: 46px; border-radius: 50%; background: var(--gold); border: 3px solid var(--navy); }
.ps-plus { right: 9%; bottom: 31%; width: 56px; height: 56px; }
.ps-plus span { position: absolute; background: var(--navy); }
.ps-plus span:first-child { left: 0; right: 0; top: 50%; height: 10px; margin-top: -5px; }
.ps-plus span:last-child { top: 0; bottom: 0; left: 50%; width: 10px; margin-left: -5px; }
.ps-tri { right: 6%; top: 46%; width: 64px; color: #fff; }
.ps-tri path { fill: none; stroke: currentColor; stroke-width: 7; stroke-linejoin: round; }

/* ── gold key sticker in the final act ── */
.key-sticker { width: clamp(88px, 10vw, 132px); margin: 2.2rem auto 0; transform-origin: 20% 50%; animation: key-rock 3.4s ease-in-out infinite; }
.key-sticker .kd { fill: none; stroke: var(--navy); stroke-width: 5; stroke-linecap: round; }
.key-sticker .kbow { fill: var(--gold); }
@keyframes key-rock { 0%, 100% { rotate: -8deg; } 50% { rotate: 0deg; } }

/* ── responsive ── */
@media (max-width: 760px) {
  .pshape { display: none; }
  .room-tag { font-size: .7rem; padding: .4rem .7rem; left: .8rem; bottom: .9rem; }
  .ic { width: 38px; height: 38px; }
  .step .ic { width: 34px; height: 34px; margin-inline: auto; }
  .step:nth-child(odd) .ic { margin-left: auto; margin-right: auto; }
}

/* ── reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .key-sticker { animation: none; }
  .room-tag, .portal-flash { display: none; }
}