/*
 * Storybook invitations: a door that opens onto animated scenes.
 * One set of keyframes drives three outputs:
 *   - the shared link: a scene's elements play when it scrolls into view (.sb-play);
 *   - the video/PDF export: html.sb-film lays the scenes on one 390x844 phone stage and gives every
 *     animation a start time on a single timeline, which the exporter pauses and steps frame by frame.
 */

/* ---------- Lettering: English uses the design's own script, Marathi & Hindi use Gotu ---------- */
@font-face { font-family: 'Gotu'; src: url('../fonts/storybook/Gotu-Regular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Great Vibes'; src: url('../fonts/storybook/GreatVibes-Regular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Klaristha'; src: url('../fonts/storybook/Klaristha-Regular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('../fonts/storybook/PlayfairDisplay-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/storybook/Poppins-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/storybook/Poppins-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }

/* As in the original designs: English body text in Klaristha, headings and names in Great Vibes. */
body.sb[data-lang='mr'], body.sb[data-lang='hi'] {
    --sb-font-text: 'Gotu', 'Noto Sans Devanagari', sans-serif;
    --sb-font-title: 'Gotu', 'Noto Sans Devanagari', sans-serif;
    --sb-font-names: 'Gotu', 'Noto Sans Devanagari', sans-serif;
}
body.sb[data-lang='en'] {
    --sb-font-text: 'Klaristha', Georgia, serif;
    --sb-font-title: 'Great Vibes', 'Klaristha', cursive;
    --sb-font-names: 'Great Vibes', 'Klaristha', cursive;
}

/* Every text exists once per language; only the chosen language is shown. */
/* Two-language invitations ("mr-en", "hi-en") show both. */
body.sb:not([data-lang*='mr']) [data-l='mr'],
body.sb:not([data-lang*='hi']) [data-l='hi'],
body.sb:not([data-lang*='en']) [data-l='en'] { display: none !important; }
body.sb [data-l] { white-space: pre-line; }
body.sb .sb-only-en, body.sb .sb-only-dev { display: none; }
body.sb[data-lang='en'] .sb-only-en { display: revert; }
body.sb:not([data-lang='en']) .sb-only-dev { display: revert; }
body.sb .sb-empty { display: none !important; }

/* A function's location under its date and time: a map pin and the place, then a small button that
   opens Google Maps. Compact, as it shares the space above the couple's photo. Each design may set
   --sb-place-width (e.g. between side decorations) and --sb-place for the text colour; the pin and
   the button take the design's accent. */
.sb .sb-place { display: block; width: fit-content; max-width: min(var(--sb-place-width, 300px), 100%); margin: 10px auto 0; text-align: center; }
.sb .sb-place-text {
    margin: 0; font-family: var(--sb-font-text); font-size: .88rem; font-weight: 500; line-height: 1.3;
    color: var(--sb-place, var(--sb-accent, #800000));
}
.sb .sb-place .pin { display: inline-block; width: .85em; height: 1em; margin-right: 4px; color: var(--sb-accent, #800000); vertical-align: -.12em; }
.sb .sb-place .pin svg { width: 100%; height: 100%; display: block; }
.sb .sb-place-btn {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 4px 12px 4px 10px; border-radius: 999px;
    background: var(--sb-accent, #800000); color: #fff; font-family: var(--sb-font-text); font-size: .72rem; font-weight: 500;
    line-height: 1.35; letter-spacing: .02em; text-decoration: none; box-shadow: 0 3px 8px rgba(0, 0, 0, .18);
}
.sb .sb-place-btn:hover, .sb .sb-place-btn:focus { color: #fff; }
.sb .sb-place-btn:active { transform: scale(.96); }
.sb .sb-place-btn svg { width: 1em; height: 1em; flex: none; }

/* The Bootstrap defaults and utilities the original designs were built on. :where() keeps them at
   element-level specificity, as in Bootstrap, so each design's own rules still win. */
.sb *, .sb *::before, .sb *::after { box-sizing: border-box; }
:where(.sb) h1, :where(.sb) h2, :where(.sb) h3, :where(.sb) h4, :where(.sb) h5, :where(.sb) h6 { margin-top: 0; margin-bottom: .5rem; font-weight: 500; line-height: 1.2; }
:where(.sb) h1 { font-size: calc(1.375rem + 1.5vw); }
:where(.sb) h2 { font-size: calc(1.325rem + .9vw); }
:where(.sb) h3 { font-size: calc(1.3rem + .6vw); }
:where(.sb) h6 { font-size: 1rem; }
:where(.sb) p { margin-top: 0; margin-bottom: 1rem; }
:where(.sb) strong { font-weight: bolder; }
:where(.sb) img, :where(.sb) svg { vertical-align: middle; }
:where(.sb) img { max-width: 100%; }
.sb .p-0 { padding: 0 !important; }
.sb .pb-4 { padding-bottom: 1.5rem !important; }
.sb .mb-4 { margin-bottom: 1.5rem !important; }
.sb .mt-4 { margin-top: 1.5rem !important; }
.sb .mb-2 { margin-bottom: .5rem !important; }
.sb .mt-2 { margin-top: .5rem !important; }
.sb .sb-row { display: flex; align-items: center; justify-content: center; }

/* ---------- Entrance animations ---------- */
@keyframes sb-up { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }
@keyframes sb-down { from { opacity: 0; transform: translateY(-34px); } to { opacity: 1; transform: none; } }
@keyframes sb-left { from { opacity: 0; transform: translateX(-100px); } to { opacity: 1; transform: none; } }
@keyframes sb-right { from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: none; } }
@keyframes sb-rise { from { opacity: 0; transform: translateY(70px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes sb-zoom { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }
@keyframes sb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sb-unfold { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: none; } }
@keyframes sb-reveal { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }

/* Continuous motion once things are on screen. */
@keyframes sb-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(1deg); } }
@keyframes sb-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes sb-spin { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes sb-pulse { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(237, 201, 104, .35)); } 50% { transform: scale(1.05); filter: drop-shadow(0 0 22px rgba(237, 201, 104, .7)); } }
@keyframes sb-arrow { 0%, 80%, 100% { opacity: 0; } 40% { opacity: 1; } }

.sb .sb-float { animation: sb-float 5s ease-in-out infinite; }
.sb .sb-float-slow { animation: sb-float 7s ease-in-out 1s infinite; }
.sb .sb-sway { animation: sb-sway 6s ease-in-out infinite; transform-origin: top center; }

.sb [data-anim] { opacity: 0; }
.sb .sb-scene.sb-play [data-anim],
html.sb-film .sb [data-anim] {
    animation-duration: var(--sb-dur, 1s);
    animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    animation-fill-mode: both;
    animation-delay: calc(var(--sb-base, .15s) + var(--i, 0) * var(--sb-step, .3s));
}
.sb .sb-scene.sb-play [data-anim='up'], html.sb-film .sb [data-anim='up'] { animation-name: sb-up; }
.sb .sb-scene.sb-play [data-anim='down'], html.sb-film .sb [data-anim='down'] { animation-name: sb-down; }
.sb .sb-scene.sb-play [data-anim='left'], html.sb-film .sb [data-anim='left'] { animation-name: sb-left; }
.sb .sb-scene.sb-play [data-anim='right'], html.sb-film .sb [data-anim='right'] { animation-name: sb-right; }
.sb .sb-scene.sb-play [data-anim='rise'], html.sb-film .sb [data-anim='rise'] { animation-name: sb-rise; --sb-dur: 1.4s; }
.sb .sb-scene.sb-play [data-anim='zoom'], html.sb-film .sb [data-anim='zoom'] { animation-name: sb-zoom; }
.sb .sb-scene.sb-play [data-anim='fade'], html.sb-film .sb [data-anim='fade'] { animation-name: sb-fade; }
.sb .sb-scene.sb-play [data-anim='unfold'], html.sb-film .sb [data-anim='unfold'] { animation-name: sb-unfold; }
.sb .sb-scene.sb-play [data-anim='reveal'], html.sb-film .sb [data-anim='reveal'] { animation-name: sb-reveal; --sb-dur: 1.6s; }

/* ---------- Music button ---------- */
.sb #audio-controls {
    position: fixed; bottom: 26px; right: max(18px, calc(50% - 230px)); z-index: 9990;
    width: 48px; height: 48px; border: 0; border-radius: 50%; display: none; align-items: center; justify-content: center;
    background: var(--sb-accent, #800000); color: #fff; box-shadow: 0 4px 15px rgba(0, 0, 0, .35); cursor: pointer;
}
.sb #audio-controls svg { width: 22px; height: 22px; }
.sb #audio-controls .sb-muted { display: none; }
.sb #audio-controls.is-muted .sb-muted { display: block; }
.sb #audio-controls.is-muted .sb-playing { display: none; }
body.sb.no-music #audio-controls { display: none !important; }

/* ---------- Film stage (video, PDF and PNG) ----------
   The stage is a real phone screen (390 x 844, as on an iPhone 14/15), the same size as the
   site's phone previews, so every scene keeps the exact layout guests see on the link. */
html.sb-film, html.sb-film body { width: 390px !important; height: 844px !important; min-height: 0 !important; overflow: hidden !important; margin: 0 !important; background: #000; }
html.sb-film body { display: block !important; }
html.sb-film .sb .app-wrapper { width: 390px !important; max-width: none !important; height: 844px !important; overflow: hidden !important; position: relative; box-shadow: none; }
html.sb-film .sb .sb-scene {
    position: absolute !important; inset: 0; width: 390px !important; height: 844px !important; min-height: 0 !important; margin: 0 !important;
    opacity: 0; animation: sb-scene var(--scene-dur, 7s) linear var(--scene-start, 0s) both;
}
html.sb-film .sb .sb-scene.sb-last { animation-name: sb-scene-last; }
html.sb-film .sb .sb-scene [data-anim] { animation-delay: calc(var(--scene-start, 0s) + var(--sb-base, .5s) + var(--i, 0) * var(--sb-step, .42s)); }
html.sb-film .sb #entry { --sb-base: 2.3s; }
html.sb-film .sb #door-overlay { height: 844px; }
html.sb-film .sb .door { transition: none; }
/* Only for tapping on the link: music button, scroll arrows, the map, its route button and the
   scratch card. The wedding date stays, shown as plain text. */
html.sb-film .sb #audio-controls, html.sb-film .sb .arrows, html.sb-film:not(.sb-pdf) .sb .map-container,
html.sb-film:not(.sb-pdf) .sb .btn-directions, html.sb-film:not(.sb-pdf) .sb .sb-place-btn,
html.sb-film .sb .scratch-cover { display: none !important; }
/* PDF pages can be tapped, so the route and Google Maps buttons stay (the live map itself cannot be printed). */
html.sb-film.sb-pdf .sb .map-container { box-shadow: none !important; }
html.sb-film.sb-pdf .sb .map-container iframe { display: none !important; }
html.sb-film .sb .scratch-container { background: none !important; box-shadow: none !important; border-radius: 0 !important; width: auto !important; height: auto !important; overflow: visible !important; }
@keyframes sb-scene { 0% { opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sb-scene-last { 0% { opacity: 0; } 8% { opacity: 1; } 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    html:not(.sb-film) .sb [data-anim] { opacity: 1 !important; animation: none !important; }
    html:not(.sb-film) .sb .sb-float, html:not(.sb-film) .sb .sb-float-slow, html:not(.sb-film) .sb .sb-sway { animation: none !important; }
}
/* A picture the host chose to hide in the editor ("Hide picture"). */
.sb [data-photo-off] { display: none !important; }