@import url('https://fonts.googleapis.com/css2?family=Allura&display=swap');

/* One composition renderer for the gift and its live editor preview. */
.gift-slideshow { position:relative; width:100%; height:74%; isolation:isolate; }
.gift-photo-scene { position:relative; width:100%; height:100%; overflow:hidden; isolation:isolate; container-type:size; background:radial-gradient(ellipse at 18% 38%,#77310355,transparent 32%),radial-gradient(ellipse at 82% 85%,#923e0044,transparent 40%),linear-gradient(135deg,#140f0b,#1f1711 55%,#0d0a07); }
.gift-photo-scene::before { content:''; position:absolute; inset:0; z-index:-1; opacity:.3; background:url('/assets/gift-designs/scrisoare-smarald/background-texture.png') center / cover; mix-blend-mode:screen; }
.gift-slide-stage,.gift-photo-deck { position:absolute; inset:0; }
.gift-photo-deck { perspective:1000px; }
.gift-slideshow:not([data-style=film]) .gift-photo-scene { touch-action:pan-y pinch-zoom; user-select:none; cursor:grab; }
.gift-slideshow.is-swiping .gift-photo-scene { cursor:grabbing; }
.gift-photo-scene:focus-visible { outline:1px solid #d9cdb199; outline-offset:-4px; }
.gift-slideshow:not([data-style=film]) .gift-photo-deck:not(.is-leaving) { translate:var(--gift-swipe-offset,0px) 0; transition:translate .2s ease-out; }
.gift-slideshow.is-swiping .gift-photo-deck { transition:none; }
.gift-slideshow { --gift-slide-from:8%; --gift-slide-to:-8%; }
.gift-slideshow[data-direction=previous] { --gift-slide-from:-8%; --gift-slide-to:8%; }
.gift-photo-frame { position:absolute; margin:0; box-sizing:border-box; }
.gift-photo-frame img { display:block; width:100%; height:100%; object-fit:cover; }
.gift-photo-inscription { position:absolute; z-index:3; color:#d9cdb1; font:400 7.3cqw/1.08 Allura,'Brush Script MT',cursive; text-align:center; text-shadow:0 2px 6px #0009; pointer-events:none; }
.gift-photo-inscription>span { display:block; }
.gift-photo-inscription,.gift-photo-heading { overflow-wrap:anywhere; }
.gift-photo-heading { text-transform:uppercase; }
.gift-photo-inscription,.gift-photo-heading { overflow-wrap:anywhere; }
.gift-photo-heading { text-transform:uppercase; }
.gift-photo-heading { display:none; }
.gift-photo-ribbon,.gift-photo-leaves { position:absolute; pointer-events:none; background-repeat:no-repeat; background-size:contain; }
.gift-photo-ribbon { background-image:url('/assets/gift-designs/scrisoare-smarald/emerald-ribbon.png'); }
.gift-photo-leaves { background-image:url('/assets/gift-designs/scrisoare-smarald/right-branch.png'); }
.gift-slide-arrow { position:absolute; z-index:6; top:53%; display:none; place-items:center; width:44px; height:44px; padding:0; transform:translateY(-50%); border:0; border-radius:50%; background:#2018115c; color:#e8d3ac; cursor:pointer; transition:background .2s; }
.gift-slide-arrow:hover { background:#201811cc; }
.gift-slide-arrow span { width:15px; height:15px; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; transform:rotate(45deg); margin-right:6px; }
.gift-slide-prev { left:2%; } .gift-slide-next { right:2%; }
.gift-slide-prev span { transform:rotate(-135deg); margin:0 0 0 6px; }
.gift-slide-arrow:disabled { visibility:hidden; }
.gift-slide-empty { position:absolute; inset:15% 5%; z-index:5; display:grid; place-items:center; padding:12px; text-align:center; font:400 12px/1.5 Inter,sans-serif; color:#e6ddc8; }
.gift-slideshow[data-photo-count="0"] .gift-photo-inscription,.gift-slideshow[data-photo-count="0"] .gift-photo-heading { display:none; }

/* Polaroid: a tall portrait and two overlapping snapshots, never a single stack. */
.gift-slideshow[data-style=polaroid] .gift-photo-frame { padding:3.5% 3.5% 10%; background:linear-gradient(110deg,#faf5e6,#e8e3d3 65%,#faf7ec); box-shadow:1px 3px 4px #0005,5px 12px 22px #0006,inset 0 0 1px #fff; border:1px solid #efe6d3; }
.gift-slideshow[data-style=polaroid] .gift-photo-frame img { box-shadow:0 0 0 1px #aa9f8559; }
.gift-slideshow[data-style=polaroid] .gift-photo-frame[data-position="0"] { left:37%; top:11%; width:57%; height:55%; transform:rotate(7deg); }
.gift-slideshow[data-style=polaroid] .gift-photo-frame[data-position="1"] { z-index:2; left:15%; top:57%; width:48%; height:39%; padding:3% 3% 9%; transform:rotate(-10deg); }
.gift-slideshow[data-style=polaroid] .gift-photo-frame[data-position="2"] { z-index:1; left:60%; top:62%; width:36%; height:35%; padding:2.5% 2.5% 8%; transform:rotate(9deg); }
.gift-slideshow[data-style=polaroid] .gift-photo-inscription { left:5%; top:19%; width:28%; transform:rotate(-7deg); }
.gift-slideshow[data-style=polaroid] .gift-photo-inscription>span { margin-top:5%; font:400 11cqw/1 Georgia,serif; }
.gift-slideshow[data-style=polaroid] .gift-photo-ribbon { width:83%; height:72%; left:-38%; top:47%; transform:rotate(-18deg); }
.gift-slideshow[data-style=polaroid] .gift-photo-leaves { z-index:1; width:22%; height:35%; right:-1%; top:39%; transform:rotate(-19deg); filter:saturate(.5) brightness(1.3); }
.gift-slideshow[data-style=polaroid] .gift-slide-arrow { top:53%; }

/* Cinematic: edge-to-edge photography with a slow push-in and a soft vignette. */
.gift-slideshow[data-style=cinematic] .gift-photo-frame { inset:0; overflow:hidden; }
.gift-slideshow[data-style=cinematic] .gift-photo-frame img { animation:gift-photo-zoom 6.8s ease-out both; object-position:50% 42%; }
.gift-slideshow[data-style=cinematic] .gift-slide-stage::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,#140f0bd9,transparent 20%,transparent 60%,#1c140fd9 100%),linear-gradient(90deg,#150f0b44,transparent 25%,transparent 80%,#150f0b33); }
.gift-slideshow[data-style=cinematic] .gift-photo-inscription { left:8%; bottom:10%; width:84%; text-align:left; font-size:8.5cqw; }
.gift-slideshow[data-style=cinematic] .gift-photo-inscription>span { padding-left:7%; font-size:7.5cqw; }
.gift-slideshow[data-style=cinematic] .gift-photo-ribbon { z-index:2; width:40%; height:26%; bottom:-12%; right:-20%; transform:rotate(25deg); }
.gift-photo-hearts { display:none; position:absolute; z-index:4; bottom:-3%; right:-1%; width:27%; height:23%; background:url('/gift-photo-assets/satin-hearts.webp') center / contain no-repeat; transform:rotate(-10deg); }
.gift-slideshow[data-style=cinematic] .gift-photo-hearts { display:block; }

/* Album: the photographed paper asset stays separate from the user's pictures. */
.gift-slideshow[data-style=album] .gift-photo-heading { position:absolute; z-index:3; display:block; top:13%; left:5%; width:90%; color:#ded6b9; text-align:center; font:400 3.7cqw/1.8 Georgia,serif; letter-spacing:.27em; }
.gift-photo-heading>span { display:block; font-size:3.1cqw; letter-spacing:.2em; }
.gift-photo-heading>b { display:flex; align-items:center; justify-content:center; gap:4%; font:400 8cqw/1.25 Georgia,serif; }
.gift-photo-heading>b::before,.gift-photo-heading>b::after { content:''; height:1px; width:20%; background:#cfbc8166; }
.gift-slideshow[data-style=album] .gift-slide-stage { top:25%; left:-2%; right:-2%; bottom:-2%; background:url('/gift-photo-assets/album-book.webp') center / 100% 100% no-repeat; perspective:1000px; }
.gift-slideshow[data-style=album] .gift-photo-frame { width:32%; height:30%; padding:1.4%; background:#eee8d7; box-shadow:1px 3px 4px #583c2e69,inset 0 0 0 1px #fff8; }
.gift-slideshow[data-style=album] .gift-photo-frame[data-position="0"] { left:19%; top:23%; transform:rotate(6deg) skewY(1deg); }
.gift-slideshow[data-style=album] .gift-photo-frame[data-position="1"] { left:17%; top:57%; height:27%; transform:rotate(3deg); }
.gift-slideshow[data-style=album] .gift-photo-frame[data-position="2"] { left:60%; top:22%; transform:rotate(-6deg) skewY(-1deg); }
.gift-slideshow[data-style=album] .gift-photo-frame[data-position="3"] { left:59%; top:56%; height:27%; transform:rotate(-3deg); }
.gift-slideshow[data-style=album] .gift-photo-frame figcaption { position:absolute; top:103%; left:-8%; width:116%; color:#5f5437; text-align:center; font:400 4.4cqw/1 Allura,cursive; white-space:nowrap; }
.gift-slideshow[data-style=album] .gift-slide-arrow { top:64%; background:#1c140f44; }

/* A sheet has two opaque faces. Both are clipped independently, so 3D
   backface culling stays intact and photos never show through the paper. */
.gift-album-turn { position:absolute; inset:0; z-index:4; perspective:1200px; perspective-origin:52% 50%; pointer-events:none; --turn-angle:-180deg; --turn-lift:-3deg; }
.gift-album-turn[data-direction=previous] { --turn-angle:180deg; --turn-lift:3deg; }
.gift-album-turn .gift-album-stationary { background:url('/gift-photo-assets/album-book.webp') center / 100% 100% no-repeat; clip-path:inset(0 48% 0 0); }
.gift-album-turn[data-direction=previous] .gift-album-stationary { clip-path:inset(0 0 0 52%); }
.gift-album-leaf { position:absolute; z-index:3; left:52%; top:14%; width:42%; height:75%; transform-origin:0 50%; transform-style:preserve-3d; animation:gift-album-sheet-turn 1.25s cubic-bezier(.32,.05,.22,1) both; }
.gift-album-turn[data-direction=previous] .gift-album-leaf { left:10%; transform-origin:100% 50%; }
.gift-album-face { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; overflow:hidden; background:radial-gradient(ellipse at 60% 40%,#f8efd9aa,transparent 75%),repeating-linear-gradient(12deg,#96744306 0 1px,transparent 1px 3px),#eaddbf; }
.gift-album-face[data-side=right] { clip-path:polygon(0 5%,94% 0,98% 2%,100% 5%,100% 96%,97% 98%,0 100%); }
.gift-album-face[data-side=left] { clip-path:polygon(0 2%,4% 0,100% 5%,100% 100%,3% 97%,0 94%); }
.gift-album-face[data-side=right] { transform-origin:0 50%; }
.gift-album-face[data-side=left] { transform-origin:100% 50%; }
.gift-album-face.is-front { transform:translateZ(.3px); animation:gift-album-flex-front 1.25s ease-in-out both; }
.gift-album-face.is-back { transform-origin:50% 50%; transform:rotateY(180deg) translateZ(.3px); animation:gift-album-flex-back 1.25s ease-in-out both; }
.gift-album-page-content { position:absolute; top:-18.666667%; width:238.095238%; height:133.333333%; }
.gift-album-face[data-side=right] .gift-album-page-content { left:-123.809524%; }
.gift-album-face[data-side=left] .gift-album-page-content { left:-23.809524%; }
.gift-album-face::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,#49301199,transparent 15%,#fff8 62%,#8b603755 98%); opacity:0; animation:gift-album-paper-light 1.25s ease-in-out both; }
.gift-album-face[data-side=left]::after { background:linear-gradient(270deg,#49301199,transparent 15%,#fff8 62%,#8b603755 98%); }
.gift-album-face.is-back::after { animation-direction:reverse; }
.gift-album-cast-shadow { position:absolute; z-index:2; top:17%; bottom:11%; left:10%; width:84%; background:linear-gradient(90deg,transparent 15%,#24170880 48%,#24170899 50%,transparent 82%); transform-origin:50% 50%; opacity:0; filter:blur(5px); animation:gift-album-shadow 1.25s ease-in-out both; }
@keyframes gift-album-sheet-turn {
  0% { transform:rotateY(0) rotateZ(0); }
  38% { transform:rotateY(calc(var(--turn-angle) * .43)) rotateZ(var(--turn-lift)); }
  72% { transform:rotateY(calc(var(--turn-angle) * .86)) rotateZ(calc(var(--turn-lift) * .3)); }
  100% { transform:rotateY(var(--turn-angle)) rotateZ(0); }
}
@keyframes gift-album-paper-light { 0%,100% { opacity:.12; } 35% { opacity:.55; } 55% { opacity:.85; } 80% { opacity:.3; } }
@keyframes gift-album-flex-front { 0%,100% { transform:translateZ(.3px); } 45% { transform:translateZ(.3px) skewY(1.4deg) scaleX(.975); } }
@keyframes gift-album-flex-back { 0%,100% { transform:rotateY(180deg) translateZ(.3px); } 55% { transform:rotateY(180deg) translateZ(.3px) skewY(-1.4deg) scaleX(.975); } }
@keyframes gift-album-shadow { 0%,100% { opacity:0; transform:scaleX(.25); } 45% { opacity:.85; transform:scaleX(1); } 75% { opacity:.35; transform:scaleX(.65); } }

/* Animated heart: a fixed photo window, luminous gold rim and floating dust. */
.gift-slideshow[data-style=heart] .gift-photo-scene { background:radial-gradient(ellipse at 50% 48%,#59301877,transparent 63%),radial-gradient(ellipse at 12% 74%,#53322366,transparent 31%),linear-gradient(135deg,#1c140f,#100c09 65%,#221913); }
.gift-slideshow[data-style=heart] .gift-photo-scene::before { opacity:.55; background:radial-gradient(circle at 8% 11%,#e7c85088 0 .6%,transparent 1.8%),radial-gradient(circle at 76% 7%,#b0ac5733 0 1%,transparent 3%),radial-gradient(circle at 18% 86%,#d49e8d77 0 1%,transparent 4%),radial-gradient(circle at 91% 71%,#d8b54e66 0 .6%,transparent 2.6%),radial-gradient(circle at 94% 30%,#b3ba5644 0 1.2%,transparent 3.4%); filter:blur(2px); }
.gift-slideshow[data-style=heart] .gift-photo-heading { position:absolute; display:block; top:4%; left:6%; width:88%; z-index:3; color:#eed5a0; text-align:center; text-transform:none; font:400 12cqw/1 Allura,'Brush Script MT',cursive; letter-spacing:0; transform:rotate(-6deg); text-shadow:0 2px 12px #0008; }
.gift-slideshow[data-style=heart] .gift-photo-heading>b { display:block; margin-top:2%; font:400 11cqw/.8 Georgia,serif; }
.gift-slideshow[data-style=heart] .gift-photo-heading>b::before,.gift-slideshow[data-style=heart] .gift-photo-heading>b::after { display:none; }
.gift-slideshow[data-style=heart] .gift-slide-stage { inset:auto; top:23%; left:50%; width:min(94cqw,62cqh); height:min(94cqw,62cqh); transform:translateX(-50%); }
.gift-slideshow[data-style=heart] .gift-slide-stage::before { content:''; position:absolute; inset:0; background:#f7ae43; opacity:.3; mask:url('/gift-photo-assets/heart-mask.svg') center / contain no-repeat; -webkit-mask:url('/gift-photo-assets/heart-mask.svg') center / contain no-repeat; filter:blur(14px); }
.gift-slideshow[data-style=heart] .gift-photo-frame { inset:0; overflow:hidden; mask:url('/gift-photo-assets/heart-mask.svg') center / contain no-repeat; -webkit-mask:url('/gift-photo-assets/heart-mask.svg') center / contain no-repeat; }
.gift-slideshow[data-style=heart] .gift-photo-frame img { object-position:50% 42%; animation:gift-photo-zoom 6.8s ease-out both; }
.gift-slideshow[data-style=heart] .gift-photo-deck.is-entering { animation:gift-heart-photo-in .9s ease both; }
.gift-slideshow[data-style=heart] .gift-photo-deck.is-leaving { animation:gift-heart-photo-out .9s ease both; }
.gift-slideshow[data-style=heart] .gift-slide-stage::after { content:''; position:absolute; z-index:3; inset:0; pointer-events:none; background:url('/gift-photo-assets/heart-outline.svg') center / contain no-repeat; filter:drop-shadow(0 0 2px #fff5d6) drop-shadow(0 0 6px #ffbb48) drop-shadow(0 0 13px #e99724aa); animation:gift-heart-glow 3.2s ease-in-out infinite; }
.gift-heart-sparkles { position:absolute; z-index:4; inset:0; pointer-events:none; }
.gift-heart-sparkles i { position:absolute; width:var(--spark-size); height:var(--spark-size); border-radius:50%; background:#fff4c9; box-shadow:0 0 4px #ffd477,0 0 9px #ffaa3baa; animation:gift-heart-sparkle var(--spark-time) ease-in-out infinite; animation-delay:var(--spark-delay); }
.gift-heart-sparkles i:nth-child(9n)::after { content:''; position:absolute; inset:-3px; background:linear-gradient(90deg,transparent 40%,#ffe1a3 50%,transparent 60%),linear-gradient(transparent 40%,#ffe1a3 50%,transparent 60%); }
.gift-slideshow[data-style=heart] .gift-photo-inscription { left:10%; bottom:4%; width:80%; padding-right:7%; box-sizing:border-box; font-size:7.2cqw; line-height:1.05; text-align:center; color:#ecdcb5; transform:rotate(-7deg); }
.gift-slideshow[data-style=heart] .gift-photo-inscription>span { position:absolute; right:-2%; top:4%; font:400 10cqw/1 Georgia,serif; }
.gift-slideshow[data-style=heart] .gift-photo-leaves { z-index:0; left:-5%; bottom:10%; width:28%; height:42%; transform:rotate(160deg); opacity:.65; filter:blur(.5px) saturate(.7); }
.gift-slideshow[data-style=heart] .gift-photo-ribbon { z-index:0; right:-20%; bottom:-14%; width:50%; height:32%; transform:rotate(12deg); opacity:.4; }
@keyframes gift-heart-photo-in { from { opacity:0; } to { opacity:1; } }
@keyframes gift-heart-photo-out { to { opacity:0; } }
@keyframes gift-heart-glow { 0%,100% { opacity:.78; } 50% { opacity:1; } }
@keyframes gift-heart-sparkle { 0%,100% { opacity:.08; transform:translate(0,3px) scale(.45); } 45% { opacity:1; } 70% { opacity:.65; transform:translate(var(--spark-drift),-7px) scale(1.15); } }

/* Film: three distinct frames, sprocket holes, and a slanted continuous strip. */
.gift-slideshow[data-style=film] .gift-photo-scene::after { content:''; position:absolute; z-index:-1; inset:0; filter:blur(5px); background:radial-gradient(circle at 84% 28%,#c3a92626 0 3%,transparent 4%),radial-gradient(circle at 71% 35%,#c98a7130 0 3%,transparent 5%),radial-gradient(ellipse at 13% 19%,#d75c0066,transparent 22%); }
.gift-slideshow[data-style=film] .gift-slide-stage { left:10%; top:-2%; bottom:-10%; width:57%; overflow:hidden; transform:rotate(7deg); background:#0b0806; box-shadow:8px 6px 14px #0009,inset 0 0 0 1px #452d1d; }
.gift-slideshow[data-style=film] .gift-slide-stage::before,.gift-slideshow[data-style=film] .gift-slide-stage::after { content:''; position:absolute; z-index:3; top:0; bottom:0; width:7%; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='25' viewBox='0 0 12 25'%3E%3Crect x='1' y='4' width='10' height='15' rx='2' fill='%233e7565'/%3E%3C/svg%3E") center top / 100% auto repeat-y; }
.gift-slideshow[data-style=film] .gift-slide-stage::before { left:2%; } .gift-slideshow[data-style=film] .gift-slide-stage::after { right:2%; }
.gift-slideshow[data-style=film] .gift-slide-stage::before,.gift-slideshow[data-style=film] .gift-slide-stage::after { background-position:center var(--gift-film-offset,0px); pointer-events:none; }
.gift-film-reel { position:absolute; top:0; left:11%; width:78%; will-change:transform; }
.gift-slideshow[data-style=film] .gift-film-reel .gift-photo-frame { position:relative; top:auto; left:auto; width:100%; height:var(--gift-film-frame-height); margin:0 0 var(--gift-film-gap); }
.gift-film-scroll { position:absolute; z-index:5; inset:0; overflow-x:hidden; overflow-y:scroll; scrollbar-width:none; overscroll-behavior-y:contain; touch-action:pan-y; -webkit-overflow-scrolling:touch; cursor:grab; user-select:none; }
.gift-film-scroll::-webkit-scrollbar { display:none; }
.gift-film-scroll.is-dragging { cursor:grabbing; }
.gift-film-scroll:focus-visible { outline:1px solid #d9cdb199; outline-offset:-4px; }
.gift-film-scroll-space { width:1px; pointer-events:none; }
.gift-slideshow[data-style=film] .gift-photo-deck { inset:0 11%; }
.gift-slideshow[data-style=film] .gift-photo-frame { left:0; width:100%; height:31%; overflow:hidden; border-radius:3px; border-block:3px solid #120d0a; }
.gift-slideshow[data-style=film] .gift-photo-frame[data-position="0"] { top:0; } .gift-slideshow[data-style=film] .gift-photo-frame[data-position="1"] { top:33%; } .gift-slideshow[data-style=film] .gift-photo-frame[data-position="2"] { top:66%; }
.gift-slideshow[data-style=film] .gift-photo-inscription { right:3%; top:47%; width:24%; transform:rotate(-7deg); font-size:7.4cqw; }
.gift-slideshow[data-style=film] .gift-photo-inscription>span { margin-top:15%; font:400 9cqw/1 Georgia,serif; }
.gift-slideshow[data-style=film] .gift-photo-ribbon { z-index:2; right:-23%; bottom:-28%; width:74%; height:58%; transform:rotate(5deg); }
.gift-slideshow[data-style=film] .gift-slide-arrow { top:40%; }

.gift-photo-deck.is-entering { animation:gift-photo-enter .85s ease both; }
.gift-photo-deck.is-leaving { animation:gift-photo-leave .9s ease both; pointer-events:none; }
@keyframes gift-photo-enter { from { opacity:0; transform:translateX(var(--gift-slide-from)); } to { opacity:1; transform:translateX(0); } }
@keyframes gift-photo-leave { to { opacity:0; transform:translateX(var(--gift-slide-to)); } }
@keyframes gift-photo-zoom { from { transform:scale(1); } to { transform:scale(1.075); } }

/* Only gifts with photographs receive this scene; the audio card is reused intact. */
body.gift-photo-presentation.gift-is-opened { background:#140f0b; }
body.gift-photo-presentation .gift-scene-artwork > :is(.gift-opened-mark,.gift-emerald-brand,.gift-emerald-side-note,.gift-emerald-ribbon-layer,.gift-emerald-right-branch,.gift-emerald-left-sprig,.gift-emerald-paper-backing,.gift-emerald-bow,.gift-emerald-letter) { display:none!important; }
body.gift-photo-presentation .gift-emerald-footer { display:none; }
body.gift-page.gift-photo-presentation #gift-content:not(.hidden) { padding:0; gap:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
body.gift-photo-presentation .gift-scene-viewport { overflow:hidden; border-radius:0; }
body.gift-photo-presentation .gift-scene-artwork { --gift-art-unit:3.84px; --gift-art-height-unit:8.24px; display:flex; flex-direction:column; padding:0 8px 8px; gap:0; width:384px; height:auto; min-height:0; background:transparent; mask-image:none; -webkit-mask-image:none; border:0; border-radius:0; overflow:visible; }
body.gift-photo-presentation .gift-recipient-slideshow { flex:0 0 540px; height:540px; width:calc(100% + 16px); margin:0 -8px; }
/* Only soften the transition into the player; photographs reach both edges. */
body.gift-photo-presentation .gift-recipient-slideshow .gift-photo-scene {
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 42px),transparent);
  mask-image:linear-gradient(to bottom,#000 calc(100% - 42px),transparent);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}
body.gift-photo-presentation .gift-player-card { position:relative; z-index:8; margin-top:-8px; margin-bottom:0; width:100%; }
.gift-recipient-sticker { display:block; text-align:center; font-size:30px; }
body.gift-hide-lyrics #gift-lyrics-card,body.gift-hide-lyrics #gift-karaoke,body.gift-hide-lyrics [data-gift-emerald-lyrics] { display:none!important; }
@media(min-width:861px) {
  body.gift-page.gift-photo-presentation #gift-content:not(.hidden) { width:384px; min-height:0; overflow:visible; border:0; background:transparent; box-shadow:none; }
  body.gift-photo-presentation .gift-scene-artwork { position:relative; left:auto; top:auto; transform:none; visibility:visible; }
}
@media(max-width:860px) {
  body.gift-page.gift-photo-presentation.gift-is-opened #gift-content:not(.hidden) { grid-template-rows:minmax(0,1fr); padding:0; }
  body.gift-photo-presentation .gift-scene-viewport { overflow-x:hidden; overflow-y:auto; }
  /* Use the phone's actual width, not the scaled 384px artwork canvas. On short
     screens the scene scrolls vertically instead of creating side gutters. */
  body.gift-photo-presentation .gift-scene-artwork {
    --gift-art-unit:clamp(3.2px,1vw,4.3px);
    position:relative;
    top:0;
    left:0;
    width:100%;
    height:100%;
    min-height:0;
    padding:0 0 max(8px,env(safe-area-inset-bottom));
    transform:none;
    visibility:visible;
  }
  body.gift-photo-presentation .gift-recipient-slideshow {
    flex:1 0 clamp(240px,80vw,400px);
    width:100%;
    height:auto;
    margin:0;
  }
  body.gift-photo-presentation .gift-recipient-slideshow[data-style=heart] {
    flex-basis:clamp(440px,125vw,540px);
  }
  body.gift-photo-presentation .gift-player-card {
    width:auto;
    margin-left:max(12px,env(safe-area-inset-left));
    margin-right:max(12px,env(safe-area-inset-right));
  }
}

/* Red rose reference: only the heart gift gets this palette and composition. */
.gift-slideshow[data-style=heart] .gift-photo-scene { background:#210503 url('/gift-photo-assets/red-romance-background.webp') top center / 100% 155% no-repeat; }
.gift-slideshow[data-style=heart] .gift-photo-scene::before { display:none; }
.gift-slideshow[data-style=heart] .gift-photo-scene::after { content:''; position:absolute; z-index:5; inset:0; pointer-events:none; background:url('/gift-photo-assets/red-rose-petals.webp') top center / 100% 155% no-repeat; }
.gift-slideshow[data-style=heart] .gift-photo-heading { top:6.5%; left:17%; width:65%; z-index:6; font-size:17cqw; line-height:1; color:#fff8ed; text-shadow:0 2px 8px #160000; }
.gift-slideshow[data-style=heart] .gift-photo-heading .gift-heart-title-accent { display:inline; font:inherit; letter-spacing:inherit; color:#ff414a; }
.gift-slideshow[data-style=heart] .gift-photo-heading>b { position:absolute; right:-11%; top:-8%; margin:0; font-size:13cqw; font-weight:400; transform:scaleY(1.3) rotate(-8deg); }
.gift-slideshow[data-style=heart] .gift-photo-inscription { z-index:6; top:20%; bottom:auto; left:12%; width:76%; padding:0; transform:none; color:#fff5e9; text-align:center; font:400 3.1cqw/1.65 Georgia,serif; text-transform:uppercase; letter-spacing:.18em; }
.gift-slideshow[data-style=heart] .gift-photo-inscription>span { position:relative; top:auto; right:auto; display:flex; align-items:center; justify-content:center; gap:8%; width:100%; margin-top:2%; color:#ff4b54; font:400 8cqw/1 Georgia,serif; letter-spacing:0; }
.gift-slideshow[data-style=heart] .gift-photo-inscription>span::before,.gift-slideshow[data-style=heart] .gift-photo-inscription>span::after { content:''; height:1px; width:25%; background:linear-gradient(90deg,transparent,#f5716899); }
.gift-slideshow[data-style=heart] .gift-photo-inscription>span::after { transform:rotate(180deg); }
.gift-slideshow[data-style=heart] .gift-slide-stage { top:auto; bottom:0; width:108cqw; height:108cqw; }
.gift-slideshow[data-style=heart] .gift-photo-frame { mask-image:url('/gift-photo-assets/red-heart-mask.svg'); -webkit-mask-image:url('/gift-photo-assets/red-heart-mask.svg'); }
.gift-slideshow[data-style=heart] .gift-slide-stage::before { display:none; }
.gift-slideshow[data-style=heart] .gift-slide-stage::after { background-image:url('/gift-photo-assets/red-heart-frame.webp'); filter:none; animation:gift-red-heart-glow 3.6s ease-in-out infinite; }
.gift-slideshow[data-style=heart] .gift-photo-leaves,.gift-slideshow[data-style=heart] .gift-photo-ribbon { display:none; }
.gift-slideshow[data-style=heart] .gift-heart-sparkles i { background:#fff0c8; box-shadow:0 0 3px #ffbd61,0 0 8px #ff3023; }
@keyframes gift-red-heart-glow { 0%,100% { opacity:.86; } 50% { opacity:1; } }
body.gift-photo-presentation[data-photo-style=heart].gift-is-opened { background:#180301; }
body.gift-photo-presentation[data-photo-style=heart] .gift-scene-artwork { height:auto; min-height:100%; background:#200401 url('/gift-photo-assets/red-romance-background.webp') center / 100% 100% no-repeat; padding-bottom:calc(18 * var(--gift-art-unit)); }
body.gift-photo-presentation[data-photo-style=heart] .gift-recipient-slideshow { flex:0 0 calc(140 * var(--gift-art-unit)); height:calc(140 * var(--gift-art-unit)); }
body.gift-photo-presentation[data-photo-style=heart] .gift-photo-scene { background:transparent; mask-image:none; -webkit-mask-image:none; }
body.gift-photo-presentation .gift-player-card { min-height:0; margin-top:-8px; padding:calc(4 * var(--gift-art-unit)); gap:calc(1.5 * var(--gift-art-unit)); border-radius:calc(6 * var(--gift-art-unit)); }
body.gift-photo-presentation[data-photo-style=heart] .gift-player-card { border:1px solid #ff706fa6; border-radius:calc(6 * var(--gift-art-unit)); background:radial-gradient(ellipse at 90% 0,#c32d2555,transparent 50%),linear-gradient(125deg,#330803b3,#260100b3); box-shadow:inset 0 0 18px #ff301825,0 8px 30px #17000055; backdrop-filter:blur(9px); }
body.gift-photo-presentation .gift-player-top { grid-template-columns:30% minmax(0,1fr); gap:8%; align-items:center; }
body.gift-photo-presentation .gift-track-copy h2 { font-size:calc(5 * var(--gift-art-unit)); }
body.gift-photo-presentation .gift-track-copy p { font-size:calc(3.4 * var(--gift-art-unit)); }
body.gift-photo-presentation .gift-waveform { margin-top:calc(3 * var(--gift-art-unit)); }
body.gift-photo-presentation[data-photo-style=heart] .gift-emerald-waveform-image { filter:hue-rotate(205deg) saturate(1.6); }
body.gift-photo-presentation[data-photo-style=heart] .gift-cover-image { border-color:#fff0e3; }
body.gift-photo-presentation[data-photo-style=heart] .gift-emerald-cover-frame { border-color:transparent; box-shadow:none; }
body.gift-photo-presentation .gift-player-bar { height:calc(5 * var(--gift-art-unit)); margin-top:calc(1 * var(--gift-art-unit)); }
body.gift-photo-presentation[data-photo-style=heart] .gift-player-bar::before { background:#803133; }
body.gift-photo-presentation[data-photo-style=heart] .gift-player-progress { background:linear-gradient(90deg,#ef252e,#ff555b); box-shadow:0 0 8px #ff3c4055; }
body.gift-photo-presentation[data-photo-style=heart] .gift-player-progress::after { background:#ff4c55; border-color:#ff6067; box-shadow:0 0 10px #ff343766; }
body.gift-photo-presentation .gift-player-controls { margin-top:calc(2 * var(--gift-art-unit)); }
body.gift-photo-presentation[data-photo-style=heart] .gift-player-disc circle { fill:#df202a; stroke:#ff7375; }
body.gift-photo-presentation[data-photo-style=heart] .gift-player-disc { filter:drop-shadow(0 0 8px #ff2d2344); }


body.gift-photo-presentation .gift-player-controls { --gift-control-play-size:54px; --gift-control-icon-size:24px; grid-template-columns:repeat(2,minmax(0,1fr)) 54px repeat(4,minmax(0,1fr)); margin-top:4px; }
body.gift-photo-presentation[data-photo-style=heart] .gift-player-controls > .gift-play-button { filter:drop-shadow(0 0 8px #ff343344); }
body.gift-photo-presentation .gift-waveform { margin-top:8px; }
body.gift-photo-presentation[data-photo-style=heart] .gift-emerald-waveform-image { opacity:0; }
body.gift-photo-presentation[data-photo-style=heart] .gift-waveform::after { content:''; position:absolute; inset:0; background:#ff424e; mask:url('/assets/gift-designs/scrisoare-smarald/player/waveform.png') center / 100% 100% no-repeat; -webkit-mask:url('/assets/gift-designs/scrisoare-smarald/player/waveform.png') center / 100% 100% no-repeat; }
body.gift-photo-presentation[data-photo-style=heart] .gift-waveform.is-playing::after { animation:gift-emerald-waveform-pulse 1100ms ease-in-out infinite; }

@media(prefers-reduced-motion:reduce) { .gift-slideshow *,.gift-slideshow *::before,.gift-slideshow *::after { animation:none!important; transition:none!important; } }

@media(prefers-reduced-motion:reduce) { body[data-photo-style=heart] .gift-waveform::after { animation:none!important; } }

/* Fit the heart and its player to the phone's live viewport height. */
@media (max-width:860px) {
  body.gift-photo-presentation[data-photo-style=heart] .gift-scene-viewport { overflow:hidden; }
  body.gift-photo-presentation[data-photo-style=heart] .gift-scene-artwork {
    height:100%; min-height:0;
    padding-top:env(safe-area-inset-top);
    padding-bottom:max(8px,env(safe-area-inset-bottom));
  }
  body.gift-photo-presentation[data-photo-style=heart] .gift-recipient-slideshow {
    flex:1 1 0; height:auto; min-height:0;
  }
  body.gift-photo-presentation[data-photo-style=heart] .gift-slide-stage {
    width:min(108cqw,78cqh); height:min(108cqw,78cqh);
  }
  body.gift-photo-presentation[data-photo-style=heart] .gift-photo-heading { top:4%; font-size:min(17cqw,10cqh); }
  body.gift-photo-presentation[data-photo-style=heart] .gift-photo-heading>b { font-size:min(13cqw,9cqh); }
  body.gift-photo-presentation[data-photo-style=heart] .gift-photo-inscription { font-size:min(3.1cqw,2.4cqh); }
  body.gift-photo-presentation[data-photo-style=heart] .gift-photo-inscription>span { font-size:min(8cqw,6cqh); }
}

/* A long recipient name must not wrap over the dedication underneath. */
.gift-slideshow[data-style=heart] .gift-photo-heading { white-space:nowrap; }
.gift-slideshow[data-style=heart] .gift-heart-title { display:inline-block; font:inherit; letter-spacing:inherit; white-space:nowrap; line-height:1.1; }

/* Center the album composition with the same breathing room above and below. */
body.gift-photo-presentation[data-photo-style=album] .gift-scene-artwork {
  --gift-album-inset:max(clamp(16px,5svh,40px),env(safe-area-inset-top),env(safe-area-inset-bottom));
  padding-top:var(--gift-album-inset);
  padding-bottom:var(--gift-album-inset);
}
body.gift-photo-presentation[data-photo-style=album] .gift-photo-heading { top:0; }
body.gift-photo-presentation[data-photo-style=album] .gift-slide-stage { top:16%; }
@media(max-width:860px) {
  body.gift-photo-presentation[data-photo-style=album] .gift-recipient-slideshow { flex:1 1 0; min-height:0; }
}

body.gift-photo-presentation[data-photo-style=album] .gift-scene-artwork { background:radial-gradient(ellipse at 18% 38%,#77310355,transparent 32%),radial-gradient(ellipse at 82% 85%,#923e0044,transparent 40%),linear-gradient(135deg,#140f0b,#1f1711 55%,#0d0a07); }
body.gift-photo-presentation[data-photo-style=album] .gift-photo-scene { background:transparent; }
body.gift-photo-presentation[data-photo-style=album] .gift-photo-scene::before { display:none; }

/* One continuous phone background, including the empty space above the album. */
@media(max-width:860px) {
  body.gift-photo-presentation[data-photo-style=album] .gift-scene-viewport {
    background:linear-gradient(to bottom,#140f0b,transparent 140px),radial-gradient(ellipse at 18% 38%,#77310355,transparent 32%),radial-gradient(ellipse at 82% 85%,#923e0044,transparent 40%),linear-gradient(135deg,#140f0b,#1f1711 55%,#0d0a07);
  }
  body.gift-photo-presentation[data-photo-style=album] .gift-scene-artwork { background:transparent; }
}
/* Watermarks stay attached to each sample photo, including film and album turns. */
.gift-photo-frame .gift-example-watermark { position:absolute; z-index:4; left:6%; right:6%; top:48%; transform:translateY(-50%) rotate(-16deg); text-align:center; color:#fff; text-shadow:0 2px 7px #000b; font:700 clamp(13px,4cqw,30px)/1.3 Inter,Arial,sans-serif; letter-spacing:.14em; opacity:.88; pointer-events:none; }
/* Desktop photo scenes share the page atmosphere instead of a portrait rectangle. */
@media (min-width:861px) {
  body.gift-page.gift-photo-presentation.gift-is-opened {
    background:radial-gradient(ellipse at 18% 38%,#77310333,transparent 38%),radial-gradient(ellipse at 82% 85%,#923e0033,transparent 44%),linear-gradient(135deg,#140f0b,#1f1711 55%,#0d0a07);
    background-attachment:fixed;
  }
  body.gift-page.gift-photo-presentation.gift-is-opened .gift-scene-viewport { overflow:visible; }
  body.gift-page.gift-photo-presentation.gift-is-opened .gift-scene-artwork { background:transparent; isolation:isolate; }
  body.gift-page.gift-photo-presentation.gift-is-opened .gift-recipient-slideshow .gift-photo-scene {
    background:transparent;
    mask-image:linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 24px),transparent),linear-gradient(to bottom,transparent,#000 16px,#000 calc(100% - 42px),transparent);
    mask-composite:intersect;
    -webkit-mask-image:linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 24px),transparent),linear-gradient(to bottom,transparent,#000 16px,#000 calc(100% - 42px),transparent);
    -webkit-mask-composite:source-in;
  }
  body.gift-page.gift-photo-presentation.gift-is-opened .gift-photo-scene::before { background:none; }
  body.gift-page.gift-photo-presentation[data-photo-style=heart].gift-is-opened {
    background:radial-gradient(ellipse at 18% 38%,#731c2433,transparent 38%),radial-gradient(ellipse at 82% 85%,#9c203233,transparent 44%),linear-gradient(135deg,#180305,#240609 55%,#100203);
    background-attachment:fixed;
  }
  body.gift-page.gift-photo-presentation[data-photo-style=heart].gift-is-opened::before {
    background:radial-gradient(circle at 19% 20%,#ed858a52 0 1px,transparent 2px),radial-gradient(circle at 78% 13%,#f0808838 0 1px,transparent 2px),radial-gradient(circle at 88% 38%,#ed788542 0 1px,transparent 2px),radial-gradient(circle at 22% 61%,#f0808838 0 1px,transparent 2px),linear-gradient(180deg,#f26a790d,transparent 42%);
  }
  body.gift-page.gift-photo-presentation[data-photo-style=heart].gift-is-opened::after {
    background:radial-gradient(ellipse at 50% 84%,#f5537057,transparent 28%),linear-gradient(180deg,transparent,#160306d1);
  }
  body.gift-page.gift-photo-presentation[data-photo-style=heart].gift-is-opened .gift-scene-artwork::before {
    content:''; position:absolute; z-index:-1; inset:-40px -100px -50px; pointer-events:none;
    background:url('/gift-photo-assets/red-romance-background.webp') center / cover no-repeat;
    mask-image:radial-gradient(ellipse closest-side,#000 45%,#000b 65%,transparent 100%);
    -webkit-mask-image:radial-gradient(ellipse closest-side,#000 45%,#000b 65%,transparent 100%);
  }
}

/* Fit the complete desktop composition, including its player, to the window.
   The layout script scales natural dimensions rather than cropping controls. */
@media (min-width:861px) {
  html:has(body.gift-page.gift-photo-presentation.gift-is-opened),
  body.gift-page.gift-photo-presentation.gift-is-opened {
    height:100dvh; min-height:0; overflow:hidden;
  }
  body.gift-page.gift-photo-presentation.gift-is-opened .gift-stage {
    display:block; box-sizing:border-box; height:100dvh; min-height:0; padding:12px;
    overflow:clip;
  }
  body.gift-page.gift-photo-presentation.gift-is-opened #gift-content {
    display:block; width:100%; height:100%; min-height:0; padding:0;
  }
  body.gift-page.gift-photo-presentation.gift-is-opened .gift-scene-viewport {
    display:block; position:relative; width:100%; height:100%; min-height:0;
  }
  body.gift-page.gift-photo-presentation.gift-is-opened .gift-scene-artwork {
    position:absolute; left:50%; top:50%; width:384px; height:auto; min-height:0;
    transform:translate(-50%,-50%) scale(var(--gift-desktop-scale,1));
    transform-origin:center; visibility:hidden;
  }
  body.gift-page.gift-photo-presentation.gift-is-opened .gift-scene-artwork[data-desktop-fit-ready] {
    visibility:visible;
  }
}