/* Couple Dashboard - layout and feel of the original Dreamers page, in
   neutral colours for now. Studio colours plug into these tokens later. */
.cd {
  --font-text: "Work Sans", -apple-system, sans-serif;
  --font-names: "Cormorant Garamond", Georgia, serif;
  /* how big names/titles (--ns) and the other text (--ts) are, as a factor (Delivery Page > Logo, header & font) */
  --ns: 1;
  --ts: 1;
  --ink: #1c1c1c;
  --bg: #f6f6f5;
  --card: #ffffff;
  --accent: #1c1c1c;
  --progress: var(--accent);
  --border: var(--ink);
  /* derived from the studio colours (Delivery Page > Appearance) */
  --ink-soft: color-mix(in srgb, var(--ink) 68%, var(--bg));
  --line: var(--ink);
  --track: color-mix(in srgb, var(--ink) 12%, var(--bg));
  --fill: var(--progress);
  --green: #2f9e44;
  --yellow: #d9a520;
  --orange: #e2803f;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: calc(1rem * var(--ts));
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.cd * { box-sizing: border-box; }
.cd a { color: inherit; }

/* header photo/film fading into the page */
.cd-cover { position: relative; margin: 0; width: 100%; height: clamp(280px, 46vw, 560px); overflow: hidden; background: var(--ink); }
.cd-cover img, .cd-cover video { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; display: block; animation: cd-cover-in 1.4s ease both; }
.cd-cover::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 32%, var(--bg) 100%); }
/* no play button over the header film on iPhones */
.cd-cover video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.cd-cover video::-webkit-media-controls { display: none !important; }
@keyframes cd-cover-in { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } }

.cd-hero { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.1rem; padding: 0 1.5rem 3.5rem; }
.cd-hero.no-cover { padding-top: 4.5rem; }
.cd-hero.with-cover { margin-top: .4rem; }
.cd-logo { height: 110px; width: auto; max-width: 260px; object-fit: contain; }
.cd-logo-sm { height: 72px; opacity: .85; }
.cd-studio { margin: 0; font-weight: 600; font-size: calc(.8rem * var(--ts)); letter-spacing: .22em; text-transform: uppercase; }
.cd-eyebrow { margin: .4rem 0 0; font-weight: 600; font-size: calc(.72rem * var(--ts)); letter-spacing: .22em; text-transform: uppercase; }
.cd-names { margin: 0; font-family: var(--font-names); font-weight: 400; font-size: calc(clamp(3.2rem, 11vw, 5.6rem) * var(--ns)); line-height: 1.05; }
.cd-names .amp { padding: 0 .08em; }
.cd-date { margin: 0; font-size: calc(.86rem * var(--ts)); letter-spacing: .06em; color: var(--ink-soft); }
.cd-rule { width: 46px; height: 1px; border: 0; background: var(--line); margin: .6rem 0 0; }

.cd-note { text-align: center; max-width: 55em; margin: 0 auto 3.2rem; padding: 0 1.5rem 3.4rem; border-bottom: 1px solid var(--line); }
.cd-note p { margin: 0 auto; max-width: 42em; font-size: calc(1.12rem * var(--ts)); line-height: 1.75; }
.cd-note p + p { margin-top: 1.1rem; }
.cd-note .cd-sign { margin-top: 1rem; font-size: calc(.78rem * var(--ts)); letter-spacing: .05em; color: var(--ink-soft); text-transform: uppercase; }

/* wider than the original so films can show in the 3840x1640 scope ratio */
.cd-main { max-width: 900px; margin: 0 auto; padding: 0 1.5rem 5rem; }
.cd-section-title { margin: 0 0 1.6rem; text-align: center; font-weight: 600; font-size: calc(.88rem * var(--ts)); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.cd-banner { text-align: center; background: var(--card); border: 1px solid var(--green); border-radius: 4px; padding: 1.3rem 1.6rem; margin: 0 0 1.8rem; }
.cd-banner p { margin: 0; font-size: calc(1.05rem * var(--ts)); color: var(--green); }

.cd-overall { margin: 0 0 1rem; }
.cd-overall-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .5rem; }
.cd-overall-label { font-weight: 600; font-size: calc(.86rem * var(--ts)); }
.cd-overall .pct { font-weight: 600; color: var(--ink); }
.cd-updated { text-align: center; font-size: calc(.78rem * var(--ts)); color: var(--ink-soft); margin: 0 0 2rem; }

.cd-track { height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.cd-fill { height: 100%; width: 0; border-radius: 3px; background: var(--fill); transition: width 2.3s cubic-bezier(.22,.9,.32,1); }
.pct { font-weight: 500; font-size: calc(.86rem * var(--ts)); font-variant-numeric: tabular-nums; color: var(--ink-soft); }

.cd-list { display: flex; flex-direction: column; gap: 1rem; }
.cd-card { background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: 1.8rem 1.9rem 1.7rem;
  opacity: 0; transform: translateY(10px); animation: cd-rise .6s ease forwards; }
.cd-card:nth-child(2) { animation-delay: .1s; } .cd-card:nth-child(3) { animation-delay: .2s; }
.cd-card:nth-child(4) { animation-delay: .3s; } .cd-card:nth-child(n+5) { animation-delay: .4s; }
.cd-card[data-status="delivered"] { box-shadow: 0 0 0 1px var(--border) inset; }
.cd-card.glow { animation: cd-glow 1.3s ease-out both; }
@keyframes cd-rise { to { opacity: 1; transform: translateY(0); } }
@keyframes cd-glow {
  0%, 100% { opacity: 1; transform: none; box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .35), inset -1px -1px 1px rgba(255, 255, 255, .12), inset 0 0 18px rgba(255, 255, 255, .10), 0 20px 50px rgba(15, 15, 30, .14), 0 0 0 0 rgba(47,158,68,0); }
  35% { opacity: 1; transform: none; box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .35), inset -1px -1px 1px rgba(255, 255, 255, .12), inset 0 0 18px rgba(255, 255, 255, .10), 0 20px 50px rgba(15, 15, 30, .14), 0 0 30px 6px rgba(47,158,68,.45); }
}

.cd-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: .65rem; }
.cd-card-head h3 { margin: 0; font-family: var(--font-names); font-weight: 400; font-size: calc(1.7rem * var(--ns)); letter-spacing: .01em; }
.cd-status { display: inline-flex; align-items: center; gap: .42em; font-weight: 600; font-size: calc(.75rem * var(--ts)); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.cd-status .dot { position: relative; width: 8.5px; height: 8.5px; border-radius: 50%; background: var(--ink-soft); flex-shrink: 0; }
.cd-card[data-status="backup"] .dot { background: var(--green); }
.cd-card[data-status="editing"] .dot { background: var(--orange); }
.cd-card[data-status="almost"] .dot { background: var(--yellow); }
.cd-card[data-status="delivered"] .dot { background: var(--green); }
.cd-card[data-status="delivered"] .cd-status { color: var(--green); }
.cd-card:not([data-status="backup"]) .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: cd-pulse 1.8s cubic-bezier(0,0,.2,1) infinite; }
@keyframes cd-pulse { from { transform: scale(1); opacity: .7; } to { transform: scale(2.6); opacity: 0; } }
.cd-card-note { margin: 0 0 1.1rem; font-size: calc(.95rem * var(--ts)); color: var(--ink-soft); }

.cd-progress { position: relative; }
.cd-spark { position: absolute; top: 50%; right: 0; width: 0; height: 0; pointer-events: none; }
.cd-spark i { position: absolute; width: 4.5px; height: 4.5px; margin: -2.25px 0 0 -2.25px; border-radius: 50%; background: var(--green); opacity: 0; transform: rotate(var(--a)) translateX(1px) scale(.6); }
.cd-spark.burst i { animation: cd-spark .75s cubic-bezier(.2,.8,.3,1) forwards; }
.cd-spark i:nth-child(1) { --a: 0deg; } .cd-spark i:nth-child(2) { --a: 60deg; } .cd-spark i:nth-child(3) { --a: 120deg; }
.cd-spark i:nth-child(4) { --a: 180deg; } .cd-spark i:nth-child(5) { --a: 240deg; } .cd-spark i:nth-child(6) { --a: 300deg; }
@keyframes cd-spark { from { opacity: .9; transform: rotate(var(--a)) translateX(1px) scale(1); } to { opacity: 0; transform: rotate(var(--a)) translateX(15px) scale(.35); } }

.cd-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: .75rem; flex-wrap: wrap; }
.cd-actions { display: flex; gap: .6em; flex-wrap: wrap; }
.cd-btn { display: inline-flex; align-items: center; gap: .4em; font: 600 calc(.86rem * var(--ts)) var(--font-text); letter-spacing: .02em; color: #fff; background: var(--accent);
  padding: .5em 1em; border: 0; border-radius: 3px; text-decoration: none; cursor: pointer; transition: opacity .2s, transform .2s; }
.cd a.cd-btn { color: #fff; }
.cd-btn:hover { opacity: .85; transform: translateY(-1px); }
.cd-btn:disabled { opacity: .55; cursor: default; transform: none; }

/* film still / player: always the 3840x1640 (≈2.34:1) scope ratio */
.cd-reveal { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .6s cubic-bezier(.22,.9,.32,1), opacity .5s ease; }
.cd-reveal > div { min-height: 0; overflow: hidden; }
.cd-card.open > .cd-reveal, .cd-part.open > .cd-reveal { grid-template-rows: 1fr; opacity: 1; }
.cd-parts { margin-top: 1rem; border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
.cd-part { padding: .75rem 0; border-bottom: 1px solid color-mix(in srgb, currentColor 8%, transparent); }
.cd-part:last-child { border-bottom: 0; padding-bottom: 0; }
.cd-part-row { display: flex; justify-content: space-between; align-items: center; gap: .75rem 1rem; flex-wrap: wrap; }
.cd-part-label { font-weight: 500; }
.cd-part.open > .cd-reveal { margin-top: .75rem; }
.cd-media { position: relative; margin-top: 1rem; width: 100%; aspect-ratio: 3840 / 1640; border-radius: 4px; overflow: hidden; background: #000; }
.cd-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cd-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
/* play button: a frosted glass disc over the still */
.cd-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 4.6rem; height: 4.6rem; border-radius: 50%;
  display: grid; place-items: center; padding: 0; cursor: pointer; color: #fff;
  border: 1px solid rgba(255, 255, 255, .35);
  background: linear-gradient(140deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, .08));
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .45), 0 10px 30px rgba(0, 0, 0, .25);
  transition: transform .25s cubic-bezier(.22, .61, .36, 1), background .25s; }
.cd-play svg { width: 1.5rem; height: 1.5rem; display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25)); }
.cd-play:hover { background: linear-gradient(140deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .14)); transform: translate(-50%, -50%) scale(1.06); }
.cd-tip { margin: .75rem 0 0; font-size: calc(.82rem * var(--ts)); color: var(--ink-soft); }

.cd-extra { padding: 1.3rem 1.9rem; }
.cd-extra h3 { font-size: calc(1.4rem * var(--ns)); }

.cd-options { margin-top: 3rem; padding-top: 2.2rem; border-top: 1px solid var(--line); text-align: center; }
.cd-options-title { margin: 0 0 .4rem; font-weight: 600; font-size: calc(.88rem * var(--ts)); letter-spacing: .15em; text-transform: uppercase; color: var(--ink-soft); }
.cd-options-hint { margin: 0 0 1.1rem; font-size: calc(.78rem * var(--ts)); color: var(--ink-soft); }
.cd-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.cd-chip { font: calc(.86rem * var(--ts)) var(--font-text); color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: .45em 1.1em; cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .2s ease; }
/* Under the pointer: frosted glass with a soft glow in the studio's own button colour. */
.cd-chip:hover:not(.active), .cd-chip:focus-visible:not(.active) {
  background: linear-gradient(135deg, color-mix(in srgb, var(--card) 70%, transparent), color-mix(in srgb, var(--accent) 12%, var(--card)));
  -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 4px 16px color-mix(in srgb, var(--accent) 22%, transparent);
  transform: translateY(-1px); outline: none;
}
.cd-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.cd-option-detail { max-width: 620px; margin: 1rem auto 0; text-align: left; font-size: calc(.86rem * var(--ts)); line-height: 1.6; background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: .9rem 1.1rem; }
.cd-cta { margin: 1.5rem auto 0; max-width: 620px; font-size: calc(.96rem * var(--ts)); line-height: 1.6; color: var(--ink-soft); }
.cd-cta a { color: var(--ink); text-underline-offset: 2px; }

.cd-footer { text-align: center; padding: 3rem 1.5rem 4rem; border-top: 1px solid var(--line); margin-top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .cd-reveal { transition: none; }
  .cd-card, .cd-cover img, .cd-cover video { animation: none !important; opacity: 1 !important; transform: none !important; }
  .cd-fill { transition: none !important; }
  .dot::after, .cd-spark i { animation: none !important; opacity: 0 !important; }
}
@media (max-width: 640px) {
  .cd-card { padding: 1.4rem 1.2rem; }
  .cd-card-head { flex-direction: column; align-items: flex-start; gap: .6rem; }
}

/* ---------- Glass ----------
   Frosted, see-through cards floating over a soft wash of colour: the
   couple's header photo blurred right out, or the studio's own colours. */
.cd-ambient {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(38% 34% at 12% 28%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%),
    radial-gradient(44% 40% at 88% 52%, color-mix(in srgb, var(--progress) 34%, transparent), transparent 70%),
    radial-gradient(50% 40% at 40% 92%, color-mix(in srgb, var(--ink) 16%, transparent), transparent 70%);
}
/* The photo, blurred right out so text on top stays readable; a veil in
   the page colour calms it down further. */
.cd-ambient img, .cd-ambient video { width: 100%; height: 100%; object-fit: cover; display: block; filter: blur(var(--backdrop-blur, 40px)) saturate(1.3); transform: scale(1.15); }
.cd-ambient::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--veil-color, var(--bg)) var(--veil, 72%), transparent); }
.cd-ambient video::-webkit-media-controls, .cd-ambient video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.cd .cd-note, .cd .cd-main, .cd .cd-footer { position: relative; z-index: 1; }

.cd .cd-card,
.cd .cd-banner,
.cd .cd-option-detail,
.cd .cd-chip {
  position: relative;
  /* frosted pane: blurs what's behind it, with only a hint of the card colour */
  background: color-mix(in srgb, var(--card) 32%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  border: 0;
  /* the thickness of the glass: a soft light bevel on the inside edges */
  box-shadow:
    inset 1px 1px 1px rgba(255, 255, 255, .35),
    inset -1px -1px 1px rgba(255, 255, 255, .12),
    inset 0 0 18px rgba(255, 255, 255, .10),
    0 20px 50px rgba(15, 15, 30, .14);
}
/* a thin rim of light that catches at the top-left and fades out */
.cd .cd-card::before,
.cd .cd-banner::before,
.cd .cd-option-detail::before,
.cd .cd-chip::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, .08) 30%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .15) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.cd .cd-card { border-radius: 26px; }
.cd .cd-banner, .cd .cd-option-detail { border-radius: 18px; }
.cd .cd-card[data-status="delivered"] { box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .35), inset -1px -1px 1px rgba(255, 255, 255, .12), inset 0 0 18px rgba(255, 255, 255, .10), 0 20px 50px rgba(15, 15, 30, .14); }
.cd .cd-media { border-radius: 16px; }
.cd .cd-btn { border-radius: 999px; padding: .55em 1.2em; }
.cd .cd-track { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.cd .cd-chip.active { background: var(--accent); }
.cd .cd-chip.active::before { display: none; }

/* the header photo fades into the colour wash instead of into a flat colour */
.cd .cd-cover { background: transparent; z-index: 1; }
.cd .cd-cover::after { background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 32%); }
.cd .cd-cover img, .cd .cd-cover video {
  -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 50%, transparent 100%);
}

/* the % next to a film counts up: give it a fixed width so the buttons
   beside it don't jump to a new line halfway */
.cd-card-foot .pct { min-width: 4.4ch; font-variant-numeric: tabular-nums; }

/* Watch / Download appear once the bar is full: they rise a touch and come
   into focus, from blurred to sharp, one shortly after the other */
.cd.js-ready .cd-card[data-status="delivered"]:not(.ready) .cd-actions .cd-btn { opacity: 0; }
.cd .cd-card.ready .cd-actions .cd-btn { animation: cd-focus-in .75s cubic-bezier(.22, .61, .36, 1) both; }
.cd .cd-card.ready .cd-actions .cd-btn:nth-child(2) { animation-delay: .12s; }
@keyframes cd-focus-in {
  from { opacity: 0; transform: translateY(8px); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) { .cd .cd-card.ready .cd-actions .cd-btn { animation: none; } }

/* review request: same calm banner, ink text and a button */
.cd-review { border-color: var(--border); }
.cd-review p { color: var(--ink); font-size: calc(.95rem * var(--ts)); line-height: 1.6; margin: 0 0 1rem; }

/* Play on TV: a small glass pill in the top-right of the player */
.cd-cast { position: absolute; top: .8rem; right: .8rem; z-index: 2; display: inline-flex; align-items: center; gap: .45em;
  padding: .45em .9em; border-radius: 999px; cursor: pointer; color: #fff; font: 600 calc(.78rem * var(--ts)) var(--font-text); letter-spacing: .02em;
  border: 1px solid rgba(255, 255, 255, .35);
  background: linear-gradient(140deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, .08));
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .4), 0 6px 18px rgba(0, 0, 0, .25);
  transition: background .2s, transform .2s; }
.cd-cast:hover { background: linear-gradient(140deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .14)); transform: translateY(-1px); }
.cd-cast svg { width: 1.05rem; height: 1.05rem; }
.cd-cast[hidden] { display: none; }
.cd-media video { z-index: 0; }
.cd-still, .cd-play { z-index: 1; }

/* Options with a price: order straight from the page (Mollie) */
.cd-chip-price { opacity: .7; }
.cd-option-detail p { margin: 0; }
.cd-option-detail p + .cd-buy { margin-top: .9rem; }
.cd-buy { margin: 0; display: flex; justify-content: center; }
.cd-paynote { margin-top: 3rem; padding: 1rem 1.2rem; text-align: center; }
.cd-paynote p { margin: 0; font-size: calc(.95rem * var(--ts)); line-height: 1.6; color: var(--ink); }
.cd-paynote + .cd-options { margin-top: 1.6rem; }

/* Before the wedding: countdown, what they booked, options to add. */
.cd-before { margin-bottom: 2.4rem; }
.cd-countdown { margin: 0 0 2rem; text-align: center; font-family: var(--font-names); font-weight: 400; font-size: calc(clamp(2rem, 6vw, 3.2rem) * var(--ns)); line-height: 1.1; }
.cd-booked { text-align: center; }
.cd-booked .cd-section-title { margin-bottom: 1rem; }
.cd-booked h3 { margin: 0 0 .35rem; font-family: var(--font-names); font-weight: 400; font-size: calc(1.7rem * var(--ns)); }
.cd-booked-facts { margin: 0 0 1rem; color: var(--ink-soft); font-size: calc(.92rem * var(--ts)); }
.cd-booked-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.cd-booked-list li { padding: .4rem .9rem; border: 1px solid var(--border); border-radius: 999px; font-size: calc(.9rem * var(--ts)); }
.cd-until { font-size: calc(.85rem * var(--ts)); color: var(--ink-soft); margin-top: -.25rem; }