/* =========================================================
   BEATS v1.8 — PREMIUM designs (Plan 2 Standard + Plan 3 Enterprise)
   Themes: Pink Royale · Royal Chess · Ship Voyage  (Golden Royale lives in extras.css)
   Opening animations: Love pattern unlock · Royal chess move · Ship voyage
   Custom (Enterprise) theme particles.
   Loaded after extras.css.
   ========================================================= */

/* ---------------------------------------------------------
   PINK ROYALE — blush & rose-gold, pink petals falling softly
   --------------------------------------------------------- */
body[data-theme="rose_royale"] {
  --blush:#fdeef3; --cream:#fff8fa; --rose:#c2366f; --wine:#6e1538; --gold:#d9a48c; --ink:#4f2333;
  --line:rgba(194,54,111,.22); --card-tint:rgba(255,255,255,.65); --rose-solid:#bf2f6a; --wine-solid:#6e1538;
  --env-body:#c84d7f; --env-flap:#b23c6c; --env-front:#d65f8f; --env-inner:#6e1538; --seal-bg:#e8b4a0; --seal-fg:#6e1538;
  --card-bg:#fffafb; --card-ink:#6e1538; --card-accent:#c2366f;
  --intro-glyph:"\2740"; --intro-particle:"\2740";
}
html[data-mode="dark"] body[data-theme="rose_royale"] {
  --blush:#24101a; --cream:#180a11; --rose:#f287b2; --wine:#fde0ec; --gold:#ecbba6; --ink:#f7e3eb;
  --line:rgba(242,135,178,.3); --card-tint:rgba(255,255,255,.05); --rose-solid:#d94c86; --wine-solid:#8c1f4c;
  --card-bg:#2a1220; --card-ink:#fde0ec;
}
body[data-theme="rose_royale"] .intro-gate { background: radial-gradient(ellipse at 50% 30%, #fff9fb 0%, #fbd8e5 60%, #f4bcd1 100%); }
html[data-mode="dark"] body[data-theme="rose_royale"] .intro-gate { background: radial-gradient(ellipse at 50% 30%, #4a1a30 0%, #1c0a13 75%); }
body[data-theme="rose_royale"] .intro-env { box-shadow: 0 18px 44px rgba(110,21,56,.35), 0 0 0 2px var(--seal-bg) inset; }
body[data-theme="rose_royale"] .intro-float span::before { color: #e48cb0; text-shadow: 0 0 8px rgba(255,255,255,.6); }
body[data-theme="rose_royale"] .petals {
  background:
    radial-gradient(ellipse 520px 360px at 50% -8%, rgba(242,135,178,.18), transparent 65%),
    radial-gradient(ellipse 420px 300px at 105% 100%, rgba(232,180,160,.16), transparent 60%);
}
body[data-theme="rose_royale"] .drift {
  bottom: auto; top: -40px; border-radius: 80% 0 80% 0;
  width: calc(var(--size, 10px) * 1.3); height: var(--size, 10px);
  background: linear-gradient(135deg, #ffe3ee 0%, #f39bbd 50%, #d4517f 100%);
  box-shadow: 0 0 8px rgba(243,155,189,.35);
  animation: royalePetal var(--dur, 18s) cubic-bezier(.45,.05,.55,.95) infinite;
  animation-delay: var(--delay, 0s);
}
body[data-theme="rose_royale"] .drift:nth-child(3n)   { border-radius: 50% 0 50% 50%; background: linear-gradient(135deg, #fff3ea, #ecbba6 55%, #c98a6e); }
body[data-theme="rose_royale"] .drift:nth-child(4n+1) { animation-name: royalePetalB; }
body[data-theme="rose_royale"] :is(.names, .footer-names) {
  background: linear-gradient(100deg, #b8325f 0%, #f6b7cf 22%, #d9a48c 40%, #b8325f 60%, #f6b7cf 80%, #d9a48c 100%);
  background-size: 220% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: royaleShimmer 7s linear infinite;
}
body[data-theme="rose_royale"] .section-label::after {
  content: ""; display: block; width: 90px; height: 1px; margin: 10px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
body[data-theme="rose_royale"] :is(.rsvp-form button, .reveal-btn, .map-btn, .share-btn.whatsapp) {
  background: linear-gradient(135deg, #e0679a, #c2366f 55%, #9c2557); color: #fff; border-color: #e8b4a0;
}

/* ---------------------------------------------------------
   ROYAL CHESS — ebony & ivory with gold, a faint board behind the page
   --------------------------------------------------------- */
body[data-theme="chess_royale"] {
  --blush:#121212; --cream:#1a1a1a; --rose:#d4b062; --wine:#f4efe4; --gold:#c9a24a; --ink:#e9e4d8;
  --line:rgba(201,162,74,.32); --card-tint:rgba(255,255,255,.04); --rose-solid:#b8913e; --wine-solid:#2a2a2a;
  --env-body:#1d1d1d; --env-flap:#262626; --env-front:#222; --env-inner:#0a0a0a; --seal-bg:#c9a24a; --seal-fg:#111;
  --card-bg:#f4efe4; --card-ink:#151515; --card-accent:#9c7a2c;
  --intro-glyph:"\265B\FE0E"; --intro-particle:"\265A\FE0E";
}
html[data-mode="light"] body[data-theme="chess_royale"] {
  --blush:#f2eee5; --cream:#fbf9f4; --rose:#2a2a2a; --wine:#111111; --gold:#b38b35; --ink:#262626;
  --line:rgba(17,17,17,.18); --card-tint:rgba(255,255,255,.7); --rose-solid:#1f1f1f; --wine-solid:#111;
}
body[data-theme="chess_royale"] .intro-gate {
  background:
    radial-gradient(ellipse at 50% 35%, rgba(201,162,74,.18) 0%, transparent 60%),
    repeating-conic-gradient(#1b1b1b 0 25%, #121212 0 50%) 0 0 / 72px 72px;
}
html[data-mode="light"] body[data-theme="chess_royale"] .intro-gate {
  background:
    radial-gradient(ellipse at 50% 35%, rgba(255,255,255,.85) 0%, rgba(255,255,255,.4) 60%),
    repeating-conic-gradient(#e7e1d3 0 25%, #f7f4ed 0 50%) 0 0 / 72px 72px;
}
body[data-theme="chess_royale"] .intro-eyebrow, body[data-theme="chess_royale"] .intro-hint { color: var(--gold); }
body[data-theme="chess_royale"] .intro-float span::before { color: var(--gold); opacity: .8; }
body[data-theme="chess_royale"] .drift {
  background: none; border-radius: 0; width: auto; height: auto;
  color: rgba(201,162,74,.55); font-size: calc(var(--size, 10px) * 2.1); line-height: 1;
}
body[data-theme="chess_royale"] .drift::before { content: "\265A\FE0E"; }
body[data-theme="chess_royale"] .drift:nth-child(2n)::before { content: "\265B\FE0E"; }
body[data-theme="chess_royale"] .drift:nth-child(3n)::before { content: "\265E\FE0E"; }
body[data-theme="chess_royale"] .drift:nth-child(5n)::before { content: "\265C\FE0E"; }
html[data-mode="light"] body[data-theme="chess_royale"] .drift { color: rgba(17,17,17,.22); }
body[data-theme="chess_royale"] .section-label { letter-spacing: 3px; color: var(--gold); }
body[data-theme="chess_royale"] .section-label::before { content: "\265B\FE0E  "; }
body[data-theme="chess_royale"] .section-label::after { content: "  \265A\FE0E"; }
body[data-theme="chess_royale"] :is(.rsvp-form button, .reveal-btn, .map-btn, .share-btn.whatsapp) {
  background: linear-gradient(135deg, #e6c779, #c9a24a 55%, #9c7a2c); color: #111; border-color: #c9a24a;
}
body[data-theme="chess_royale"] :is(.names, .footer-names) { text-shadow: 0 2px 18px rgba(201,162,74,.28); }
.cs-deco { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.cs-board {
  position: absolute; left: 50%; bottom: -14vh; width: 140vmax; height: 46vh; transform: translateX(-50%) perspective(600px) rotateX(58deg);
  background: repeating-conic-gradient(rgba(201,162,74,.10) 0 25%, transparent 0 50%) 0 0 / 80px 80px;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 95%); mask-image: linear-gradient(to top, #000 10%, transparent 95%);
}
html[data-mode="light"] .cs-board { background: repeating-conic-gradient(rgba(17,17,17,.06) 0 25%, transparent 0 50%) 0 0 / 80px 80px; }
.cs-piece { position: absolute; bottom: 2vh; font-size: 13vh; line-height: 1; color: rgba(201,162,74,.10); }
.cs-piece.k { left: 3vw; } .cs-piece.q { right: 3vw; }
html[data-mode="light"] .cs-piece { color: rgba(17,17,17,.06); }

/* ---------------------------------------------------------
   SHIP VOYAGE — sea blue & sand gold, waves and a sailing ship at the bottom
   --------------------------------------------------------- */
body[data-theme="voyage"] {
  --blush:#e7f2f8; --cream:#f8fcfe; --rose:#14467a; --wine:#0b2a4a; --gold:#d8b26a; --ink:#1d3449;
  --line:rgba(20,70,122,.2); --card-tint:rgba(255,255,255,.65); --rose-solid:#14467a; --wine-solid:#0b2a4a;
  --env-body:#1d5a92; --env-flap:#174c7d; --env-front:#2468a5; --env-inner:#0b2a4a; --seal-bg:#d8b26a; --seal-fg:#0b2a4a;
  --card-bg:#fffdf7; --card-ink:#0b2a4a; --card-accent:#14467a;
  --intro-glyph:"\2693"; --intro-particle:"\2727";
  --sea1:#5aa7d6; --sea2:#1d6aa8; --sail:#fffdf6; --hull:#7a4a24;
}
html[data-mode="dark"] body[data-theme="voyage"] {
  --blush:#0a1826; --cream:#06111c; --rose:#7fb8e6; --wine:#e3f0fa; --gold:#e3c27e; --ink:#d9e7f2;
  --line:rgba(127,184,230,.25); --card-tint:rgba(255,255,255,.05); --rose-solid:#2a73b3; --wine-solid:#0b2a4a;
  --card-bg:#0f2234; --card-ink:#e3f0fa; --sea1:#1b4a72; --sea2:#0d2e4c; --sail:#e9eef3;
}
body[data-theme="voyage"] .intro-gate { background: linear-gradient(180deg, #fdf3e1 0%, #e7f2f8 55%, #cfe6f3 100%); }
html[data-mode="dark"] body[data-theme="voyage"] .intro-gate { background: linear-gradient(180deg, #0b1d33 0%, #0a1826 60%, #06111c 100%); }
body[data-theme="voyage"] .drift { background: radial-gradient(circle, rgba(255,255,255,.9), rgba(120,180,220,.2) 60%, transparent 70%); }
body[data-theme="voyage"] :is(.rsvp-form button, .reveal-btn, .map-btn, .share-btn.whatsapp) {
  background: linear-gradient(135deg, #2468a5, #14467a 60%, #0b2a4a); color: #fff; border-color: #d8b26a;
}
body[data-theme="voyage"] .section-label::after {
  content: ""; display: block; width: 90px; height: 8px; margin: 8px auto 0;
  background: radial-gradient(circle at 6px -2px, transparent 5px, var(--gold) 5.5px 6.5px, transparent 7px) 0 0 / 12px 8px repeat-x;
  opacity: .8;
}
/* fixed sea at the bottom of the page */
.vy-deco { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.vy-sun { position: absolute; right: 8vw; top: 9vh; width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle, #ffe7a8 0%, #f6c96a 55%, rgba(246,201,106,0) 72%); opacity: .55; }
html[data-mode="dark"] .vy-sun { background: radial-gradient(circle, #f4f1e6 0%, #d6dbe2 50%, rgba(214,219,226,0) 72%); opacity: .35; }
.vy-gull { position: absolute; width: 22px; height: 8px; border-top: 2px solid rgba(20,70,122,.35); border-radius: 50% 50% 0 0; animation: vyGull 22s linear infinite; }
.vy-gull::after { content: ""; position: absolute; left: 10px; top: -2px; width: 22px; height: 8px; border-top: 2px solid rgba(20,70,122,.35); border-radius: 50% 50% 0 0; }
.vy-gull.g1 { top: 14vh; } .vy-gull.g2 { top: 20vh; animation-delay: -11s; animation-duration: 28s; }
html[data-mode="dark"] .vy-gull, html[data-mode="dark"] .vy-gull::after { border-color: rgba(220,235,250,.25); }
@keyframes vyGull { from { left: -40px; transform: translateY(0); } 50% { transform: translateY(-14px); } to { left: 105vw; transform: translateY(0); } }
.vy-sea { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; }
.vy-wave { position: absolute; left: 0; bottom: 0; width: 200%; height: 46px; animation: vyWave 14s linear infinite; }
.vy-wave path { fill: var(--sea1); }
.vy-wave.w1 { opacity: .35; bottom: 10px; }
.vy-wave.w2 { opacity: .5; animation-duration: 9s; animation-direction: reverse; }
.vy-wave.w2 path { fill: var(--sea2); }
@keyframes vyWave { to { transform: translateX(-50%); } }
.vy-boat { position: absolute; bottom: 18px; left: -70px; width: 46px; height: 40px; animation: vySail 48s linear infinite; opacity: .8; }
.vy-boat svg, .vy-iboat svg { width: 100%; height: 100%; overflow: visible; animation: vyBob 3s ease-in-out infinite; }
.vy-boat .sail1, .vy-iboat .sail1, .vy-boat .sail2, .vy-iboat .sail2 { fill: var(--sail); stroke: rgba(11,42,74,.35); stroke-width: 1; }
.vy-boat .mast, .vy-iboat .mast { stroke: var(--hull); stroke-width: 2; }
.vy-boat .hull, .vy-iboat .hull { fill: var(--hull); }
.vy-boat .flag, .vy-iboat .flag { fill: var(--gold); }
@keyframes vySail { to { left: calc(100vw + 70px); } }
@keyframes vyBob { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-4px) rotate(3deg); } }
body[data-theme="voyage"] footer, body[data-theme="voyage"] .footer { padding-bottom: 70px; }

/* keep page content above the decorations */
body:is([data-theme="voyage"], [data-theme="chess_royale"]) :is(main, section, header, footer, .container) { position: relative; z-index: 1; }

/* ---------------------------------------------------------
   CUSTOM theme (Enterprise) — particle styles picked in the JSON
   --------------------------------------------------------- */
body[data-theme="custom"] .drift { background: radial-gradient(circle, var(--ct-particle, var(--gold)), transparent 70%); }
body[data-theme="custom"]:is([data-particles="hearts"], [data-particles="stars"], [data-particles="sparkles"], [data-particles="flowers"], [data-particles="snow"], [data-particles="leaves"]) .drift {
  background: none; width: auto; height: auto; border-radius: 0; color: var(--ct-particle, var(--gold));
  font-size: calc(var(--size, 10px) * 1.7); line-height: 1; text-shadow: 0 0 8px rgba(255,255,255,.35);
}
body[data-theme="custom"]:is([data-particles="petals"], [data-particles="stars"], [data-particles="flowers"], [data-particles="snow"], [data-particles="confetti"], [data-particles="leaves"]) .drift {
  bottom: auto; top: -40px; animation: royalePetal var(--dur, 18s) cubic-bezier(.45,.05,.55,.95) infinite; animation-delay: var(--delay, 0s);
}
body[data-theme="custom"][data-particles="petals"] .drift {
  border-radius: 80% 0 80% 0; width: calc(var(--size, 10px) * 1.3); height: var(--size, 10px);
  background: linear-gradient(135deg, rgba(255,255,255,.85), var(--ct-particle) 55%);
}
body[data-theme="custom"][data-particles="petals"] .drift:nth-child(4n+1) { animation-name: royalePetalB; }
body[data-theme="custom"][data-particles="confetti"] .drift { border-radius: 2px; width: var(--size, 10px); height: calc(var(--size, 10px) * .5); background: var(--ct-particle); }
body[data-theme="custom"][data-particles="confetti"] .drift:nth-child(3n) { background: var(--rose); }
body[data-theme="custom"][data-particles="confetti"] .drift:nth-child(3n+1) { background: var(--gold); }
body[data-theme="custom"][data-particles="bubbles"] .drift { background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.9), transparent 35%), radial-gradient(circle, transparent 55%, var(--ct-particle) 70%, transparent 72%); width: calc(var(--size, 10px) * 1.6); height: calc(var(--size, 10px) * 1.6); }
body[data-theme="custom"][data-names="shimmer"] :is(.names, .footer-names) {
  background: linear-gradient(100deg, var(--wine) 0%, var(--gold) 25%, var(--rose) 45%, var(--wine) 60%, var(--gold) 80%, var(--rose) 100%);
  background-size: 220% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: royaleShimmer 7s linear infinite;
}
body[data-theme="custom"][data-names="glow"] :is(.names, .footer-names) { text-shadow: 0 0 18px var(--gold), 0 0 4px rgba(255,255,255,.4); }

/* =========================================================
   OPENING ANIMATION — LOVE PATTERN UNLOCK  (heartlock)
   A lock screen with dots around a heart. Swipe across them (or tap): the heart draws itself,
   the padlock opens and the couple icon appears.
   ========================================================= */
.hl-stage { width: min(78vw, 300px); display: flex; flex-direction: column; align-items: center; }
.hl-phone {
  position: relative; width: 100%; padding: 18px 18px 22px; border-radius: 34px;
  background: linear-gradient(160deg, rgba(255,255,255,.55), rgba(255,255,255,.18));
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 24px 50px rgba(0,0,0,.22), 0 0 0 6px rgba(0,0,0,.06);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  animation: hlFloat 4s ease-in-out infinite;
}
html[data-mode="dark"] .hl-phone { background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.03)); border-color: rgba(255,255,255,.15); }
@keyframes hlFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.hl-lock { width: 30px; height: 36px; margin: 0 auto 6px; color: var(--rose); }
.hl-lock svg { width: 100%; height: 100%; overflow: visible; }
.hl-lock rect { fill: currentColor; }
.hl-lock .hl-key { fill: var(--cream); }
.hl-shackle { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; transform-origin: 18px 13px; transition: transform .5s cubic-bezier(.3,1.6,.5,1); }
.hl-pad { position: relative; width: 100%; aspect-ratio: 1; touch-action: none; cursor: crosshair; outline: none; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.hl-pad:focus-visible { box-shadow: 0 0 0 3px var(--gold); border-radius: 16px; }
.hl-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hl-fill { fill: var(--rose); opacity: 0; transform-origin: 50% 50%; }
.hl-trace { fill: none; stroke: var(--rose); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.hl-heart { fill: none; stroke: var(--rose); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .9; }
.hl-dot {
  position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--cream); border: 2px solid var(--rose); box-shadow: 0 0 0 0 rgba(0,0,0,0);
  transition: transform .2s, background .2s, box-shadow .2s;
  animation: hlHint 3.6s ease-in-out infinite; animation-delay: var(--d);
}
.hl-dot::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; }   /* bigger touch target */
@keyframes hlHint { 0%, 60%, 100% { transform: scale(1); } 70% { transform: scale(1.35); background: var(--gold); } }
.hl-dot.on { background: var(--rose); transform: scale(1.3); box-shadow: 0 0 0 6px color-mix(in srgb, var(--rose) 22%, transparent); animation: none; }
.hl-couple {
  position: absolute; left: 50%; top: 47%; width: 46%; transform: translate(-50%, -50%) scale(.3);
  display: flex; flex-direction: column; align-items: center; opacity: 0; color: #fff; pointer-events: none;
}
.hl-couple-svg { width: 100%; fill: currentColor; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.hl-couple-svg .hl-mini { fill: var(--gold); }
.hl-ini { margin-top: 2px; font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: 2px; white-space: nowrap; }
.intro-card.free.hl-card { top: auto; bottom: -10%; width: 112%; transform: translate(-50%, 0) scale(.6); pointer-events: none; }
.hl-stage .intro-card.free { pointer-events: none; }
/* opening timeline */
.intro-gate.opening .hl-phone { animation: none; transform: translateY(-16%) scale(.88); transition: transform .8s cubic-bezier(.3,.8,.3,1) 1.9s; }
.intro-gate.opening .hl-dot { background: var(--rose); animation: hlDotOn .35s ease-out both; animation-delay: var(--d); }
@keyframes hlDotOn { 50% { transform: scale(1.6); } 100% { transform: scale(1.15); } }
.intro-gate.opening .hl-heart { animation: hlDraw .9s ease-in-out .1s forwards; }
@keyframes hlDraw { to { stroke-dashoffset: 0; } }
.intro-gate.opening .hl-trace { transition: opacity .4s .5s; opacity: 0; }
.intro-gate.opening .hl-fill { animation: hlFill .7s cubic-bezier(.3,1.5,.5,1) 1s forwards; }
@keyframes hlFill { 0% { opacity: 0; transform: scale(.6); } 100% { opacity: 1; transform: scale(1); } }
.intro-gate.opening .hl-shackle { transform: translateY(-5px) rotate(28deg); transition-delay: 1.15s; }
.intro-gate.opening .hl-lock { animation: hlLockOut .5s ease-in 1.6s forwards; }
@keyframes hlLockOut { to { opacity: 0; transform: translateY(-10px) scale(.8); } }
.intro-gate.opening .hl-dot { transition: opacity .4s 1.3s; opacity: 0; }
.intro-gate.opening .hl-couple { animation: hlCouple .8s cubic-bezier(.2,1.4,.4,1) 1.35s forwards; }
@keyframes hlCouple { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.intro-gate.opening .intro-card.free.hl-card { animation: hlCardIn .8s cubic-bezier(.2,.9,.3,1) 2s both; }
@keyframes hlCardIn { from { opacity: 0; transform: translate(-50%, 10%) scale(.6); } to { opacity: 1; transform: translate(-50%, 0) scale(.86); } }

/* =========================================================
   OPENING ANIMATION — ROYAL CHESS MOVE  (chess)
   The king glides square by square to his queen: checkmate, with love.
   ========================================================= */
.ch-stage { width: min(80vw, 300px); display: flex; flex-direction: column; align-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; position: relative; }
.ch-board {
  --sq: calc((min(80vw, 300px) - 12px) / 5);
  position: relative; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr); width: 100%; aspect-ratio: 1; box-sizing: border-box;
  border: 6px solid #3a2a12; border-radius: 6px; overflow: visible;
  box-shadow: 0 0 0 2px var(--gold), 0 26px 50px rgba(0,0,0,.35);
  transform: perspective(900px) rotateX(18deg); transform-origin: 50% 100%;
  transition: transform .9s ease;
}
.ch-board i { display: block; position: relative; }
.ch-board i.lt { background: #f1e6cc; }
.ch-board i.dk { background: #8a6a3a; }
.ch-board i.tr::after { content: ""; position: absolute; inset: 0; background: rgba(232,196,104,.0); transition: background .3s; }
.ch-board i.t3::before { content: ""; position: absolute; inset: 32%; border-radius: 50%; background: rgba(201,162,74,.65); animation: chTarget 1.6s ease-in-out infinite; }
@keyframes chTarget { 50% { transform: scale(1.4); opacity: .4; } }
.ch-piece {
  position: absolute; width: var(--sq); height: var(--sq); display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--sq) * .82); line-height: 1; font-family: "Segoe UI Symbol", "Apple Symbols", "DejaVu Sans", "Noto Sans Symbols 2", serif;
  color: #1b140a; text-shadow: 0 0 1px #fff6dc, 0 2px 0 #e8c468, 0 6px 10px rgba(0,0,0,.45);
  z-index: 3;
}
.ch-queen { left: calc(var(--sq) * 4); top: 0; color: #fff8e6; text-shadow: 0 0 1px #2a1f08, 0 2px 0 #c9a24a, 0 6px 10px rgba(0,0,0,.45); animation: chBob 2.6s ease-in-out infinite; }
.ch-king  { left: 0; top: calc(var(--sq) * 4); animation: chBob 2.6s ease-in-out -1.3s infinite; }
@keyframes chBob { 0%,100% { margin-top: 0; } 50% { margin-top: -4px; } }
.ch-heart {
  position: absolute; left: calc(var(--sq) * 3.5); top: calc(var(--sq) * .5); width: var(--sq); height: var(--sq);
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--sq) * .7); color: #e0457b; opacity: 0; transform: scale(.2); z-index: 4;
  text-shadow: 0 0 14px rgba(255,255,255,.8);
}
.ch-mate {
  margin-top: 16px; font-family: 'Cinzel', serif; font-size: 20px; letter-spacing: 4px; color: var(--gold);
  opacity: 0; transform: translateY(8px); text-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.intro-card.free.ch-card { top: 42%; width: 112%; --cd: 2.15s; }
/* opening timeline: three diagonal hops (b1 -> c2 -> d3 -> e4 in board terms) */
.intro-gate.opening .ch-board i.t3::before { animation: none; opacity: 0; }
.intro-gate.opening .ch-king { animation: chMove 1.5s cubic-bezier(.5,0,.3,1) .1s forwards; }
@keyframes chMove {
  0%   { transform: translate(0, 0) scale(1); }
  14%  { transform: translate(calc(var(--sq) * .5), calc(var(--sq) * -.6)) scale(1.18); }
  28%  { transform: translate(var(--sq), calc(var(--sq) * -1)) scale(1); }
  42%  { transform: translate(calc(var(--sq) * 1.5), calc(var(--sq) * -1.6)) scale(1.18); }
  60%  { transform: translate(calc(var(--sq) * 2), calc(var(--sq) * -2)) scale(1); }
  76%  { transform: translate(calc(var(--sq) * 2.5), calc(var(--sq) * -2.6)) scale(1.2); }
  100% { transform: translate(calc(var(--sq) * 3), calc(var(--sq) * -3)) scale(1); }
}
.intro-gate.opening .ch-board i.t1::after { animation: chTrail .9s ease-out .3s both; }
.intro-gate.opening .ch-board i.t2::after { animation: chTrail .9s ease-out .7s both; }
.intro-gate.opening .ch-board i.t3::after { animation: chTrail 1.2s ease-out 1.15s both; }
@keyframes chTrail { 0% { background: rgba(232,196,104,0); } 30% { background: rgba(232,196,104,.75); } 100% { background: rgba(232,196,104,.25); } }
.intro-gate.opening .ch-queen { animation: chQueen .6s ease-out 1.5s both; }
@keyframes chQueen { 50% { transform: translateY(-6px) rotate(-8deg); } 100% { transform: translateY(0) rotate(-4deg); } }
.intro-gate.opening .ch-heart { animation: chHeart .9s cubic-bezier(.2,1.6,.4,1) 1.6s forwards; }
@keyframes chHeart { 0% { opacity: 0; transform: scale(.2); } 60% { opacity: 1; transform: scale(1.4) translateY(-10px); } 100% { opacity: 1; transform: scale(1.1) translateY(-14px); } }
.intro-gate.opening .ch-mate { transition: opacity .5s 1.75s, transform .5s 1.75s; opacity: 1; transform: none; }
.intro-gate.opening .ch-board { transform: perspective(900px) rotateX(48deg) scale(.92); transition-delay: 1.95s; }

/* =========================================================
   OPENING ANIMATION — SHIP VOYAGE  (voyage)
   A little ship bobs on the waves; tap and it sails away while the card rises from the sea.
   ========================================================= */
.vy-stage { position: relative; width: min(86vw, 400px); aspect-ratio: 4 / 3; cursor: pointer; -webkit-tap-highlight-color: transparent; overflow: hidden; border-radius: 22px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cream) 80%, #ffe2b0) 0%, var(--cream) 55%, color-mix(in srgb, var(--blush) 70%, #9fd0ec) 100%);
  box-shadow: 0 22px 46px rgba(0,0,0,.22);
  --sea1: #6fb5df; --sea2: #1d6aa8; --sail: #fffdf6; --hull: #7a4a24;
}
html[data-mode="dark"] .vy-stage { background: linear-gradient(180deg, #13294a 0%, #0c1c31 60%, #0a1626 100%); --sea1: #1f5583; --sea2: #0f3558; }
.vy-isun { position: absolute; left: 50%; top: 58%; width: 90px; height: 90px; margin-left: -45px; border-radius: 50%;
  background: radial-gradient(circle, #fff1c7 0%, #f7c55e 55%, rgba(247,197,94,0) 72%); opacity: .9; transition: top 1.6s ease-out .2s; }
html[data-mode="dark"] .vy-isun { background: radial-gradient(circle, #fbfaf3 0%, #d9dee6 50%, rgba(217,222,230,0) 72%); }
.vy-igull { position: absolute; top: 18%; width: 18px; height: 7px; border-top: 2px solid rgba(20,50,80,.5); border-radius: 50% 50% 0 0; animation: vyIGull 7s linear infinite; }
.vy-igull::after { content: ""; position: absolute; left: 8px; top: -2px; width: 18px; height: 7px; border-top: 2px solid rgba(20,50,80,.5); border-radius: 50% 50% 0 0; }
.vy-igull.b { top: 26%; animation-delay: -3.5s; animation-duration: 9s; }
html[data-mode="dark"] .vy-igull, html[data-mode="dark"] .vy-igull::after { border-color: rgba(230,240,250,.45); }
@keyframes vyIGull { from { left: -30px; } 50% { transform: translateY(-8px); } to { left: 105%; } }
.vy-isea { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; }
.vy-iwave { position: absolute; left: 0; width: 200%; animation: vyWave 7s linear infinite; }
.vy-iwave path { fill: var(--sea1); }
.vy-iwave.back { bottom: 34%; height: 40%; opacity: .7; }
.vy-iwave.front { bottom: 0; height: 66%; animation-duration: 5s; animation-direction: reverse; z-index: 4; }
.vy-iwave.front path { fill: var(--sea2); }
.vy-iboat { position: absolute; left: 26%; bottom: 44%; width: 78px; height: 68px; z-index: 3; transition: left 1.6s cubic-bezier(.5,0,.6,1); }
.intro-card.free.vy-card { top: 46%; width: 74%; z-index: 2; }
/* opening timeline */
.intro-gate.opening .vy-iboat { left: 115%; }
.intro-gate.opening .vy-iboat svg { animation-duration: 1s; }
.intro-gate.opening .vy-isun { top: 6%; }
.intro-gate.opening .intro-card.free.vy-card { animation: vyRise 1.2s cubic-bezier(.2,.9,.3,1) .9s both; }
@keyframes vyRise {
  0%   { opacity: 0; transform: translate(-50%, 40%) scale(.7); }
  60%  { opacity: 1; transform: translate(-50%, -56%) scale(1.02); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  body[data-theme="rose_royale"] .drift, body[data-theme="custom"] .drift { display: none; }
  body[data-theme="rose_royale"] :is(.names, .footer-names), body[data-theme="custom"] :is(.names, .footer-names) { animation: none !important; }
  .vy-wave, .vy-boat, .vy-gull, .vy-boat svg, .hl-phone, .hl-dot, .ch-king, .ch-queen, .ch-board i.t3::before, .vy-iwave, .vy-igull, .vy-iboat svg { animation: none !important; }
}