/* One animated portrait for the recipient postcard. Loaded after the shared UI. */
#recipientApp .card-scene {
  padding: clamp(10px, 2.2dvh, 20px) 12px 18px;
  justify-content: flex-start;
  background: radial-gradient(circle at 50% 10%, #d7ebfb, #f5faff 62%, #e5f2fc);
}

.postcard-loading {
  gap: 14px;
  color: #fff;
}
.postcard-loading p { color: rgba(255,255,255,.92); font-weight: 800; }
.postcard-page-loader {
  position: relative;
  width: 72px;
  height: 72px;
  border: 2px solid rgba(255,255,255,.18);
  border-top-color: #f6c447;
  border-radius: 50%;
  animation: portrait-loader-spin .9s linear infinite;
  box-shadow: 0 0 24px rgba(246,196,71,.18);
}
.postcard-page-loader span {
  position: absolute;
  inset: 17px;
  border: 2px solid rgba(255,225,154,.34);
  border-right-color: #ffe19a;
  border-radius: 50%;
  animation: portrait-loader-spin .7s linear infinite reverse;
}

.postcard-portrait {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(100%, 430px);
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  border: 3px solid #fff;
  border-radius: 28px 28px 62px 28px;
  background: linear-gradient(160deg,#d7ecf5 0%,#4f99c5 55%,#0a407b 100%);
  box-shadow: 0 28px 70px rgba(8, 48, 88, .27), 0 4px 12px rgba(8, 48, 88, .10);
  text-align: right;
  transform: translateZ(0);
}

.postcard-portrait::after {
  content: "";
  position: absolute;
  z-index: 15;
  inset: 0;
  border: 1px solid rgba(255,255,255,.68);
  border-radius: inherit;
  pointer-events: none;
}

.portrait-kitchen,
.portrait-daylight,
.portrait-bottom-shade,
.portrait-table {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.portrait-kitchen {
  z-index: 0;
  max-width: none;
  object-fit: cover;
}

.portrait-daylight {
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at 81% 24%, rgba(255,244,203,.40), transparent 42%);
  mix-blend-mode: screen;
}

.portrait-brand,
.portrait-edition {
  position: absolute;
  z-index: 10;
  top: 14px;
  border: 1px solid rgba(255,255,255,.75);
  background: rgba(255,255,255,.85);
  box-shadow: 0 7px 22px rgba(13,63,112,.14);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.portrait-brand {
  right: 14px;
  display: grid;
  place-items: center;
  width: 64px;
  height: 49px;
  border-radius: 15px;
}

.portrait-brand img {
  width: 54px;
  height: auto;
  max-height: 40px;
  object-fit: contain;
}

.portrait-edition {
  left: 14px;
  padding: 8px 11px;
  border-radius: 999px;
  color: #174574;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.35;
}

.portrait-family {
  position: absolute;
  z-index: 3;
  top: 12.4%;
  left: -2%;
  width: 104%;
  aspect-ratio: 1312 / 1199;
  pointer-events: none;
}

.portrait-family-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  filter: drop-shadow(0 11px 16px rgba(21,53,75,.15));
}

.portrait-heart-glow {
  position: absolute;
  z-index: 2;
  top: 36.1%;
  left: 40.5%;
  width: 20%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,224,115,.8), rgba(255,209,91,.38) 35%, transparent 70%);
  filter: blur(10px);
  opacity: 0;
  pointer-events: none;
}

.portrait-heart {
  position: absolute;
  z-index: 5;
  top: 38.4%;
  left: 43.5%;
  width: 14%;
  height: auto;
  color: #ffcf57;
  overflow: visible;
  filter: drop-shadow(0 0 5px #f7bd33) drop-shadow(0 0 16px rgba(255,197,64,.8));
  opacity: 0;
  pointer-events: none;
}

.portrait-heart path {
  stroke-dasharray: 310;
  stroke-dashoffset: 310;
}

.portrait-spark {
  position: absolute;
  z-index: 6;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff1af;
  box-shadow: 0 0 8px 3px #ffc84a;
  opacity: 0;
  pointer-events: none;
}
.portrait-spark-1 { top: 38%; left: 41%; }
.portrait-spark-2 { top: 42%; left: 59%; }
.portrait-spark-3 { top: 44%; left: 45%; }

.portrait-table { z-index: 4; pointer-events: none; }
.portrait-table-occluder {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  clip-path: inset(57% 0 0 0);
}
.portrait-food {
  position: absolute;
  display: block;
  max-width: none;
  height: auto;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 8px 7px rgba(77,47,22,.23));
}

/* The empty tabletop begins at 57% of the portrait. Keep every item's base
   above the front edge of the tabletop, not floating in the cabinet area. */
.portrait-food-bread { z-index: 2; left: -2%; bottom: 22%; width: 39%; }
.portrait-food-tea { z-index: 2; bottom: 34%; width: 14.5%; }
.portrait-food-tea-left { left: 20%; }
.portrait-food-tea-right { right: 12%; }
.portrait-food-produce { z-index: 3; right: 1%; bottom: 23%; width: 20%; }
/* The central Ana tub is the product hero. The side packs are clipped from
   the source tableau so the food has real space on a narrow breakfast table. */
.portrait-food-products { z-index: 4; left: 22%; bottom: 25%; width: 66%; clip-path: inset(0 27% 0 27%); }

.portrait-product-3d {
  position: absolute;
  z-index: 4;
  left: 32%;
  bottom: 22.5%;
  display: block;
  width: 36%;
  height: 21%;
  max-width: none;
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 100%;
  display: block;
  background: transparent;
  --poster-color: transparent;
  filter: drop-shadow(0 11px 8px rgba(48, 38, 27, .27));
}

.postcard-portrait.has-product-3d .portrait-food-products { visibility: hidden; }

.portrait-bottom-shade {
  z-index: 7;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 65%, rgba(4,31,63,.12) 72%, rgba(2,29,61,.77) 81%, rgba(2,29,61,.96) 100%);
}

.portrait-curtain {
  position: absolute;
  z-index: 7;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 24px;
  background: radial-gradient(circle at 50% 43%,#75b7d2 0%,#216aa4 42%,#0a3d75 100%);
  color: #fff;
  font-size: clamp(17px,5vw,22px);
  font-weight: 850;
  line-height: 1.5;
  text-align: center;
  text-shadow: 0 2px 15px rgba(2,27,57,.38);
  pointer-events: none;
  transition: opacity .35s ease, visibility .35s ease;
}
.portrait-curtain-heart {
  color: #ffe19a;
  font-family: Georgia,serif;
  font-size: 94px;
  font-weight: 400;
  line-height: 1;
  text-shadow: 0 0 24px rgba(255,202,74,.65);
}
.portrait-loader {
  --load-progress: 0deg;
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-top: 8px;
  border-radius: 50%;
  background: conic-gradient(#ffe19a var(--load-progress),rgba(255,255,255,.18) 0);
  box-shadow: 0 0 24px rgba(255,202,74,.25);
}
.portrait-loader::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: inherit;
  background: #1d659e;
}
.portrait-loader i {
  position: relative;
  z-index: 1;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: portrait-loader-spin .72s linear infinite;
}
.portrait-progress {
  min-width: 44px;
  color: #ffe9ad;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.postcard-portrait.is-loaded .portrait-loader i { display: none; }
.postcard-portrait.is-loaded .portrait-loader::after {
  content: "✓";
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 22px;
  line-height: 1;
}
.postcard-portrait:not(.is-waiting) .portrait-curtain { opacity: 0; visibility: hidden; }

.portrait-inscription {
  position: absolute;
  z-index: 8;
  right: 5%;
  bottom: 2.4%;
  left: 5%;
  display: grid;
  grid-template-columns: minmax(0,1fr) 88px;
  grid-template-rows: auto auto auto auto;
  align-items: center;
  column-gap: 10px;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,21,52,.38);
}

.portrait-kicker,
.portrait-from,
.portrait-to { grid-column: 1; min-width: 0; opacity: 0; }
.portrait-kicker {
  color: #ffe6a0;
  font-size: clamp(12px, 3.4vw, 16px);
  font-weight: 900;
  line-height: 1.45;
}
.portrait-from {
  margin-top: 1px;
  font-size: clamp(13px, 3.5vw, 16px);
  line-height: 1.5;
}
.portrait-from strong {
  display: inline;
  color: #fff;
  font-size: clamp(23px, 6.6vw, 33px);
  font-weight: 950;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}
.portrait-to {
  margin-top: -2px;
  font-size: clamp(15px, 4.1vw, 19px);
  font-weight: 850;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.postcard-portrait .recipient-waveform {
  grid-column: 1;
  width: 100%;
  height: 22px;
  margin: 1px 0 0;
  opacity: .8;
}

.portrait-audio-control {
  grid-column: 2;
  grid-row: 1 / 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  align-self: end;
  min-width: 0;
}

.postcard-portrait .portrait-play {
  position: relative;
  top: auto;
  left: auto;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0;
  flex: none;
  border: 2px solid rgba(255,255,255,.94);
  border-radius: 50%;
  background: linear-gradient(140deg,#fff0ac 0%,#f6c447 54%,#e9a61f 100%);
  color: #123b71;
  box-shadow: 0 0 0 7px rgba(255,255,255,.17), 0 13px 28px rgba(2,25,54,.37), inset 0 2px rgba(255,255,255,.8);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.postcard-portrait .portrait-play:hover { transform: translateY(-3px) scale(1.04); }
.postcard-portrait .portrait-play:active { transform: scale(.94); }
.postcard-portrait .portrait-play:focus-visible { outline: 3px solid #fff; outline-offset: 8px; }
.postcard-portrait .portrait-play .pulse { inset: -10px; border-color: #ffe5a0; }
.postcard-portrait .portrait-play:not(.is-playing) .pulse { animation: postcard-pulse 2.1s ease-out infinite; }
.portrait-play-label {
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
}

.card-scene .portrait-after-play {
  position: absolute;
  z-index: 12;
  right: 4%;
  bottom: 2%;
  left: 4%;
  width: auto;
  margin: 0;
  padding: 13px;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 18px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 14px 32px rgba(3,32,65,.3);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.card-scene .portrait-after-play p { color: #174574; font-size: 12px; font-weight: 800; }
.card-scene .portrait-after-play .btn { min-width: 0; padding-inline: 8px; font-size: 12px; }

.postcard-portrait.is-in-view .portrait-kitchen { animation: portrait-camera 3s ease-out both; }
.postcard-portrait.is-in-view .portrait-family-image { animation: portrait-family-rise .52s .04s cubic-bezier(.17,.8,.2,1) both; }
.postcard-portrait.is-in-view .portrait-food-bread { animation: portrait-food-rise .3s .02s cubic-bezier(.17,.8,.2,1) both; }
.postcard-portrait.is-in-view .portrait-food-tea { animation: portrait-food-rise .3s .08s cubic-bezier(.17,.8,.2,1) both; }
.postcard-portrait.is-in-view .portrait-food-produce { animation: portrait-food-rise .3s .14s cubic-bezier(.17,.8,.2,1) both; }
.postcard-portrait.is-in-view.is-product-reveal .portrait-product-3d.is-ready { animation: portrait-product-3d-rise .5s cubic-bezier(.16,1.16,.32,1) both; }
.postcard-portrait.is-in-view .portrait-heart-glow { animation: portrait-glow .42s .34s ease-out both; }
.postcard-portrait.is-in-view .portrait-heart { animation: portrait-heart-reveal .34s .38s ease-out both; }
.postcard-portrait.is-in-view .portrait-heart path { animation: portrait-heart-draw .4s .38s ease-in-out both; }
.postcard-portrait.is-in-view .portrait-spark { animation: portrait-sparkle 1.2s .58s ease-out infinite; }
.postcard-portrait.is-in-view .portrait-spark-2 { animation-delay: .72s; }
.postcard-portrait.is-in-view .portrait-spark-3 { animation-delay: .86s; }
.postcard-portrait.is-in-view .portrait-kicker { animation: portrait-copy-rise .3s .56s ease-out both; }
.postcard-portrait.is-in-view .portrait-from { animation: portrait-copy-rise .3s .64s ease-out both; }
.postcard-portrait.is-in-view .portrait-to { animation: portrait-copy-rise .3s .72s ease-out both; }
.postcard-portrait .portrait-audio-control { opacity: 1; pointer-events: auto; transform: none; }

@keyframes portrait-camera { from { transform: scale(1.035); } to { transform: scale(1); } }
@keyframes portrait-family-rise { from { opacity: 0; transform: translateY(85%) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes portrait-food-rise { from { opacity: 0; transform: translateY(30px) scale(.84); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes portrait-product-3d-rise {
  from { opacity: 0; transform: translateY(40px) scale(.72) rotate(-5deg); }
  72% { opacity: 1; transform: translateY(-3px) scale(1.025) rotate(.5deg); }
  to { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes portrait-glow { from { opacity: 0; transform: scale(.4); } to { opacity: .95; transform: scale(1); } }
@keyframes portrait-heart-reveal { from { opacity: 0; transform: scale(.65); } to { opacity: 1; transform: scale(1); } }
@keyframes portrait-heart-draw { to { stroke-dashoffset: 0; } }
@keyframes portrait-copy-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes portrait-sparkle { 0%,100% { opacity: 0; transform: translateY(5px) scale(.45); } 45% { opacity: 1; transform: translateY(-7px) scale(1); } }
@keyframes portrait-loader-spin { to { transform: rotate(360deg); } }

@media (max-width: 380px) {
  .postcard-portrait { border-radius: 22px 22px 50px 22px; }
  .portrait-brand { width: 56px; height: 43px; }
  .portrait-brand img { width: 48px; }
  .portrait-edition { font-size: 9px; }
  .postcard-portrait .portrait-play { width: 64px; height: 64px; }
  .portrait-inscription { grid-template-columns: minmax(0,1fr) 76px; }
}

@media (max-height: 700px) and (max-width: 759px) {
  #recipientApp .card-scene { padding-top: 8px; }
  .postcard-portrait { width: min(100%, 370px); }
}

@media (prefers-reduced-motion: reduce) {
  /* A tap explicitly starts this short story, even if the OS reduces ambient
     motion. Keep the requested reveal and remove the continuous effects. */
  .postcard-portrait.is-in-view .portrait-family-image,
  .postcard-portrait.is-in-view .portrait-food,
  .postcard-portrait.is-in-view .portrait-product-3d,
  .postcard-portrait.is-in-view .portrait-heart,
  .postcard-portrait.is-in-view .portrait-heart-glow,
  .postcard-portrait.is-in-view .portrait-heart path,
  .postcard-portrait.is-in-view .portrait-kicker,
  .postcard-portrait.is-in-view .portrait-from,
  .postcard-portrait.is-in-view .portrait-to {
    animation-duration: 1s !important;
    animation-iteration-count: 1 !important;
  }
  .postcard-portrait .portrait-spark { display: none; }
}