/* 2026-10-28: STUDIO WAIT — "your song is being made" screen shown while the preview is created.
   Square video (or an animated card with the customer's own words), countdown, stages with the name. */

/* While the studio runs, the preview card shows only the studio. */
.sa-personal-preview.sa-studio-mode > .sa-preview-kicker,
.sa-personal-preview.sa-studio-mode > h3,
.sa-personal-preview.sa-studio-mode > p:not(#saPreviewError),
.sa-personal-preview.sa-studio-mode #saPreviewCreate,
.sa-personal-preview.sa-studio-mode .sa-skip-preview { display:none !important; }

#saPreviewProgress.sa-studio-on { margin:4px 0 6px; padding:0; border:0; background:none; text-align:center; }
#saPreviewProgress.sa-studio-on > progress,
#saPreviewProgress.sa-studio-on > #saPreviewStatus { position:absolute; width:1px; height:1px; margin:0; overflow:hidden; clip-path:inset(50%); }
#saPreviewProgress.sa-studio-on > small { display:none; }

.sa-studio { scroll-margin-top:12px; }
.sa-studio-h { margin:4px 0 18px; font:600 24px/1.22 var(--serif,"Playfair Display",Georgia,serif); color:#26211d; letter-spacing:-.2px; }
.sa-studio-h span { display:block; }
.sa-studio-h .sa-studio-h2 { color:#c9705f; margin-top:2px; }

.sa-studio-media { position:relative; width:100%; aspect-ratio:1 / 1; border-radius:20px; overflow:hidden; background:#2b1f24;
  box-shadow:0 18px 40px rgba(60,30,25,.22), 0 2px 6px rgba(60,30,25,.12); isolation:isolate; }
.sa-studio-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .6s ease; z-index:1; }
.sa-studio-media.has-video .sa-studio-video { opacity:1; }
.sa-studio-media.has-video .sa-studio-art { opacity:0; }

/* Animated card (no video yet): soft gradient, equalizer, the customer's own words. */
.sa-studio-art { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:28px 22px;
  background:radial-gradient(120% 90% at 20% 10%, #f3b9a6 0%, rgba(243,185,166,0) 55%), radial-gradient(110% 90% at 90% 100%, #c9705f 0%, rgba(201,112,95,0) 60%), linear-gradient(160deg,#5a3540 0%,#3a2630 55%,#2b1f24 100%);
  color:#fff; transition:opacity .6s ease; }
.sa-studio-eq { display:flex; align-items:flex-end; gap:5px; height:64px; }
.sa-studio-eq i { display:block; width:6px; height:30%; border-radius:6px; background:linear-gradient(180deg,#ffe2c9,#f0a58f); opacity:.92; animation:sa-eq 1.1s ease-in-out infinite; }
.sa-studio-eq i:nth-child(3n) { animation-duration:.9s; } .sa-studio-eq i:nth-child(4n) { animation-duration:1.35s; }
.sa-studio-eq i:nth-child(5n+1) { animation-delay:-.4s; } .sa-studio-eq i:nth-child(2n) { animation-delay:-.7s; }
@keyframes sa-eq { 0%,100% { height:22%; } 50% { height:100%; } }
.sa-studio-for { margin:0; font:600 22px/1.25 var(--serif,"Playfair Display",Georgia,serif); color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.25); }
.sa-studio-words { margin:14px 0 0; padding:14px 18px 16px; border-radius:16px; background:linear-gradient(135deg,#fff6f1,#fbeee6); border:1px solid #f1dcd2; }
.sa-studio-words[hidden] { display:none; }
.sa-studio-words-k { display:block; margin-bottom:6px; font-size:11.5px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:#c9705f; }
.sa-studio-quote { margin:0 auto; max-width:94%; min-height:3em; display:flex; align-items:center; justify-content:center; font:italic 500 18px/1.45 var(--serif,"Playfair Display",Georgia,serif); color:#4a3530; opacity:0; }
.sa-studio-quote.is-in { animation:sa-quote 6s ease both; }
@keyframes sa-quote { 0% { opacity:0; transform:translateY(6px); } 12%,85% { opacity:1; transform:none; } 100% { opacity:0; } }

.sa-studio-clock { position:absolute; top:12px; left:14px; z-index:2; font:800 28px/1 ui-monospace,"SF Mono",Menlo,monospace; letter-spacing:1px; color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.55); font-variant-numeric:tabular-nums; }
.sa-personal-preview .sa-studio-media .sa-studio-sound { position:absolute !important; left:50% !important; top:15% !important; transform:translateX(-50%) !important; z-index:3;
  display:inline-flex !important; align-items:center; justify-content:center; gap:9px; width:auto !important; min-width:0 !important; max-width:80%; min-height:56px; margin:0 !important;
  padding:14px 30px !important; border:0 !important; border-radius:14px !important; background:rgba(214,120,96,.92) !important; color:#fff !important;
  font-family:inherit !important; font-weight:700 !important; font-size:19px !important; line-height:1.1 !important; letter-spacing:.2px; white-space:nowrap; box-shadow:0 10px 26px rgba(0,0,0,.28); cursor:pointer;
  -webkit-tap-highlight-color:transparent; animation:sa-pulse 2.4s ease-in-out infinite; }
.sa-personal-preview .sa-studio-media .sa-studio-sound[hidden] { display:none !important; }
@keyframes sa-pulse { 0%,100% { box-shadow:0 10px 26px rgba(0,0,0,.28), 0 0 0 0 rgba(214,120,96,.45); } 50% { box-shadow:0 10px 26px rgba(0,0,0,.28), 0 0 0 12px rgba(214,120,96,0); } }

.sa-studio-stage { margin:16px 0 0; padding:16px 18px 18px; border:1px solid #efe4dc; border-radius:16px; background:#fffdfb; text-align:left;
  box-shadow:0 4px 14px rgba(60,30,25,.05); }
.sa-studio-row { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px; }
.sa-studio-label { font-size:16px; font-weight:600; color:#3a2e28; letter-spacing:.2px; overflow-wrap:anywhere; }
.sa-studio-pct { flex:none; font-size:15px; font-weight:700; color:#c9705f; font-variant-numeric:tabular-nums; }
.sa-studio-meter { position:relative; height:10px; border-radius:99px; background:#ece3dc; overflow:hidden; box-shadow:inset 0 1px 2px rgba(60,30,25,.08); }
/* Gradient fill (rose -> gold -> green) with a soft moving shine. */
.sa-studio-meter i { position:relative; display:block; width:0; height:100%; border-radius:inherit; overflow:hidden;
  background:linear-gradient(90deg,#d9826c 0%,#e8a477 30%,#ecc27f 58%,#b9d68f 82%,#7fc89a 100%);
  box-shadow:0 0 10px rgba(233,164,119,.55); transition:width .25s linear; }
.sa-studio-meter i::after { content:""; position:absolute; inset:0; background:linear-gradient(100deg,rgba(255,255,255,0) 20%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 80%);
  transform:translateX(-100%); animation:sa-meter-shine 1.8s ease-in-out infinite; }
@keyframes sa-meter-shine { to { transform:translateX(100%); } }

.sa-studio-note { display:flex; align-items:center; justify-content:center; gap:10px; margin:14px 0 0; padding:16px 18px; border:1px solid #f3d6cd; border-radius:16px;
  background:#fdf1ed; color:#c9705f; font-size:16px; font-weight:600; line-height:1.45; }
.sa-studio-note > span:first-child { font-size:22px; flex:none; }
.sa-studio-leave { margin:12px 4px 0; font-size:13px; line-height:1.5; color:#8a7a72; }

@media (max-width:420px) {
  .sa-studio-h { font-size:21px; }
  .sa-studio-clock { font-size:25px; }
  .sa-studio-label { font-size:15px; }
  .sa-studio-note { font-size:15px; }
}
@media (prefers-reduced-motion:reduce) {
  .sa-studio-eq i, .sa-studio-sound, .sa-studio-quote.is-in, .sa-studio-meter i, .sa-studio-meter i::after { animation:none; }
  .sa-studio-quote { opacity:1; }
}

/* 2026-10-28: LYRICS under the preview player. */
.sa-lyrics { margin:16px 0 4px; padding:22px 20px 0; border:1px solid #efe1d8; border-radius:20px; background:#fffdfb; text-align:center; overflow:hidden;
  box-shadow:0 6px 18px rgba(60,30,25,.06); animation:sa-creation-reveal .55s ease-out both; }
.sa-lyrics[hidden] { display:none; }
.sa-lyrics-k { margin:0 0 4px; font-size:11.5px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase; color:#c9705f; }
.sa-lyrics-title { margin:0 0 14px; font:600 22px/1.25 var(--serif,"Playfair Display",Georgia,serif); color:#26211d; }
.sa-lyrics-title[hidden] { display:none; }
.sa-lyrics-open p, .sa-lyrics-blur p { margin:0 0 16px; white-space:pre-line; font:400 17px/1.75 var(--serif,"Playfair Display",Georgia,serif); color:#3a2e28; overflow-wrap:anywhere; }
.sa-lyrics-locked { position:relative; margin:0 -20px; padding:4px 20px 26px; }
.sa-lyrics-blur { filter:blur(6px); opacity:.55; user-select:none; pointer-events:none; max-height:250px; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 40%,transparent); mask-image:linear-gradient(180deg,#000 40%,transparent); }
.sa-lyrics-blur .sa-lyrics-bar { height:13px; margin:0 auto 14px; border-radius:7px; background:#c9b2a6; }
.sa-lyrics-blur .sa-lyrics-gap { height:10px; margin:0; }
.sa-lyrics-lock { position:absolute; left:16px; right:16px; top:50%; transform:translateY(-50%); padding:18px 16px; border-radius:18px;
  background:rgba(255,253,251,.88); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); box-shadow:0 10px 28px rgba(60,30,25,.12); border:1px solid #f1dcd2; }
.sa-lyrics-lock-h { margin:0 0 4px; font:600 20px/1.25 var(--serif,"Playfair Display",Georgia,serif); color:#26211d; }
.sa-lyrics-lock-h::before { content:"🔒 "; }
.sa-lyrics-lock-s { margin:0 0 14px; font-size:13.5px; line-height:1.5; color:#7a6a62; }
.sa-personal-preview .sa-lyrics .sa-lyrics-cta { display:inline-flex !important; align-items:center; justify-content:center; width:auto !important; min-width:0 !important; min-height:50px;
  margin:0 !important; padding:13px 26px !important; border:0 !important; border-radius:999px !important; background:linear-gradient(180deg,#2e8b57,#1f6e43) !important; color:#fff !important;
  font-family:inherit !important; font-weight:800 !important; font-size:16px !important; line-height:1.1 !important; box-shadow:0 10px 22px rgba(31,110,67,.28) !important; cursor:pointer; }
@media (max-width:420px) { .sa-lyrics-open p, .sa-lyrics-blur p { font-size:16px; } .sa-studio-quote { font-size:17px; } }

/* 2026-10-29: THE REVEAL. Studio finale (golden light) → "{Name}'s song is ready" → celebration. */
.sa-studio.sa-studio-finale .sa-studio-media::after { content:""; position:absolute; inset:-20%; z-index:4; pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(255,247,226,1) 0%, rgba(255,226,180,.92) 30%, rgba(250,200,170,.55) 55%, rgba(255,255,255,0) 75%);
  animation:sa-finale-light 1.5s cubic-bezier(.4,0,.2,1) forwards; }
.sa-studio.sa-studio-finale .sa-studio-label { color:#b8893a; font-weight:700; }
@keyframes sa-finale-light { 0% { opacity:0; transform:scale(.35); } 55% { opacity:1; } 100% { opacity:1; transform:scale(1.6); } }

.sa-ready-sub { display:none; }
.sa-personal-preview.sa-song-ready .sa-ready-sub { display:block; margin:4px 0 8px; font-size:16.5px; font-weight:600; line-height:1.45; color:#5b463e; }
.sa-personal-preview.sa-song-ready > .sa-preview-kicker { color:#b8893a; font-weight:700; letter-spacing:2px; }
.sa-personal-preview.sa-song-ready > h3 { font-size:31px; line-height:1.15; margin:6px 0 2px; }
.sa-personal-preview.sa-song-ready .sa-preview-player { position:relative; background:linear-gradient(135deg,#fff7f1 0%,#fbe8e1 100%); border-color:#efc2b5;
  box-shadow:0 0 0 4px rgba(220,115,112,.07), 0 14px 34px rgba(220,115,112,.16); }
.sa-personal-preview.sa-song-ready .sa-preview-track > span { font-size:15.5px; font-weight:700; color:#26211d; }
.sa-personal-preview.sa-song-ready .sa-preview-play { width:64px; height:64px; min-width:64px; }
.sa-personal-preview.sa-song-ready .sa-preview-invite .sa-preview-play { animation:sa-heartbeat 1.7s ease-in-out infinite; }
@keyframes sa-heartbeat {
  0% { transform:scale(1); box-shadow:0 0 0 0 rgba(220,115,112,.5); }
  12% { transform:scale(1.09); } 24% { transform:scale(1); } 36% { transform:scale(1.06); } 50% { transform:scale(1); }
  80%, 100% { box-shadow:0 0 0 20px rgba(220,115,112,0); }
}

/* Celebration (2.8 s, once). */
.sa-personal-preview.sa-reveal-now { position:relative; overflow:hidden; animation:sa-card-glow 2.6s ease-out both; }
@keyframes sa-card-glow { 0% { box-shadow:0 0 0 0 rgba(217,167,72,0); } 30% { box-shadow:0 0 0 3px rgba(217,167,72,.45), 0 0 46px rgba(240,190,110,.45); } 100% { box-shadow:0 0 0 0 rgba(217,167,72,0); } }
.sa-personal-preview.sa-reveal-now > h3 { background:linear-gradient(100deg,#26211d 0%,#26211d 40%,#c9933a 46%,#f6dc95 50%,#c9933a 54%,#26211d 60%,#26211d 100%);
  background-size:260% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:sa-title-shine 2.2s ease-out .15s both; }
@keyframes sa-title-shine { from { background-position:100% 0; } to { background-position:0 0; } }
.sa-personal-preview.sa-reveal-now > .sa-preview-kicker, .sa-personal-preview.sa-reveal-now .sa-ready-sub { animation:sa-rise .7s ease-out both; }
.sa-personal-preview.sa-reveal-now .sa-ready-sub { animation-delay:.35s; }
@keyframes sa-rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.sa-burst { position:absolute; left:50%; top:50%; z-index:5; width:0; height:0; pointer-events:none; }
.sa-burst i { position:absolute; left:0; top:0; font-style:normal; font-size:22px; font-weight:700; line-height:1; opacity:0; transform:translate(-50%,-50%) scale(.3);
  animation:sa-burst 2s cubic-bezier(.12,.75,.3,1) var(--d,0ms) forwards; text-shadow:0 1px 6px rgba(255,255,255,.8); }
@keyframes sa-burst {
  0% { opacity:0; transform:translate(-50%,-50%) scale(.3); }
  12% { opacity:1; }
  70% { opacity:.9; }
  100% { opacity:0; transform:translate(calc(-50% + var(--x)), calc(-50% + var(--y) + 30px)) rotate(var(--r)) scale(var(--s,1)); }
}
@media (max-width:420px) { .sa-personal-preview.sa-song-ready > h3 { font-size:28px; } }
@media (prefers-reduced-motion:reduce) {
  .sa-studio.sa-studio-finale .sa-studio-media::after { animation:none; opacity:.9; }
  .sa-personal-preview.sa-song-ready .sa-preview-invite .sa-preview-play, .sa-personal-preview.sa-reveal-now, .sa-personal-preview.sa-reveal-now > h3,
  .sa-personal-preview.sa-reveal-now > .sa-preview-kicker, .sa-personal-preview.sa-reveal-now .sa-ready-sub { animation:none; }
  .sa-personal-preview.sa-reveal-now > h3 { background:none; color:inherit; }
}

/* 2026-10-30: FULL-WIDTH STUDIO on phones. While the studio runs, the two cards around it lose their frame
   and the video goes edge to edge (square, straight edges). Cards come back when the preview player appears.
   Desktop unchanged. To undo: delete this block. */
@media (max-width:640px) {
  .sa-personal-preview.sa-studio-mode,
  #saOrderChoices:has(.sa-studio-mode) { padding-left:0 !important; padding-right:0 !important; border-color:transparent !important;
    background:transparent !important; box-shadow:none !important; }
  .sa-personal-preview.sa-studio-mode .sa-studio-media { width:100vw; margin-left:calc(50% - 50vw); border-radius:0; box-shadow:none; }
}

/* 2026-11-04: lyrics: [Verse] / [Chorus] shown as small labels; title in quotes; shorter blurred tail. */
.sa-lyrics-open p .sa-lyrics-tag, .sa-lyrics-blur p .sa-lyrics-tag { display:block; margin:0 0 4px; font:700 11px/1.4 "DM Sans",Arial,sans-serif; letter-spacing:2px; text-transform:uppercase; color:#b65d57; }

/* 2026-11-04 (v4.1): the real locked parts (Verse 2 with its first words, Bridge, Final chorus). Same height as the old bars. */
.sa-lyrics-parts:empty{display:none}
.sa-lyrics-locked.sa-lyrics-has-parts .sa-lyrics-blur{display:none}
.sa-lyrics-locked.sa-lyrics-has-parts .sa-lyrics-lock{position:static;transform:none;margin:8px 0 0}
.sa-lp{margin:0 0 10px}
.sa-lp-t{display:block;margin:0 0 2px;font:700 11px/1.4 "DM Sans",Arial,sans-serif;letter-spacing:2px;text-transform:uppercase;color:#b65d57}
.sa-lp-t::before{content:"🔒 "}
.sa-lp-l{margin:0;font:400 16px/1.6 var(--serif,"Playfair Display",Georgia,serif);color:#3a2e28;overflow-wrap:anywhere}
.sa-lp-bl{filter:blur(5px);opacity:.7;user-select:none;color:#6d5a51}