/* Loom poster card: black editorial panel, the real puppy, layered organic colour.
   Standalone: everything is scoped under .poster. */
.poster {
  --p-ink: #f4f1ea; --p-mute: #a3a29b; --p-line: rgba(244, 241, 234, .16);
  --coral: #ff6a3d; --pink: #ff2e93; --yellow: #ffe23d; --cyan: #5fe0ff; --mint: #6dffa8;
  --gap: clamp(20px, 3vw, 36px);
  position: relative; isolation: isolate; overflow: hidden; color: var(--p-ink);
  background: #050505; border-radius: 12px;
  padding: clamp(22px, 3vw, 44px);
  min-height: clamp(700px, 64vw, 880px);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--gap);
  font-family: var(--sans);
}

/* ---- atmosphere: independent blurred organic shapes, each moved at its own depth by poster.js ---- */
.atmo { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.blob { position: absolute; height: auto; will-change: transform; }
.poster[data-pet="cat"] .b1 { color: var(--mint); } .poster[data-pet="bunny"] .b1 { color: var(--pink); }
.blob path { fill: currentColor; }
.b1 { color: var(--coral); transition: color 1.2s ease; aspect-ratio: 1.55 / 1; width: 84%; right: -20%; bottom: 33%; filter: blur(34px); opacity: .9; }
.b2 { color: var(--pink); aspect-ratio: .72 / 1; width: 40%; left: -26%; top: 44%; filter: blur(34px); opacity: .5; }
.b3 { color: var(--yellow); aspect-ratio: 1.7 / 1; width: 50%; left: 34%; top: -12%; filter: blur(38px); opacity: .55; }
.b4 { color: var(--cyan); aspect-ratio: 1.25 / 1; width: 56%; right: -14%; bottom: -16%; filter: blur(36px); opacity: .6; }
.b5 { color: var(--mint); aspect-ratio: .8 / 1; width: 24%; left: 40%; bottom: 40%; filter: blur(28px); opacity: .5; }
.grain { position: absolute; inset: 0; opacity: .09; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.p-vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 90% at 30% 55%, transparent 40%, rgba(0,0,0,.55) 100%); }

.poster > header, .poster > section { position: relative; z-index: 3; }

/* ---- top bar ---- */
.p-top { display: flex; justify-content: space-between; align-items: baseline; }
.p-logo { font-family: var(--display); font-size: clamp(1.5rem, 2.3vw, 2.1rem); line-height: 1; letter-spacing: -.01em; }
.p-tabs { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--p-mute); }
.p-tabs b { color: var(--p-ink); font-weight: 600; }

/* ---- kicker: tiny accent mark + tracked label ---- */
.p-k { display: flex; align-items: center; gap: 12px; margin: 0 0 clamp(12px, 1.6vw, 20px); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--p-mute); }
.p-k i { display: block; width: 34px; height: 1px; background: var(--coral); }
.p-k.hot { color: var(--coral); }
.p-k.hot i { background: var(--coral); }

/* ---- current focus ---- */
.p-task { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(2.1rem, 4.1vw, 3.7rem); line-height: .95; letter-spacing: -.015em; }
.p-task em { display: block; font-style: normal; margin-left: clamp(18px, 4vw, 64px); } /* offset second line: asymmetry */
.p-task em::after { content: ""; display: inline-block; width: .32em; height: .32em; margin-left: .14em; border-radius: 50%; background: var(--yellow); vertical-align: .05em; }

/* ---- dog + message ---- */
.p-conv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: end; gap: clamp(8px, 2vw, 28px); margin-top: clamp(4px, 1vw, 14px); margin-bottom: -3px; }
.dog { position: relative; margin: 0; aspect-ratio: 1; width: min(112%, 420px); justify-self: end; margin-right: clamp(-30px, -2.4vw, -8px); pointer-events: none; will-change: transform; z-index: 2; }
.dog-in { position: absolute; inset: 0; animation: float 6s ease-in-out infinite; }
/* three buddies take turns: the next one slides in from the right, the current one slides out to the left */
.pet { position: absolute; inset: 0; opacity: 0; transform: translateX(22%) scale(.94); filter: blur(7px); transition: transform 1.5s cubic-bezier(.22,.8,.2,1), opacity 1.1s ease, filter 1.1s ease; will-change: transform, opacity; }
.pet.on { opacity: 1; transform: none; filter: blur(0); transition-delay: .18s; }
.pet.out { opacity: 0; transform: translateX(-22%) scale(.94); filter: blur(7px); transition-delay: 0s; }
.pet.snap { transition: none; }
.pet img { overflow: visible; overflow-clip-margin: 90px; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .28s ease; filter: drop-shadow(0 3px 3px rgba(0,0,0,.35)) drop-shadow(0 16px 20px rgba(0,0,0,.5)) drop-shadow(0 26px 40px rgba(255, 106, 61, .22)); }
.dog-in::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: 1%; height: 5%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent); filter: blur(3px); z-index: -1; }
.pet img.act { opacity: 1; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.who span { color: var(--p-ink); transition: opacity .4s; }

.say { align-self: center; padding-bottom: clamp(10px, 3vw, 44px); }
.say-1 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(1.7rem, 2.9vw, 2.6rem); line-height: 1; letter-spacing: -.01em; transition: opacity .25s; }
.say-2 { margin: 14px 0 0; font-size: clamp(1rem, 1.3vw, 1.15rem); color: var(--p-mute); letter-spacing: -.01em; }
.ans { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(16px, 2vw, 24px); }
.ans button { font: inherit; font-size: 14px; letter-spacing: -.005em; color: var(--p-ink); background: rgba(244,241,234,.04); border: 1px solid var(--p-line); border-radius: 999px; padding: 9px 16px; cursor: pointer; transition: transform .28s cubic-bezier(.2,.8,.2,1), border-color .25s, background .25s; }
.ans button:hover, .ans button:focus-visible { transform: scale(1.04); border-color: var(--coral); background: rgba(255,106,61,.10); }
.ans button:active { transform: scale(.99); }
.ans button:focus-visible { outline: 2px solid var(--p-ink); outline-offset: 3px; }

/* ---- next step ---- */
.p-next { border-top: 1px solid var(--p-line); padding-top: clamp(18px, 2.4vw, 30px); margin-top: calc(var(--gap) * -1); } /* pulls the divider up so the dog stands on it */
.p-q { margin: 0; max-width: 11ch; font-family: var(--display); font-weight: 400; font-size: clamp(2.5rem, 5.2vw, 4.7rem); line-height: .92; letter-spacing: -.02em; }
.p-meta { margin: clamp(14px, 1.8vw, 22px) 0 0; font-size: clamp(.95rem, 1.2vw, 1.05rem); color: var(--p-mute); letter-spacing: -.005em; }
.p-cta { position: relative; display: inline-flex; align-items: center; gap: 14px; margin-top: clamp(22px, 3vw, 38px); padding-bottom: 12px; color: var(--p-ink); text-decoration: none; font-size: 14px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.p-cta span, .p-cta i { transition: transform .4s cubic-bezier(.2,.8,.2,1), color .3s; }
.p-cta i { font-style: normal; font-size: 1.25em; letter-spacing: 0; }
.p-cta::before, .p-cta::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; }
.p-cta::before { width: 100%; background: var(--p-line); }
.p-cta::after { width: 34%; background: var(--p-ink); transition: width .55s cubic-bezier(.2,.8,.2,1), background .3s; }
.p-cta:hover span { transform: translateX(3px); }
.p-cta:hover i { transform: translateX(8px); color: var(--coral); }
.p-cta:hover::after { width: 100%; background: linear-gradient(90deg, var(--coral), var(--pink)); }
.p-cta:focus-visible { outline: 2px solid var(--p-ink); outline-offset: 6px; border-radius: 2px; }

/* ---- mobile: recompose, don't shrink ---- */
@media (max-width: 640px) {
  .poster { min-height: 0; padding: 22px 20px 28px; gap: 22px; }
  .p-conv { grid-template-columns: 1fr; gap: 6px; margin-top: 0; }
  .dog { order: -1; width: min(78%, 300px); margin-right: -6px; }
  .say { padding-bottom: 0; }
  .say-1 { font-size: 1.9rem; }
  .p-q { max-width: 13ch; font-size: clamp(2.3rem, 11vw, 3.2rem); }
  .p-task { font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .b1 { width: 130%; left: -36%; bottom: 36%; } .b2 { width: 62%; right: -26%; top: 14%; opacity: .55; } .b4 { width: 90%; } .b3 { width: 70%; }
}
@media (prefers-reduced-motion: reduce) { .dog-in { animation: none; } .pet, .pet.out { transform: none; transition: opacity .5s ease; } .ans button, .p-cta span, .p-cta i, .p-cta::after { transition: none; } }