/* ===================================================================
   Wedding invitation — styles
   Look: floral "taklifnoma" card — cream paper, ornate gold frame,
   watercolour floral corners, gold script headings.
   Fonts: Great Vibes (script accent) + Cormorant Garamond + Manrope.
   =================================================================== */

:root {
  --bg:        #f5ecdd;
  --card:      rgba(252, 247, 238, 0.94);
  --ink:       #3a322a;
  --ink-soft:  #6b5f50;
  --accent:    #b8923f;   /* gold */
  --accent-dk: #8c6d34;
  --gold-1:    #e6c878;
  --gold-2:    #c19a3f;
  --gold-3:    #8c6d34;
  --line:      #e6d8bf;
  --white:     #ffffff;
  --radius:    14px;
  --maxw:      980px;
  --shadow:    0 22px 60px -28px rgba(74, 57, 30, 0.45);
  --gold-grad: linear-gradient(180deg, var(--gold-1), var(--gold-2) 55%, var(--gold-3));
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: url("assets/background.svg") center top / cover no-repeat fixed, var(--bg);
  color: var(--ink);
  font-family: "Manrope", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;            /* no sideways scroll from decorative overhangs */
}

h1, h2, h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  margin: 0;
  letter-spacing: 0.5px;
}

a { color: inherit; }

/* ---------- DECORATED CARD (echoes the invitation) ---------- */
.card {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(2.2rem, 5vw, 3.6rem);
  background: var(--card);
  border: 2px solid var(--accent);
  border-radius: 6px;
  box-shadow: var(--shadow);
}
.card::before {                          /* inner thin gold line */
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(184, 146, 63, 0.55);
  border-radius: 3px;
  pointer-events: none;
}
.card::after,                            /* floral cluster: top-left */
.card__floral {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  background: url("assets/floral-corner.svg") no-repeat center / contain;
  pointer-events: none;
  z-index: 2;
}
.card::after            { top: -16px;    left: -16px; }
.card__floral--tr       { top: -16px;    right: -16px; transform: scaleX(-1); }
.card__floral--bl       { bottom: -16px; left: -16px;  transform: scaleY(-1); }
.card__floral--br       { bottom: -16px; right: -16px; transform: scale(-1, -1); }
@media (max-width: 560px) {
  .card { padding: 2.2rem 1.25rem; }
  .card::after, .card__floral { width: 96px; height: 96px; }
  .card::after      { top: -12px; left: -12px; }
  .card__floral--tr { top: -12px; right: -12px; }
  .card__floral--bl { bottom: -12px; left: -12px; }
  .card__floral--br { bottom: -12px; right: -12px; }
}

/* gold ornamental divider */
.divider {
  width: 260px;
  max-width: 70%;
  height: 26px;
  margin: 0.6rem auto 1.6rem;
  background: url("assets/divider.svg") no-repeat center / contain;
}

/* ===================================================================
   STACKED FLIP-CARD DECK
   Default (no JS / reduced motion): slides are normal stacked blocks and
   the page scrolls normally. When script.js adds `body.is-deck`, the deck
   becomes a fixed full-viewport stage where one card flips per scroll.
   =================================================================== */
.deck { position: relative; }
.deck__scroll { width: 100%; }   /* full-width wrapper in both modes */

body.is-deck {
  overflow: hidden;            /* page itself never scrolls in deck mode */
  height: 100dvh;
}
body.is-deck .deck {
  position: fixed;
  inset: 0;
  perspective: 1600px;         /* 3D depth for the flip */
  overflow: hidden;
}

/* Each slide is a full-viewport layer stacked at the same spot. */
body.is-deck .deck__slide {
  position: absolute;
  inset: 0;
  display: block;              /* override the grid/padding fallback layout */
  min-height: 0;               /* override the 100vh fallback heights */
  padding: 0;                  /* padding now lives on .deck__scroll */
  transform-origin: top center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition:
    transform 0.48s cubic-bezier(0.25, 1, 0.5, 1),   /* ease-out: responds instantly, settles smooth */
    opacity 0.32s ease-out;
  will-change: transform, opacity;
}

/* Inner scroll region — tall cards (e.g. Manzillar maps) scroll inside. */
body.is-deck .deck__scroll {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: grid;
  align-content: safe center;
  justify-items: center;
  padding: clamp(1rem, 3vh, 2.5rem) 1.25rem;   /* modest vertical room so uniform cards fit */
}
body.is-deck .deck__scroll::-webkit-scrollbar { width: 0; height: 0; }
body.is-deck .deck__scroll { scrollbar-width: none; }

/* Uniform card box: in deck mode every slide's card is the SAME width and
   height (regardless of how much content it holds) and its content is centred,
   so stacked cards line up exactly and none sticks out for being larger. */
body.is-deck .card {
  width: 100%;
  max-width: 760px;
  min-height: min(92vh, 720px);
  display: grid;
  align-content: center;
  background: #fbf6ed;   /* opaque, so stacked cards don't show through each other */
}
body.is-deck .btn { justify-self: center; }   /* keep the pill button from stretching */

/* ---- Relative-position states (set by JS each step) ---- */
/* active: centered, flat, front-most */
body.is-deck .deck__slide.is-active {
  transform: none;
  opacity: 1;
  z-index: 40;
  pointer-events: auto;
}
/* peek-1 / peek-2: next cards waiting behind, peeking as even tabs at the TOP.
   No scaling — every card is the same size (see the uniform .card rule below),
   so the tabs line up perfectly in x and y instead of sticking out. */
body.is-deck .deck__slide.is-peek-1 {
  transform: translateY(-15px);
  z-index: 30;
  pointer-events: none;
}
body.is-deck .deck__slide.is-peek-2 {
  transform: translateY(-30px);
  z-index: 20;
  pointer-events: none;
}
/* parked: already-seen / far cards resting hidden at the back of the loop */
body.is-deck .deck__slide.is-parked {
  transform: translateY(-44px);
  opacity: 0;
  z-index: 10;
  pointer-events: none;
}

/* ---- Transient motion (added during a step, cleared on end) ---- */
/* forward: the top card stays flat (facing the viewer) and is dealt off the
   pile — it slides up and away with a slight toss tilt, like a real card,
   not a calendar page hinging over. overflow:hidden on .deck clips it away. */
body.is-deck .deck__slide.is-flip-out {
  transform: translate(-6%, -118%) rotate(-6deg);
  opacity: 0;
  z-index: 50;
}
/* backward: the previous card slides back down flat onto the top of the deck */
body.is-deck .deck__slide.is-flip-in {
  z-index: 50;
}
body.is-deck .deck__slide.is-flip-in-start {
  transform: translate(-6%, -118%) rotate(-6deg);
  opacity: 0;
  transition: none;            /* snap to start pose, then animate in */
}

/* ---- Pagination dots (built by JS) ---- */
.deck__dots {
  position: fixed;
  right: clamp(0.7rem, 2.5vw, 1.6rem);
  top: 50%;
  transform: translateY(-50%);
  display: none;               /* shown only in deck mode */
  flex-direction: column;
  gap: 0.7rem;
  z-index: 60;
}
body.is-deck .deck__dots { display: flex; }
.deck__dot {
  width: 11px;
  height: 11px;
  padding: 0;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background 0.25s, transform 0.25s;
  -webkit-tap-highlight-color: transparent;
}
.deck__dot:hover { background: rgba(184, 146, 63, 0.4); }
.deck__dot.is-current {
  background: var(--accent);
  transform: scale(1.35);
}
@media (max-width: 560px) {
  .deck__dots {
    right: 50%;
    top: auto;
    bottom: 0.9rem;
    transform: translateX(50%);
    flex-direction: row;
  }
}

/* ---------- HERO ---------- */
.hero {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  align-content: safe center;
  justify-items: center;
  text-align: center;
  padding: 4.5rem 1.25rem 5rem;
}
.hero__inner { width: 100%; max-width: 760px; }
.hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 0.72rem;
  color: var(--accent-dk);
  margin: 0 0 0.8rem;
}
.hero__names {
  font-size: clamp(2.8rem, 9vw, 5.2rem);
  line-height: 1.05;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  color: var(--ink);
}
.hero__amp {
  font-size: 0.62em;
  font-style: normal;          /* roman ampersand, same glyph as the nav "Q & R" */
  color: var(--accent-dk);
}
.hero__date {
  margin: 1.4rem 0 0.2rem;
  font-size: 1.05rem;
  color: var(--ink-soft);
  letter-spacing: 1px;
}
.hero__place {
  margin: 0 0 2.5rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
  letter-spacing: 0.5px;
}

/* ---------- COUNTDOWN ---------- */
.countdown {
  display: flex;
  justify-content: center;
  gap: clamp(0.6rem, 3vw, 1.8rem);
  margin-bottom: 2.5rem;
}
.countdown__cell {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem clamp(0.7rem, 2.5vw, 1.4rem);
  min-width: 72px;
  box-shadow: var(--shadow);
}
.countdown__num {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.8rem, 6vw, 2.8rem);
  line-height: 1;
  color: var(--ink);
}
.countdown__label {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--ink-soft);
}
.countdown__done {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.8rem;
  color: var(--accent-dk);
  margin: 0 0 2.5rem;
}

/* ---------- BUTTON ---------- */
.btn {
  display: inline-block;
  text-decoration: none;
  padding: 0.85rem 2.2rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent-dk);
  font-size: 0.85rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: background 0.25s, color 0.25s;
}
.btn:hover { background: var(--accent); color: var(--white); }

/* ---------- SECTIONS ---------- */
.section {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  align-content: safe center;
  justify-items: center;
  padding: clamp(3rem, 8vw, 5rem) 1.25rem;
}
.section__inner {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  text-align: center;
}
.section__inner.card { max-width: 760px; }
.section__title {
  font-family: "Great Vibes", "Cormorant Garamond", cursive;
  font-weight: 400;
  font-size: clamp(2.8rem, 8vw, 4.4rem);
  line-height: 1.05;
  margin-bottom: 1.2rem;
  color: var(--accent-dk);
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.section__sub {
  color: var(--ink-soft);
  margin: -1.4rem 0 2.5rem;
  letter-spacing: 1px;
}

/* ---------- INVITATION ---------- */
.invite__lead {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.5rem;
  color: var(--accent-dk);
  margin: 0 0 1rem;
}
.invite__text {
  max-width: 620px;
  margin: 0 auto 1.2rem;
  color: var(--ink-soft);
  font-size: 1.05rem;
}
.invite__signature {
  margin-top: 2rem;
  font-style: italic;
  color: var(--ink);
}

/* ---------- TIMELINE / AGENDA ---------- */
.agenda-day {
  max-width: 620px;
  margin: 0 auto 2.6rem;
}
.agenda-day:last-child { margin-bottom: 0; }
.agenda-day__title {
  font-size: 1.6rem;
  color: var(--accent-dk);
  text-align: left;
  margin: 0 0 0.4rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--line);
}
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 102px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--line);
}
.timeline__item {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 1.9rem;
  position: relative;
  padding: 0.9rem 0;
}
.timeline__item::before {
  content: "";
  position: absolute;
  left: 102px;
  top: 1.5rem;
  transform: translateX(-50%);
  width: 11px;
  height: 11px;
  background: var(--accent);
  border: 2px solid #f8f1e6;
  border-radius: 50%;
}
.timeline__time {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.1rem;
  color: var(--accent-dk);
  text-align: right;
  padding-top: 0.15rem;
  line-height: 1.25;
}
.timeline__body h3 {
  font-size: 1.35rem;
  margin-bottom: 0.2rem;
}
.timeline__body p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.96rem;
}

/* ---------- LOCATIONS ---------- */
.locations {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .locations { grid-template-columns: 1fr 1fr; }
}
.location {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-align: left;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.location__info { padding: 1.4rem 1.5rem 1rem; }
.location__name {
  font-size: 1.5rem;
  margin-bottom: 0.3rem;
}
.location__addr {
  margin: 0 0 0.4rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.location__map {
  width: 100%;
  height: 260px;
  border: 0;
  border-top: 1px solid var(--line);
  display: block;
}
/* transparent overlay so scrolling over the map moves the page/deck, not the
   map; click to interact with the map (re-armed on leave / card change) */
.location__map-wrap { position: relative; }
.location__map-guard {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
  background: transparent;
}
.location__map-wrap.is-active .location__map-guard { display: none; }
.location__map-guard::after {
  content: "Xarita bilan ishlash uchun bosing";
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  padding: 0.3rem 0.75rem;
  background: rgba(58, 50, 42, 0.74);
  color: #fff;
  font-size: 0.7rem;
  letter-spacing: 0.3px;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.location__map-guard:hover::after { opacity: 1; }
.location__links {
  display: flex;
  border-top: 1px solid var(--line);
}
.location__link {
  flex: 1;
  text-align: center;
  padding: 0.85rem 0.6rem;
  font-size: 0.82rem;
  letter-spacing: 0.3px;
  text-decoration: none;
  color: var(--accent-dk);
  transition: background 0.2s, color 0.2s;
}
.location__link + .location__link { border-left: 1px solid var(--line); }
.location__link:hover { background: var(--accent); color: var(--white); }

/* ---------- FOOTER ---------- */
.footer {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  align-content: safe center;
  justify-items: center;
  text-align: center;
  padding: 4rem 1.25rem 4.5rem;
}
.footer__note {
  color: var(--ink-soft);
  font-size: 1.1rem;
  margin: 0 0 1.6rem;
}
.footer__sign {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink);
  margin: 0 0 0.3rem;
}
.footer__names {
  font-family: "Great Vibes", "Cormorant Garamond", cursive;
  font-size: clamp(2.4rem, 7vw, 3.4rem);
  line-height: 1.1;
  margin: 0;
  color: var(--accent-dk);
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.footer__amp {
  font-family: "Cormorant Garamond", serif;   /* plain ampersand, not script */
  font-style: normal;
  font-size: 0.5em;
  vertical-align: 0.12em;
  -webkit-text-fill-color: var(--accent-dk);
  color: var(--accent-dk);
}

/* ---------- MOBILE TUNING ---------- */
@media (max-width: 560px) {
  /* countdown: let 4 cells share the row instead of overflowing */
  .countdown { gap: 0.5rem; }
  .countdown__cell {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.85rem 0.3rem;
  }
  .countdown__num { font-size: 1.7rem; }
  .countdown__label { font-size: 0.58rem; letter-spacing: 0.5px; }

  /* timeline: narrower time column so event text has room */
  .timeline__item { grid-template-columns: 72px 1fr; gap: 1.2rem; }
  .timeline::before,
  .timeline__item::before { left: 82px; }
  .timeline__time { font-size: 1rem; }
  .agenda-day__title { font-size: 1.4rem; }

  /* keep names + button from pushing width on small phones */
  .hero__names { font-size: clamp(2.1rem, 11vw, 3rem); }
  .btn { padding: 0.8rem 1.5rem; }
}

/* ---------- REVEAL ANIMATION ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ===================================================================
   COVER · MUSIC · PETALS · SWIPE HINT · ACTIONS · TOAST
   =================================================================== */

/* ---------- COVER (tap to open) ---------- */
.cover {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(245, 236, 221, 0.55), transparent 70%),
    url("assets/background.svg") center top / cover no-repeat,
    var(--bg);
  transition: opacity 0.7s ease, transform 0.7s ease, visibility 0s linear 0.7s;
}
.cover.is-open {
  opacity: 0;
  transform: scale(1.06);
  visibility: hidden;
  pointer-events: none;
}
.cover__card {
  position: relative;
  width: 100%;
  max-width: 460px;
  padding: clamp(2.6rem, 7vw, 3.8rem) clamp(1.6rem, 6vw, 3rem);
  text-align: center;
  background: #fbf6ed;
  border: 2px solid var(--accent);
  border-radius: 6px;
  box-shadow: var(--shadow);
}
.cover__card::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(184, 146, 63, 0.55);
  border-radius: 3px;
  pointer-events: none;
}
.cover__eyebrow {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 0.7rem;
  color: var(--accent-dk);
  margin: 0 0 1rem;
}
.cover__names {
  font-family: "Great Vibes", "Cormorant Garamond", cursive;
  font-weight: 400;
  font-size: clamp(2.6rem, 12vw, 4rem);
  line-height: 1.1;
  margin: 0;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cover__names span {
  -webkit-text-fill-color: var(--accent-dk);
  color: var(--accent-dk);
  font-size: 0.62em;
}
.cover__date {
  margin: 0.6rem 0 1.8rem;
  color: var(--ink-soft);
  letter-spacing: 1px;
  font-size: 0.95rem;
}
.cover__btn {
  font: inherit;
  cursor: pointer;
  padding: 0.85rem 2.1rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 0.78rem;
  transition: background 0.25s, transform 0.2s;
}
.cover__btn:hover { background: var(--accent-dk); transform: translateY(-1px); }
.cover__hint {
  margin: 1rem 0 0;
  font-size: 0.68rem;
  letter-spacing: 1px;
  color: var(--ink-soft);
}

/* ---------- MUSIC BUTTON ---------- */
.music-fab {
  position: fixed;
  left: clamp(0.8rem, 2.5vw, 1.4rem);
  bottom: clamp(0.8rem, 2.5vw, 1.4rem);
  z-index: 120;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: rgba(251, 246, 237, 0.92);
  color: var(--accent-dk);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s, background 0.2s, opacity 0.2s;
}
.music-fab[hidden] { display: none; }
.music-fab:hover { transform: scale(1.07); background: #fff; }
.music-fab__icon { font-size: 1.2rem; line-height: 1; }
.music-fab.is-muted { opacity: 0.65; }
.music-fab.is-playing .music-fab__icon { animation: fab-spin 4s linear infinite; }
@keyframes fab-spin { to { transform: rotate(360deg); } }

/* ---------- FALLING PETALS ---------- */
.petals {
  position: fixed;
  inset: 0;
  z-index: 56;
  pointer-events: none;
  overflow: hidden;
}
.petal {
  position: absolute;
  top: -12%;
  background: var(--petal, #f0c4cd);
  border-radius: 150% 0 150% 0;
  will-change: transform;
  animation: petal-fall linear infinite;
}
@keyframes petal-fall {
  0%   { transform: translate3d(0, -12vh, 0) rotate(0deg); }
  100% { transform: translate3d(var(--drift, 40px), 114vh, 0) rotate(540deg); }
}

/* ---------- SWIPE HINT ---------- */
.swipe-hint {
  position: fixed;
  left: 50%;
  bottom: clamp(3.2rem, 9vh, 5rem);
  transform: translateX(-50%);
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  color: var(--accent-dk);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.swipe-hint.is-show { opacity: 0.92; }
.swipe-hint__arrow {
  font-size: 1.7rem;
  line-height: 1;
  animation: hint-bounce 1.5s ease-in-out infinite;
}
.swipe-hint__text {
  font-size: 0.68rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
@keyframes hint-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* ---------- FOOTER ACTIONS ---------- */
.footer__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.8rem;
}
.btn--sm {
  padding: 0.6rem 1.15rem;
  font-size: 0.7rem;
  cursor: pointer;
  background: transparent;
}

/* ---------- TOAST ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.6rem;
  transform: translateX(-50%) translateY(20px);
  z-index: 400;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  background: rgba(58, 50, 42, 0.9);
  color: #fff;
  font-size: 0.8rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
}
.toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  .petals { display: none; }
  .music-fab.is-playing .music-fab__icon,
  .swipe-hint__arrow { animation: none; }
  .cover { transition: opacity 0.3s ease, visibility 0s linear 0.3s; }
}