:root{--yellow:#ffc700;--black:#050505;--paper:#f1ebdc;--white:#fff;--muted:#6d6960}

.postcard-stage{position:relative;container-type:inline-size;isolation:isolate;overflow:hidden;aspect-ratio:4/5;color:var(--black);background:var(--paper);transition:background .45s ease,color .45s ease}
.postcard-stage::before{content:"";position:absolute;z-index:0;inset:0;opacity:.28;background-image:radial-gradient(rgba(5,5,5,.18) .55px,transparent .75px);background-size:5px 5px;pointer-events:none}
.postcard-stage::after{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(145deg,rgba(255,255,255,.52),transparent 42%,rgba(255,199,0,.06));pointer-events:none}
.postcard-brand{position:absolute;z-index:8;top:4.5%;left:5%;display:flex;align-items:center;gap:10px;color:inherit;font-size:clamp(.55rem,1.55cqw,.74rem);font-weight:800;letter-spacing:.07em;text-decoration:none;text-transform:uppercase}
.postcard-brand img{display:block;width:clamp(42px,8cqw,72px);height:clamp(42px,8cqw,72px);padding:7px;background:#050505;object-fit:contain}
.postcard-brand span{opacity:.72}
.postcard-copy{position:absolute;z-index:6;top:15%;left:6%;width:66%;transition:top .45s ease,left .45s ease,width .45s ease,text-align .45s ease,transform .45s ease}
.postcard-eyebrow{display:block;margin:0 0 2.4cqw;font-size:clamp(.55rem,1.6cqw,.76rem);font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.postcard-title{max-width:100%;margin:0;font-size:clamp(2.2rem,9cqw,6.2rem);font-weight:700;line-height:.86;letter-spacing:-.07em;text-wrap:balance}
.postcard-instruction{max-width:48ch;margin:3.2cqw 0 0;color:var(--muted);font-size:clamp(.74rem,2.2cqw,1.15rem);line-height:1.45;text-wrap:balance}
.postcard-visual{position:absolute;z-index:2;inset:0;pointer-events:none;transition:transform 1s cubic-bezier(.2,.8,.2,1),filter .7s ease}
.postcard-halo{position:absolute;z-index:1;right:3%;bottom:1%;width:94%;height:68%;border-radius:50%;background:radial-gradient(circle,rgba(255,199,0,.34),transparent 68%);filter:blur(22px);transition:opacity .55s ease,transform .55s ease}
.postcard-cake{position:absolute;z-index:2;right:-4%;bottom:-4%;width:94%;height:68%;object-fit:contain;mix-blend-mode:multiply;filter:contrast(1.025);-webkit-mask-image:radial-gradient(ellipse 50% 47% at 50% 58%,#000 64%,transparent 100%);mask-image:radial-gradient(ellipse 50% 47% at 50% 58%,#000 64%,transparent 100%);transition:filter .7s ease,opacity .7s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.postcard-cake.is-custom{mix-blend-mode:normal;-webkit-mask-image:none;mask-image:none}
.postcard-stage .candles-layer{z-index:5}
.postcard-watermark{position:absolute;z-index:8;right:5%;bottom:3.8%;padding:5px 7px;color:#111;background:rgba(255,255,255,.78);font-size:clamp(.48rem,1.3cqw,.64rem);letter-spacing:.04em;text-transform:uppercase}

html[data-style="poster"] .postcard-stage{background:#f1ebdc}
html[data-style="poster"] .postcard-stage::after{background:linear-gradient(120deg,rgba(255,255,255,.48),transparent 45%)}
html[data-style="poster"] .postcard-copy{top:15%;left:6%;width:51%;text-align:left}
html[data-style="poster"] .postcard-title{text-transform:uppercase}
html[data-style="poster"] .postcard-stage::selection{background:var(--yellow)}

html[data-style="warm"] .postcard-stage{background:linear-gradient(155deg,#fff9dc,#e5dac4)}
html[data-style="warm"] .postcard-stage::after{background:radial-gradient(circle at 50% 58%,rgba(255,199,0,.18),transparent 46%)}
html[data-style="warm"] .postcard-brand{left:50%;transform:translateX(-50%)}
html[data-style="warm"] .postcard-copy{top:10%;left:50%;width:82%;text-align:center;transform:translateX(-50%)}
html[data-style="warm"] .postcard-title{font-size:clamp(2.1rem,8.2cqw,5.6rem);font-weight:500;line-height:.9;text-transform:lowercase}
html[data-style="warm"] .postcard-instruction{margin-right:auto;margin-left:auto;color:#625b4e}
html[data-style="warm"] .postcard-halo{right:4%;width:92%;background:radial-gradient(circle,rgba(255,199,0,.44),transparent 68%)}
html[data-style="warm"] .postcard-cake{right:3%;bottom:-5%;width:94%;height:65%}
html[data-style="warm"] .postcard-watermark{right:50%;transform:translateX(50%)}

html[data-style="night"] .postcard-stage{color:#fff;background:#070707}
html[data-style="night"] .postcard-stage::before{opacity:.12;background-image:radial-gradient(rgba(255,255,255,.23) .55px,transparent .75px)}
html[data-style="night"] .postcard-stage::after{background:radial-gradient(circle at 66% 67%,rgba(255,199,0,.22),transparent 38%)}
html[data-style="night"] .postcard-copy{top:14%;left:6%;width:52%;text-align:left}
html[data-style="night"] .postcard-title{font-weight:700;text-transform:uppercase}
html[data-style="night"] .postcard-instruction{color:#aaa}
html[data-style="night"] .postcard-halo{right:-4%;bottom:-2%;width:100%;height:72%;background:radial-gradient(circle,rgba(255,199,0,.58),transparent 62%);filter:blur(26px)}
html[data-style="night"] .postcard-cake{right:-5%;bottom:-4%;width:96%;height:68%;mix-blend-mode:screen;filter:brightness(.8) contrast(1.1);-webkit-mask-image:radial-gradient(ellipse 47% 43% at 50% 58%,#000 56%,transparent 100%);mask-image:radial-gradient(ellipse 47% 43% at 50% 58%,#000 56%,transparent 100%)}
html[data-style="night"] .postcard-cake.is-night-native{mix-blend-mode:normal;filter:contrast(1.02);-webkit-mask-image:radial-gradient(ellipse 50% 47% at 50% 58%,#000 72%,transparent 100%);mask-image:radial-gradient(ellipse 50% 47% at 50% 58%,#000 72%,transparent 100%)}
html[data-style="night"] .postcard-cake.is-custom{mix-blend-mode:normal}
html[data-style="night"] .postcard-watermark{color:#111;background:var(--yellow)}

.is-wish-sent .postcard-visual{transform:scale(1.015);filter:none}
.is-wish-sent .postcard-halo{opacity:.72;transform:scale(.98)}
.is-wish-sent .postcard-cake{filter:contrast(1.025)}
html[data-style="night"].is-wish-sent .postcard-cake{filter:brightness(.8) contrast(1.1)}
html[data-style="night"].is-wish-sent .postcard-cake.is-night-native{filter:contrast(1.02)}

@media(max-width:600px){
  .postcard-copy{top:14%;left:6%;width:78%}
  .postcard-title{font-size:clamp(2.1rem,11.2cqw,4.8rem)}
  .postcard-instruction{font-size:clamp(.72rem,2.8cqw,1rem)}
  html[data-style="warm"] .postcard-copy{top:13%;width:88%}
  html[data-style="night"] .postcard-copy{top:14%;width:72%}
}

@media(prefers-reduced-motion:reduce){.postcard-stage,.postcard-copy,.postcard-visual,.postcard-halo,.postcard-cake{transition:none}}

/* White studio backgrounds blend with the paper at the outer stage boundary.
   Keep the entire image inside the stage, including room for the 1.035x blow
   animation. The 4:3 mask follows object-fit:contain and fades only the image
   margins, so neither the cake outline nor its contact shadow is cut out. */
.postcard-stage.has-catalog-cake,.postcard-stage.has-brand-cake{mix-blend-mode:multiply}
.postcard-stage .postcard-cake.is-catalog{
  right:2%;width:94%;mix-blend-mode:normal;filter:brightness(1.01);
  -webkit-mask-image:url("cake-edge-mask.svg");mask-image:url("cake-edge-mask.svg");
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
html[data-cake="cake-6"]{--cake-glow:rgba(227,134,159,.24)}
html[data-cake="cake-7"]{--cake-glow:rgba(174,146,218,.24)}
html[data-cake="cake-8"]{--cake-glow:rgba(166,190,121,.24)}
html[data-cake="cake-9"]{--cake-glow:rgba(126,187,221,.24)}
html[data-cake="cake-10"]{--cake-glow:rgba(237,159,135,.24)}
html[data-cake="cake-11"]{--cake-glow:rgba(145,206,229,.24)}
html[data-cake="cake-12"]{--cake-glow:rgba(64,155,109,.24)}
html[data-cake="cake-13"]{--cake-glow:rgba(134,115,199,.24)}
html[data-cake="cake-14"]{--cake-glow:rgba(105,157,219,.24)}
html[data-cake="cake-15"]{--cake-glow:rgba(89,135,207,.24)}
html[data-cake="cake-16"]{--cake-glow:rgba(233,161,196,.24)}
html[data-cake="cake-17"]{--cake-glow:rgba(167,102,137,.24)}
html[data-cake="cake-18"]{--cake-glow:rgba(173,142,209,.24)}
html[data-cake="cake-19"]{--cake-glow:rgba(103,183,197,.24)}
html[data-cake="cake-20"]{--cake-glow:rgba(235,170,122,.24)}
html[data-cake="cake-21"]{--cake-glow:rgba(183,139,215,.24)}
html[data-cake="cake-22"]{--cake-glow:rgba(92,182,178,.24)}
html[data-cake="cake-23"]{--cake-glow:rgba(230,179,136,.24)}
html[data-cake="cake-24"]{--cake-glow:rgba(133,169,183,.24)}
html[data-cake="cake-25"]{--cake-glow:rgba(182,156,215,.24)}
html[data-cake="cake-26"]{--cake-glow:rgba(99,158,215,.24)}
html[data-cake="cake-27"]{--cake-glow:rgba(210,147,111,.24)}
html[data-cake="cake-28"]{--cake-glow:rgba(115,150,187,.24)}
html[data-cake="cake-29"]{--cake-glow:rgba(156,208,183,.24)}
html[data-cake="cake-30"]{--cake-glow:rgba(143,192,97,.24)}
html[data-cake="cake-31"]{--cake-glow:rgba(221,168,98,.24)}
html[data-cake="cake-32"]{--cake-glow:rgba(194,114,122,.24)}
html[data-cake="cake-33"]{--cake-glow:rgba(156,200,156,.24)}
html[data-cake="cake-34"]{--cake-glow:rgba(159,177,188,.24)}
html[data-cake="cake-35"]{--cake-glow:rgba(232,159,131,.24)}
html[data-cake="cake-36"]{--cake-glow:rgba(120,201,207,.24)}
/* A glow underneath an opaque studio image is hidden inside its rectangle but
   visible outside it. Removing that layer prevents the pale top strip and the
   vertical seam at the shadow edge. The soft shadow is already in each photo. */
.has-catalog-cake .postcard-halo,.has-brand-cake .postcard-halo{display:none}

/* The original five photographs are square and have cream studio backgrounds.
   Normalize their individual paper whites before multiplying onto the postcard.
   A square margin mask preserves the full cake instead of the old radial crop. */
.postcard-stage .postcard-cake.is-brand{
  right:2%;bottom:2%;width:94%;mix-blend-mode:normal;
  filter:var(--brand-cake-filter);
  -webkit-mask-image:url("cake-brand-edge-mask.svg");mask-image:url("cake-brand-edge-mask.svg");
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
html[data-cake="cake-1"]{--brand-cake-filter:var(--cake-paper-1,none)}
html[data-cake="cake-2"]{--brand-cake-filter:var(--cake-paper-2,none)}
html[data-cake="cake-3"]{--brand-cake-filter:var(--cake-paper-3,none)}
html[data-cake="cake-4"]{--brand-cake-filter:var(--cake-paper-4,none)}
html[data-cake="cake-5"]{--brand-cake-filter:var(--cake-paper-5,none)}