/* BOLDEST controls (Gary 23/9: the hero buttons, the music bar and the countdown were "too faint"; he picked the
   boldest of three looks and said "try it out" on the baby shower and the other new designs, NOT the birthday ones
   on Etsy). Switched on per design by theme.controls = "boldest" (or an invitation's settings.controls), which puts
   body.ctl-boldest on the page and loads this file (views/guest.ejs).
   - "The details": a solid button in the design's writing colour
   - "Reply": keeps the design's own metal (gold / rose gold), heavier and gently pulsing
   - the music strip: solid in the design's accent colour, pulsing until the music is playing
   - the countdown: four solid tiles with big numbers
   Android (html[data-ss]) gets the same look out of PICTURES, because Samsung's dark mode flips any colour the page
   draws (the ss-* pictures from scripts/make-samsung-safe.js): light designs fill with the ink pictures and write in
   white; dark designs fill with the button metal / cream frame pictures and write with the button's ink picture. */

html body.ctl-boldest .sc-btn { padding: 17px 32px; font-size: 14px; font-weight: 700; letter-spacing: 2.2px; }
html body.ctl-boldest .sc-btn:active { transform: scale(.96); }
html body.ctl-boldest .sc-btn-ghost {
  background: var(--theme-text-primary); color: var(--brand-navy-dark);
  border: 2px solid var(--theme-text-primary); box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}
html body.ctl-boldest .sc-btn-solid {
  font-weight: 800; border-width: 2px;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--brand-yellow) 45%, transparent);
}
html body.ctl-boldest .sc-hero .sc-btn-solid { animation: ctl-pulse 2.4s ease-in-out infinite; }
@keyframes ctl-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

html body.ctl-boldest .np {
  background: var(--brand-yellow); border: 0; color: var(--brand-navy-dark);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--brand-yellow) 38%, transparent);
}
html body.ctl-boldest .np[data-playing="0"] { animation: ctl-pulse 2.4s ease-in-out infinite; }
html body.ctl-boldest :is(.np-label, .np-title) { color: var(--brand-navy-dark); }
html body.ctl-boldest .np-label { font-weight: 800; font-size: 11px; }
html body.ctl-boldest .np-title { font-weight: 700; font-size: 20px; }
html body.ctl-boldest .np-wave i { background: var(--brand-navy-dark); opacity: 1; width: 4px; }

html body.ctl-boldest .countdown-bar { background: none; border: 0; gap: 10px; padding: 0; box-shadow: none; }
html body.ctl-boldest .countdown-item {
  background: var(--brand-yellow); border-radius: 14px; padding: 12px 0 10px;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--brand-yellow) 35%, transparent);
}
html body.ctl-boldest .countdown-val { font-size: 34px; font-weight: 700; color: var(--brand-navy-dark); }
html body.ctl-boldest .countdown-lbl { font-weight: 700; color: var(--brand-navy-dark); letter-spacing: 2px; opacity: .88; }

@media (prefers-reduced-motion: reduce) {
  html body.ctl-boldest :is(.sc-hero .sc-btn-solid, .np[data-playing="0"]) { animation: none; }
}

/* ---- the fly-ins as you scroll (Gary 24/9: "it kind of moves when you scroll down, and it kind of jumps a wee bit").
   The jump: when a section left the screen, guest.js took .seen off and its lines SNAPPED back to hidden (the hidden
   state had no transition), while part of the section was still on screen. Now they glide out quickly, and glide in
   a little longer and softer. Only durations and easing are set on the way in, so each line keeps its own delay. */
html body.ctl-boldest :is(.sc-section, .sc-footer).reveal > *,
html body.ctl-boldest .sc-section.reveal :is(.sc-timeline li, .countdown-item, .sc-gallery figure, .sc-swatches span) {
  transition: opacity .4s ease-in, transform .45s ease-in;
}
html body.ctl-boldest :is(.sc-section, .sc-footer).reveal.seen > *,
html body.ctl-boldest .sc-section.reveal.seen :is(.sc-timeline li, .countdown-item, .sc-gallery figure) {
  transition-property: opacity, transform;
  transition-duration: .85s, 1s;
  transition-timing-function: ease-out, cubic-bezier(.16, .84, .3, 1.04);
}
html body.ctl-boldest.look-new .sc-h2 .l { transition: opacity .25s ease-in, transform .3s ease-in; }

/* ---- Android: pictures, not drawn colours ---- */
/* the outline rings the light designs draw as pictures are not wanted on a solid fill */
html[data-ss] body.ctl-boldest :is(.sc-btn-ghost, .np, .countdown-bar)::before { display: none; }
html[data-ss] body.ctl-boldest :is(.sc-btn-ghost, .np, .countdown-item) { background-size: cover; background-position: center; border-color: transparent; }

/* light designs: the writing-colour and accent ink pictures as the fills, white writing on them */
html[data-ss][data-tone="light"] body.ctl-boldest .sc-btn-ghost { background-image: var(--ss-ink-text); }
html[data-ss][data-tone="light"] body.ctl-boldest :is(.np, .countdown-item) { background-image: var(--ss-ink-accent); }
html[data-ss][data-tone="light"] body.ctl-boldest :is(.sc-btn-ghost, .np-label, .np-title, .countdown-val, .countdown-lbl) {
  -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: #fff; color: #fff;
}
html[data-ss][data-tone="light"] body.ctl-boldest :is(.np-label, .np-title, .countdown-val, .countdown-lbl) { background: none; }
html[data-ss][data-tone="light"] body.ctl-boldest .np-wave i { background: var(--ss-white) center / cover; }

/* dark designs: the button's metal picture and the cream frame picture as the fills, the button's ink picture as the writing */
/* "The details": two layers, the ink picture cut to the letters over the cream picture filling the button */
html[data-ss]:not([data-tone="light"]) body.ctl-boldest .sc-btn-ghost {
  background-image: var(--ss-ink-button), var(--ss-white); background-size: cover, cover; background-position: center, center;
  -webkit-background-clip: text, border-box; background-clip: text, border-box; -webkit-text-fill-color: transparent;
}
html[data-ss]:not([data-tone="light"]) body.ctl-boldest :is(.np, .countdown-item) { background-image: var(--ss-button); }
html[data-ss]:not([data-tone="light"]) body.ctl-boldest :is(.np-label, .np-title, .countdown-val, .countdown-lbl) {
  background-image: var(--ss-ink-button); background-size: cover; background-position: center;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
html[data-ss]:not([data-tone="light"]) body.ctl-boldest .np-wave i { background: var(--ss-ink-button) center / cover; }