/* ──────────────────────────────────────────────────────────────
   FlowMotion Entertainment — site stylesheet
   Shared across all pages.
   ────────────────────────────────────────────────────────────── */

html { scroll-behavior: smooth; }
body {
  font-family: 'Manrope', system-ui, sans-serif;
  color: #1B2A4A;
  -webkit-font-smoothing: antialiased;
  background: #fff;
}
h1, h2, h3, h4 { letter-spacing: -0.02em; }
h1 { letter-spacing: -0.03em; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn-pink {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .9rem 1.85rem;
  border-radius: 999px;
  background: #FF3F73;
  color: #fff;
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 8px 22px -8px rgba(255,63,115,.55);
  transition: transform .2s ease, background-color .2s, box-shadow .2s;
}
.btn-pink:hover { background: #E32A5E; transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(255,63,115,.6); }
.btn-pink:active { transform: translateY(0); }

.btn-pink-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .9rem 1.85rem;
  border-radius: 999px;
  background: transparent;
  color: #FF3F73;
  border: 2px solid #FF3F73;
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: all .2s ease;
}
.btn-pink-outline:hover { background: #FF3F73; color: #fff; transform: translateY(-2px); }

/* ── Hero gradient + glows ───────────────────────────────── */
.bg-sky-hero {
  background: linear-gradient(180deg, #3FB6EA 0%, #1F95D2 100%);
}
.sun-rays {
  position: absolute;
  width: 800px; height: 800px;
  background: radial-gradient(circle at center, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 50%);
  border-radius: 50%;
  pointer-events: none;
}

/* ── Soft card ───────────────────────────────────────────── */
.card-soft {
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 4px 14px -3px rgba(27,42,74,.08), 0 14px 40px -16px rgba(27,42,74,.12);
  transition: transform .25s ease, box-shadow .25s;
}
.card-soft:hover { transform: translateY(-4px); box-shadow: 0 8px 22px -3px rgba(27,42,74,.1), 0 24px 50px -16px rgba(27,42,74,.16); }

/* ── Store buttons (App Store / Google Play) on game cards ── */
.btn-store {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #1B2A4A;
  color: #fff;
  font-weight: 600;
  font-size: 11px;
  line-height: 1.1;
  transition: background-color .2s, transform .15s;
  text-decoration: none;
}
.btn-store:hover { background: #2E3A5F; transform: translateY(-1px); }
.btn-store svg { flex-shrink: 0; }
.btn-store__lead {
  font-size: 9px; font-weight: 500; opacity: .85; text-transform: uppercase; letter-spacing: .06em;
  display: block; line-height: 1.1;
}
.btn-store__main { font-size: 13px; font-weight: 700; display: block; line-height: 1.1; margin-top: 1px; }
.btn-store > span:not(.btn-store__lead):not(.btn-store__main) { display: none; }
@media (prefers-color-scheme: dark) {
  .btn-store { background: #2E3A5F; }
  .btn-store:hover { background: #455474; }
}

/* ── Phone mockup ────────────────────────────────────────── */
.phone {
  border-radius: 38px;
  border: 8px solid #1B2A4A;
  background: #1B2A4A;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(27,42,74,.4), 0 20px 40px -12px rgba(31,149,210,.3);
}
.phone-screen { position: relative; overflow: hidden; }

/* ── Animations ──────────────────────────────────────────── */
@keyframes bob   { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-12px) rotate(-1deg); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes pulseSoft { 0%,100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } }
.anim-bob       { animation: bob 5.5s ease-in-out infinite; }
.anim-float     { animation: float 4.5s ease-in-out infinite; }
.anim-pulse-soft { animation: pulseSoft 3s ease-in-out infinite; }

/* ── A11y ────────────────────────────────────────────────── */
a:focus-visible, button:focus-visible {
  outline: 3px solid #FF3F73; outline-offset: 3px; border-radius: 6px;
}
::selection { background: #FF3F73; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .anim-bob, .anim-float, .anim-pulse-soft { animation: none !important; }
}

/* ─────────────────────────────────────────────────────────
   Dark theme (auto from device preference)
   ───────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  body { background-color: #0E1119; color: #E8EBF1; }
  .bg-white { background-color: #0E1119 !important; }
  .bg-sky-mist { background-color: #0B1320 !important; }

  header.bg-white {
    background-color: rgba(14,17,25,.85) !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 0 rgba(255,255,255,.06) !important;
  }

  .card-soft {
    background: #161B27;
    box-shadow: 0 4px 14px -3px rgba(0,0,0,.4), 0 14px 40px -16px rgba(0,0,0,.5);
  }
  .card-soft:hover {
    box-shadow: 0 8px 22px -3px rgba(0,0,0,.45), 0 24px 50px -16px rgba(0,0,0,.6);
  }

  .text-ink { color: #F1F3F8 !important; }
  .text-ink-soft { color: rgba(232,235,241,.65) !important; }

  .border-sky-soft { border-color: rgba(157,216,242,.35) !important; }
}

/* ── Long-form prose (CMS pages, job descriptions) ───────── */
.cms-prose { font-size: 17px; line-height: 1.7; color: #1B2A4A; }
.cms-prose p  { margin: 0 0 1.25em; }
.cms-prose p:last-child { margin-bottom: 0; }
.cms-prose h1 { font-size: 34px; font-weight: 800; letter-spacing: -.02em; margin: 1.6em 0 .5em; }
.cms-prose h2 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin: 1.8em 0 .5em; }
.cms-prose h3 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 1.6em 0 .4em; }
.cms-prose h4 { font-size: 18px; font-weight: 700; margin: 1.4em 0 .3em; }
.cms-prose a  { color: #FF3F73; text-decoration: underline; }
.cms-prose a:hover { color: #E32A5E; }
.cms-prose ul, .cms-prose ol { margin: 0 0 1.25em 1.25em; padding-left: 1em; }
.cms-prose ul { list-style: disc; }
.cms-prose ol { list-style: decimal; }
.cms-prose li { margin-bottom: .4em; }
.cms-prose li > ul, .cms-prose li > ol { margin: .4em 0; }
.cms-prose img { max-width: 100%; border-radius: 12px; margin: 1.25em 0; }
.cms-prose blockquote { border-left: 4px solid #FF3F73; padding-left: 1em; margin: 1.25em 0; color: #5A6478; font-style: italic; }
.cms-prose pre, .cms-prose code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .9em; background: #F4F5F7; }
.cms-prose code { padding: .15em .4em; border-radius: 3px; }
.cms-prose pre  { padding: 1em; border-radius: 8px; overflow-x: auto; margin: 1.25em 0; }
.cms-prose strong, .cms-prose b { font-weight: 700; color: #1B2A4A; }
.cms-prose em, .cms-prose i { font-style: italic; }
/* Quill output classes */
.cms-prose .ql-align-center { text-align: center; }
.cms-prose .ql-align-right  { text-align: right; }
.cms-prose .ql-align-justify { text-align: justify; }
.cms-prose .ql-indent-1 { padding-left: 2em; }
.cms-prose .ql-indent-2 { padding-left: 4em; }
.cms-prose .ql-indent-3 { padding-left: 6em; }
/* Quill 2 wraps both list types in <ol> and uses data-list to distinguish */
.cms-prose ol:has(li[data-list="bullet"]) { list-style: none; }
.cms-prose li[data-list="bullet"]  { list-style: none; }
.cms-prose li[data-list="bullet"]::before { content: "•"; margin-right: .55em; color: #FF3F73; font-weight: 700; }
.cms-prose li[data-list="ordered"] { list-style: decimal inside; }
.cms-prose .ql-ui { display: none; }
@media (prefers-color-scheme: dark) {
  .cms-prose { color: #E8EBF1; }
  .cms-prose strong, .cms-prose b { color: #fff; }
  .cms-prose blockquote { color: rgba(232,235,241,.7); }
  .cms-prose pre, .cms-prose code { background: rgba(255,255,255,.05); }
}

/* ── Loading state for dynamic content ───────────────────── */
.skeleton {
  background: linear-gradient(90deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.08) 50%, rgba(0,0,0,.04) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-color-scheme: dark) {
  .skeleton { background: linear-gradient(90deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.04) 100%); }
}