/* LAUNCH_FIX9: in-app surprise unwrapping and gift viewers. */

#blueink-r11 .surprise-viewer {
  position:fixed;
  inset:0;
  z-index:170;
  overflow:hidden;
  background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

#blueink-r11 .surprise-viewer-chrome {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow:auto;
  padding:calc(var(--top-safe) + 58px) 18px calc(var(--bottom-safe) + 28px);
  -webkit-overflow-scrolling:touch;
}

#blueink-r11 .surprise-viewer-close {
  position:fixed;
  top:calc(var(--top-safe) + 10px);
  right:16px;
  z-index:4;
  width:42px;
  height:42px;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--glass-ui);
  color:var(--ink);
  font-size:25px;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

#blueink-r11 .surprise-unwrapping {
  position:fixed;
  inset:0;
  z-index:3;
  display:grid;
  place-items:center;
  pointer-events:none;
  background:var(--paper);
  transition:opacity .42s ease .55s,visibility 0s linear .98s;
}

#blueink-r11 .surprise-open-box { width:min(62vw,250px);filter:drop-shadow(0 20px 24px rgba(55,70,104,.17)); }
#blueink-r11 .surprise-opening-seal { position:absolute;width:82px;transform:translateY(38px); }
#blueink-r11 .surprise-viewer.is-opening .surprise-open-box { animation:surprise-box-open .76s cubic-bezier(.2,.75,.2,1) both; }
#blueink-r11 .surprise-viewer.is-opening .surprise-opening-seal { animation:surprise-seal-break .55s ease .22s both; }
#blueink-r11 .surprise-viewer.is-open .surprise-unwrapping { opacity:0;visibility:hidden; }

#blueink-r11 .surprise-viewer-heading { text-align:center;opacity:0;transform:translateY(14px);transition:opacity .35s ease .66s,transform .35s ease .66s; }
#blueink-r11 .surprise-viewer.is-open .surprise-viewer-heading { opacity:1;transform:none; }
#blueink-r11 .surprise-viewer-heading span { color:var(--ribbon-deep);font:12px/1.2 var(--font-ui);letter-spacing:.18em; }
#blueink-r11 .surprise-viewer-heading h1 { margin:6px 0 0;font:500 22px/1.4 var(--font-title); }

#blueink-r11 .surprise-outer-note,
#blueink-r11 .surprise-postscript {
  width:min(100%,680px);
  margin:0 auto;
  padding:12px 16px;
  border-left:2px solid color-mix(in srgb,var(--ribbon-deep) 48%,transparent);
  color:var(--secondary);
  background:color-mix(in srgb,var(--glass-ui) 74%,transparent);
}
#blueink-r11 .surprise-outer-note span,
#blueink-r11 .surprise-postscript span { color:var(--ribbon-deep);font:11px/1.3 var(--font-ui);letter-spacing:.12em; }
#blueink-r11 .surprise-outer-note p,
#blueink-r11 .surprise-postscript p { margin:5px 0 0;white-space:pre-wrap;font:13px/1.75 var(--font-body); }

#blueink-r11 .surprise-viewer-body { width:min(100%,760px);margin:0 auto;opacity:0;transform:translateY(18px);transition:opacity .4s ease .72s,transform .4s ease .72s; }
#blueink-r11 .surprise-viewer.is-open .surprise-viewer-body { opacity:1;transform:none; }

#blueink-r11 .surprise-letter-sheet {
  position:relative;
  min-height:300px;
  margin:4px auto 0;
  padding:50px 28px 44px;
  overflow:hidden;
  background:color-mix(in srgb,#fffdf7 94%,var(--milk));
  box-shadow:0 20px 44px rgba(47,60,93,.14);
}
#blueink-r11 .surprise-letter-sheet .paper-washi { position:absolute;top:10px;left:-8px;width:122px;transform:rotate(-2deg);opacity:.82; }
#blueink-r11 .surprise-letter-sheet .envelope-stamp { position:absolute;top:18px;right:20px;width:48px;opacity:.82; }
#blueink-r11 .surprise-paper-seal { position:absolute;right:20px;bottom:14px;width:60px;opacity:.72;transform:rotate(8deg); }
#blueink-r11 .surprise-letter-sheet h2 { position:relative;margin:18px 54px 26px 0;font:500 21px/1.5 var(--font-title); }
#blueink-r11 .surprise-paper-body { position:relative;color:var(--ink);font:15px/1.95 var(--font-body);overflow-wrap:anywhere; }
#blueink-r11 .surprise-paper-body p { margin:0 0 1.05em; }
#blueink-r11 .surprise-paper-body :is(h1,h2,h3,h4,h5,h6) { margin:1.2em 0 .55em;line-height:1.45; }
#blueink-r11 .surprise-paper-body blockquote { margin:1em 0;padding:8px 14px;border-left:2px solid var(--ribbon-deep);color:var(--secondary); }
#blueink-r11 .surprise-paper-body pre { max-width:100%;overflow:auto;padding:12px;border-radius:10px;background:rgba(79,98,138,.08);font:12px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace; }
#blueink-r11 .surprise-paper-body code { padding:.12em .3em;border-radius:4px;background:rgba(79,98,138,.08);font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
#blueink-r11 .surprise-paper-body a { color:var(--blue);text-decoration:underline;text-underline-offset:3px; }

#blueink-r11 .surprise-file-loading { display:grid;min-height:280px;place-items:center;align-content:center;gap:10px;color:var(--secondary); }
#blueink-r11 .surprise-file-loading span { color:var(--blue);font-size:28px;animation:launch-fix8-pulse 1.5s ease-in-out infinite; }
#blueink-r11 .surprise-save,
#blueink-r11 .surprise-song-card button { min-height:44px;padding:10px 18px;border:1px solid var(--line);border-radius:999px;background:var(--glass-ui);color:var(--blue); }

#blueink-r11 .surprise-file-image { margin:0;display:grid;gap:10px;justify-items:center; }
#blueink-r11 .surprise-file-image img { display:block;max-width:100%;max-height:68dvh;border-radius:18px;object-fit:contain;box-shadow:var(--shadow); }
#blueink-r11 .surprise-file-image figcaption { color:var(--secondary);font:12px/1.5 var(--font-ui); }

#blueink-r11 .surprise-frame-card { display:flex;flex-direction:column;gap:8px;height:calc(100dvh - var(--top-safe) - var(--bottom-safe) - 126px);min-height:420px; }
#blueink-r11 .surprise-frame-title { margin:0;color:var(--secondary);font:12px/1.4 var(--font-ui);text-align:center; }
#blueink-r11 .surprise-frame-card iframe { flex:1;width:100%;min-height:0;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow); }

#blueink-r11 .surprise-song-card,
#blueink-r11 .surprise-link-card { display:grid;justify-items:center;gap:10px;padding:32px 24px;border:1px solid var(--line);border-radius:24px;background:var(--glass-strong);box-shadow:var(--shadow);text-align:center; }
#blueink-r11 .surprise-song-card p,
#blueink-r11 .surprise-song-card h2,
#blueink-r11 .surprise-link-card h2 { margin:0; }
#blueink-r11 .surprise-record { width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,#c9a7a2 0 8%,#34405c 9% 13%,#182033 14% 28%,#303a54 29% 31%,#151b2a 32% 47%,#303a54 48% 50%,#121827 51%);box-shadow:0 14px 25px rgba(34,42,65,.22); }
#blueink-r11 .surprise-link-card img { width:64px; }
#blueink-r11 .surprise-link-card a { min-height:44px;display:inline-flex;align-items:center;padding:8px 16px;border-radius:999px;background:var(--glass-ui);color:var(--blue); }

@keyframes surprise-box-open {
  0% { opacity:0;transform:translateY(34px) scale(.82) rotate(-3deg); }
  55% { opacity:1;transform:translateY(0) scale(1.04) rotate(1deg); }
  100% { opacity:1;transform:translateY(-10px) scale(1); }
}
@keyframes surprise-seal-break {
  0% { opacity:0;transform:translateY(38px) scale(.7) rotate(0); }
  45% { opacity:1;transform:translateY(38px) scale(1); }
  100% { opacity:0;transform:translate(26px,64px) scale(.84) rotate(22deg); }
}

@media (max-width:420px) {
  #blueink-r11 .surprise-viewer-chrome { padding-left:14px;padding-right:14px; }
  #blueink-r11 .surprise-letter-sheet { padding:46px 20px 42px; }
}

@media (prefers-reduced-motion:reduce) {
  #blueink-r11 .surprise-unwrapping { transition:none; }
  #blueink-r11 .surprise-viewer.is-opening :is(.surprise-open-box,.surprise-opening-seal) { animation:none; }
  #blueink-r11 .surprise-viewer-heading,
  #blueink-r11 .surprise-viewer-body { transition:none;transform:none;opacity:1; }
}