/* Sage & Teddy baby shower: the softer finish (30/9). Loaded after scroll.css and controls.css for this design only
   (theme.json "polish"). Taken from Codex's separate sage preview where it looked better: ivory paper panels between
   the sage ones, a thin frame round the top, an arched card for the details, a heart on the rule, rounder quieter
   buttons and fields, and a gentle rise-in as you scroll instead of the side fly-ins.
   Colours: the design's own palette (theme.json) so the Android pictures (ss-*.jpg) still match. Any new fill is a
   PICTURE (panel-ivory.jpg, panel-card.jpg, placed by polish.js), because Samsung's dark mode repaints drawn colours but keeps pictures. */

/* ---- ivory paper panels, every other section (polish.js marks them in the order the host has set) ---- */
.sc-flow > .sc-section.bs-ivory { background: #f8f6ec; isolation: isolate; }
/* the paper itself is a picture inside the panel (polish.js), so Android redraws it as a canvas like the rest */
.bs-paper { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: -1; border-radius: inherit; pointer-events: none; }
.sc-section.reveal > .bs-paper, .sc-section.reveal.seen > .bs-paper, .bs-card > .bs-paper { opacity: 1 !important; transform: none !important; transition: none !important; }
.sc-flow > .sc-section { padding-top: 70px; padding-bottom: 70px; }
.sc-flow > .sc-section.sc-countdown-wrap { padding-top: 30px; padding-bottom: 18px; }
/* the garland sits on the seam between two panels */
.sc-flow > .sc-section > .dc-divider { margin-top: -34px; }

/* wider screens: the column is a sheet of stationery on the sage page */
@media (min-width: 720px) {
  .sc-flow > .sc-section.bs-ivory { max-width: 680px; padding-left: 52px; padding-right: 52px; border-radius: 20px; margin: 18px auto; box-shadow: 0 18px 50px rgba(82, 105, 74, .12); }
}

/* ---- headings: centred, a touch lighter and larger, like the invitation card ---- */
.sc-flow > .sc-section .sc-h2 { text-align: center; font-weight: 500; font-size: 40px; line-height: 1.15; letter-spacing: .2px; }
.sc-flow > .sc-section .sc-rule-sm { margin-left: auto; margin-right: auto; }
.sc-flow .sc-lead { color: var(--theme-text-muted); }
.sc-flow .sc-centered .sc-lead, .sc-flow #gifts .sc-lead { max-width: 30em; margin-left: auto; margin-right: auto; }

/* ---- the top: a thin frame inside the edge, and a heart on the rule ---- */
.sc-hero-texture::after {
  content: ""; position: absolute; inset: 14px; border: 1px solid rgba(98, 122, 88, .38); border-radius: 2px; pointer-events: none;
}
.sc-hero .sc-rule {
  width: 170px; height: 16px; margin: 20px auto 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 16'%3E%3Cpath d='M0 8h66M104 8h66' stroke='%238ea283' stroke-width='1'/%3E%3Cpath d='M85 13.2c-.3 0-5.6-3.4-5.6-6.8 0-1.8 1.4-3 2.9-3 1.2 0 2.2.7 2.7 1.7.5-1 1.5-1.7 2.7-1.7 1.5 0 2.9 1.2 2.9 3 0 3.4-5.3 6.8-5.6 6.8z' fill='%2352694a'/%3E%3C/svg%3E") center / 170px 16px no-repeat;
  -webkit-mask-image: none; mask-image: none;
}
.sc-hero-date { letter-spacing: .3px; }

/* the teddy can be given a lift (polish.js): the balloon rises and settles */
.sc-hero-media.bs-can-lift { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sc-hero-media video, .sc-hero-media img { transition: none; }
.sc-hero-media.bs-lift video, .sc-hero-media.bs-lift img { animation: bs-lift 1.7s cubic-bezier(.35, 0, .25, 1); }
@keyframes bs-lift { 0% { translate: 0 0; rotate: 0deg; } 45% { translate: 0 -34px; rotate: -2.5deg; } 75% { translate: 0 4px; rotate: 1deg; } 100% { translate: 0 0; rotate: 0deg; } }
/* the roses drift a little slower than the page (polish.js sets --bs-par) */
.sc-hero .dc-corner { translate: 0 var(--bs-par, 0px); }

/* ---- buttons: rounder and softer; "The details" in the design's sage, not near-black ---- */
html body.ctl-boldest .sc-btn { padding: 16px 30px; letter-spacing: 2.4px; font-weight: 600; }
html body.ctl-boldest .sc-btn-ghost {
  background: var(--theme-accent); border-color: var(--theme-accent); color: #fbfaf2;
  box-shadow: 0 10px 22px rgba(82, 105, 74, .22);
}
html body.ctl-boldest .sc-btn-solid { font-weight: 700; box-shadow: 0 10px 24px rgba(185, 154, 91, .30); }
html body.ctl-boldest .sc-btn { transition: transform .25s ease, box-shadow .25s ease; }
@media (hover: hover) {
  html body.ctl-boldest .sc-btn:hover { transform: translateY(-2px); }
}
/* the Reply button breathes rather than pulses */
html body.ctl-boldest .sc-hero .sc-btn-solid { animation: bs-breathe 3.2s ease-in-out infinite; }
@keyframes bs-breathe { 0%, 100% { scale: 1; box-shadow: 0 10px 24px rgba(185, 154, 91, .28); } 50% { scale: 1.035; box-shadow: 0 14px 30px rgba(185, 154, 91, .42); } }
html body.ctl-boldest .np[data-playing="0"] { animation: bs-breathe-np 3.2s ease-in-out infinite; }
@keyframes bs-breathe-np { 0%, 100% { scale: 1; } 50% { scale: 1.025; } }

/* ---- the details: an arched ivory card, everything centred ---- */
#details .bs-card {
  position: relative; margin: 8px auto 0; max-width: 460px; padding: 46px 24px 30px; text-align: center;
  border: 1px solid rgba(142, 162, 131, .55); border-radius: 230px 230px 14px 14px;
  background: #fdfbf3; isolation: isolate;
  box-shadow: 0 14px 34px rgba(82, 105, 74, .10);
}
#details .bs-card .sc-detail { display: block; border: 0; padding: 0; background: none; }
#details .bs-card .sc-detail + .sc-detail::before {
  content: ""; display: block; width: 44px; height: 1px; margin: 20px auto; background: rgba(142, 162, 131, .7);
}
#details .bs-card .sc-label { display: block; padding: 0; margin-bottom: 8px; letter-spacing: 3.5px; }
#details .bs-card .sc-value { display: block; font-size: 22px; }

/* ---- running order and travel rows: quieter lines ---- */
.sc-flow .sc-detail, .sc-flow .sc-timeline li { border-bottom-color: rgba(142, 162, 131, .45); }

/* ---- the reply form: ivory fields on a soft sage edge ---- */
.sc-form input[type="text"], .sc-form select, .sc-form textarea {
  background: #fffdf7; border-color: rgba(142, 162, 131, .8); border-radius: 12px;
}
.sc-form input:focus, .sc-form select:focus, .sc-form textarea:focus { border-color: var(--theme-accent); box-shadow: 0 0 0 3px rgba(82, 105, 74, .14); }
.sc-choice span { border-radius: 12px; background: #fffdf7; border-color: rgba(142, 162, 131, .8); transition: background-color .25s, border-color .25s, transform .2s; }
.sc-choice input:checked + span { transform: translateY(-1px); }
.sc-choice input:focus-visible + span { outline: 3px solid rgba(82, 105, 74, .45); outline-offset: 3px; }
.sc-form .sc-btn-block { margin-top: 30px; }
.sc-thanks { padding: 26px 20px; border-radius: 16px; border: 1px solid rgba(142, 162, 131, .55); }

/* ---- gentle rise-in as you scroll: each line floats up and settles, once (polish.js adds .bs-kept) ---- */
.sc-section.reveal > *, .sc-footer.reveal > *,
.sc-section.reveal > *:nth-child(even), .sc-footer.reveal > *:nth-child(even),
.sc-section.reveal :is(.sc-timeline li, .countdown-item, .sc-gallery figure),
.sc-section.reveal :is(.sc-timeline li, .countdown-item, .sc-gallery figure):nth-child(even) {
  transform: translateY(26px);
}
html body.ctl-boldest :is(.sc-section, .sc-footer).reveal:is(.seen, .bs-kept) > *,
html body.ctl-boldest .sc-section.reveal:is(.seen, .bs-kept) :is(.sc-timeline li, .countdown-item, .sc-gallery figure) {
  opacity: 1; transform: none;
  transition-property: opacity, transform; transition-duration: 1s, 1.15s;
  transition-timing-function: ease-out, cubic-bezier(.2, .7, .2, 1);
}
.sc-section.reveal.bs-kept .sc-swatches span, .sc-section.reveal.bs-kept > .dc-divider { opacity: 1; transform: none; }
/* the garland opens out gently; the balloons float UP into place (not in from the side) */
.sc-section.reveal > .dc-divider, .sc-section.reveal > .dc-divider:nth-child(even) { transform: scaleX(.6); }
.sc-section.reveal > :is(.dc-fly-r, .dc-fly-l), .sc-section.reveal > :is(.dc-fly-r, .dc-fly-l):nth-child(even) { opacity: 0; transform: translate(0, 170px) rotate(-4deg); }
html body.ctl-boldest .sc-section.reveal:is(.seen, .bs-kept) > .dc-fly, html body.ctl-boldest .sc-section.reveal:is(.seen, .bs-kept) > .dc-fly:nth-child(even) {
  opacity: 1; transform: none;
  transition: opacity .9s ease-out .2s, transform 2.6s cubic-bezier(.2, .75, .25, 1) .2s;
  animation: bs-float 6s ease-in-out 2.8s infinite alternate;
}
/* a balloon does not flap like a butterfly */
.dc-fly img, [data-ss] .dc-fly canvas { animation: none; }
@keyframes bs-float { from { translate: 0 0; rotate: -2deg; } to { translate: 6px -14px; rotate: 3deg; } }

/* ---- the closing card: a few little balloons drifting up behind the date (polish.js) ---- */
.bs-drift { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.bs-drift > * { position: absolute; bottom: -60px; left: var(--x); width: var(--w); height: auto; opacity: 0; animation: bs-drift var(--d) linear var(--wait) infinite; }
@keyframes bs-drift { 0% { transform: translate(0, 0) rotate(-4deg); opacity: 0; } 12% { opacity: .55; } 50% { transform: translate(14px, -45vh) rotate(4deg); } 85% { opacity: .45; } 100% { transform: translate(-8px, -95vh) rotate(-3deg); opacity: 0; } }
.sc-finale > :not(.sc-finale-bg):not(.bs-drift) { position: relative; z-index: 2; }

/* ---- from the printable (Codex, live 30/9): the closing card framed like the card itself, flowers in the
        bottom corners, so the page ends the way the printed invitation looks ---- */
.bs-frame { position: absolute !important; inset: 14px; border: 1px solid rgba(98, 122, 88, .38); border-radius: 2px; pointer-events: none; z-index: 1; }
.sc-finale > .bs-corner { position: absolute !important; bottom: -8px; width: min(40vw, 230px); height: auto; z-index: 2; pointer-events: none; opacity: 1 !important; }
/* position !important: scroll.css makes every closing-card child relative */
.sc-finale > .bs-corner-l { left: -12px; transform: scaleY(-1) !important; }
.sc-finale > .bs-corner-r { right: -12px; transform: scale(-1, -1) !important; }
.sc-footer.reveal > :is(.bs-frame, .bs-corner) { opacity: 1 !important; transition: none !important; }
.sc-footer.reveal > .bs-frame { transform: none !important; }
.sc-finale { padding-bottom: 150px; }

/* ---- the time and place under the date, in the card's serif, as on the printable ---- */
.sc-hero .sc-hero-time { font-family: var(--font-display); font-size: 18px; letter-spacing: .3px; margin-top: 4px; line-height: 1.45; }

/* ---- the host's editor (?edit=1): the look, none of the movement ---- */
.edit-mode .bs-drift { display: none; }
.edit-mode .sc-hero-media.bs-can-lift { cursor: inherit; }

/* ---- reduced motion: everything in place, nothing drifting ---- */
@media (prefers-reduced-motion: reduce) {
  .sc-section.reveal > *, .sc-footer.reveal > *, .sc-section.reveal > .dc-fly,
  .sc-section.reveal :is(.sc-timeline li, .countdown-item, .sc-gallery figure, .sc-swatches span) { opacity: 1 !important; transform: none !important; transition: none !important; }
  .sc-section.reveal > .dc-fly, .sc-hero-media.bs-lift :is(video, img),
  html body.ctl-boldest :is(.sc-hero .sc-btn-solid, .np[data-playing="0"]) { animation: none !important; }
  .sc-hero .dc-corner { translate: none; }
  .bs-drift { display: none; }
  html body.ctl-boldest .sc-btn:hover { transform: none; }
}

/* =====================================================================================
   ANDROID (html[data-ss]): Samsung's dark mode repaints drawn colours, so the new lines and fills are pictures
   or are left out. The paper panels and the card are pictures, which ss-canvas.js redraws as canvases.
   ===================================================================================== */
/* the frame round the top: the line picture shaped into a 1px ring */
[data-ss] .sc-hero-texture::after {
  border: 0; inset: 14px; padding: 1px; background: var(--ss-line) center / cover;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
/* "The details": the sage (accent) picture as the fill, white writing, as before */
html[data-ss][data-tone="light"] body.ctl-boldest .sc-btn-ghost { background-image: var(--ss-ink-accent); }
[data-ss] .bs-frame {
  border: 0; padding: 1px; background: var(--ss-line) center / cover;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
/* drawn shadows go dark in dark mode: none on Android */
html[data-ss] body.ctl-boldest :is(.sc-btn-ghost, .sc-btn-solid) { box-shadow: none; }
html[data-ss] body.ctl-boldest .sc-hero .sc-btn-solid { animation-name: bs-breathe-np; }
[data-ss] #details .bs-card, [data-ss] .sc-thanks { border-color: transparent; box-shadow: none; }
[data-ss] #details .bs-card .sc-detail + .sc-detail::before { background: var(--ss-line) center / cover; }
/* fields and choices keep Android's own picture outlines (scroll.css); only the fill is dropped, as before */
[data-ss] .sc-form input[type="text"], [data-ss] .sc-form select, [data-ss] .sc-form textarea { background: transparent; box-shadow: none; }
[data-ss] .sc-choice span { background: transparent; }
[data-ss] .sc-flow .sc-detail, [data-ss] .sc-flow .sc-timeline li { border-bottom-color: transparent; }