/* The World's Best Tarot Reader: one animated page. Built from mockup 10 ("Zodiac Wheel").
   Everything is self-hosted. No inline styles anywhere (the CSP allows style-src 'self' only). */

/* ---------- Fonts ---------- */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500 700; font-display: swap; src: url("../fonts/cormorant-garamond.woff2") format("woff2"); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/cormorant-garamond-italic.woff2") format("woff2"); }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/spectral-300.woff2") format("woff2"); }
@font-face { font-family: 'Spectral'; font-style: italic; font-weight: 300; font-display: swap; src: url("../fonts/spectral-300-italic.woff2") format("woff2"); }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/spectral-400.woff2") format("woff2"); }
@font-face { font-family: 'Pinyon Script'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/pinyon-script.woff2") format("woff2"); }
/* Zodiac signs, planets and ✦, cut from DejaVu Sans so they look the same on every device (see LICENSE-DejaVu.txt) */
@font-face { font-family: 'WBTR Symbols'; font-style: normal; font-weight: 400; font-display: block; src: url("../fonts/wbtr-symbols.woff") format("woff");
             unicode-range: U+2609, U+263D, U+263F-2640, U+2642-2644, U+2648-2653, U+2726; }

:root {
  --night: #0b1024; --gold: #d7b78e; --gold-hot: #f3d9a8; --rose: #e3a6b4; --mist: #c9d3ff; --ink: #f4ecdc;
  --reveal-bg: #f3e6cc; --reveal-fg: #1b1430;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --text: 'Spectral', Georgia, serif;
  --sym: 'WBTR Symbols', 'Spectral', Georgia, serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { overflow: hidden; -webkit-font-smoothing: antialiased; color: var(--ink); font-family: var(--text);
       background: var(--night) radial-gradient(ellipse at 50% 42%, #233063 0%, #1a2246 35%, var(--night) 75%) fixed; }
a { color: inherit; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

canvas#sky { position: fixed; inset: 0; width: 100%; height: 100%; }
.stage { position: fixed; inset: 0; pointer-events: none; }

/* ---------- The great zodiac wheel: always there, slowly turning, drifting in and out of focus ---------- */
.great { position: fixed; left: 50%; top: 50%; width: min(96vmin, 860px); transform: translate(-50%, -50%); pointer-events: none; opacity: .4;
         animation: breathe 18s ease-in-out infinite; }
.great .spin { animation-duration: 300s; }
.great .glyph { font-size: 6.2px; }
.great .glyph.lit { fill: #fff6e2; font-size: 7.4px; }
@keyframes breathe { 0%, 100% { filter: blur(5px); opacity: .22; } 45%, 60% { filter: blur(0) drop-shadow(0 0 2px rgba(255,236,200,.5)); opacity: .5; } }
.halo { position: fixed; left: 50%; top: 50%; width: min(60vmin, 560px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
        background: radial-gradient(circle, rgba(14,19,44,.85) 30%, rgba(14,19,44,0) 70%); pointer-events: none; }

/* ---------- Title: a small "The" centred on its own line, then "World's Best", then "Tarot Reader" ---------- */
.hero { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; text-align: center; width: max-content; max-width: calc(100% - 32px); }
.title { margin: 0; text-align: center; font-family: var(--serif); font-weight: 600; line-height: .98; }
.title .l1, .title .l2 { display: block; white-space: nowrap;
  background: linear-gradient(180deg, #fff6e2, var(--gold) 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.title .l1 { font-size: clamp(46px, 7.4vw, 104px); }
.title .l2 { font-size: clamp(40px, 6.2vw, 88px); letter-spacing: .04em; }
.title .the { display: block; font: 400 .52em/1 'Pinyon Script', cursive; color: var(--rose); -webkit-text-fill-color: var(--rose); margin: 0 0 -.02em; }

/* ---------- The "Who is she?" seal ---------- */
.seal { display: inline-grid; place-items: center; width: clamp(140px, 19vh, 178px); aspect-ratio: 1; border-radius: 50%;
        position: relative; text-decoration: none; color: #1b1430; margin-top: 18px; -webkit-tap-highlight-color: transparent; }
/* Counter-clockwise: the words travel the way they read, so "Who is she?" is easy to follow */
.seal .ring { position: absolute; inset: 0; animation: spin 18s linear infinite reverse; }
.seal .ring text { font: 600 9.6px var(--text); letter-spacing: .26em; fill: var(--gold-hot); text-transform: uppercase; }
.seal .core { width: 56%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font: 28px var(--sym);
              background: radial-gradient(circle at 35% 30%, #fff1d2, var(--gold-hot) 35%, #b8925c);
              animation: halo 3.2s ease-in-out infinite; transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.seal:hover .core, .seal:focus-visible .core { transform: scale(1.12); }
.seal:hover .ring, .seal:focus-visible .ring { animation-duration: 5s; }
.seal:focus-visible { outline: 2px solid var(--gold-hot); outline-offset: 6px; }
@keyframes halo { 0%, 100% { box-shadow: 0 0 30px rgba(243,217,168,.35); } 50% { box-shadow: 0 0 70px rgba(243,217,168,.7); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Bottom ribbon of one-line quotes ---------- */
.ribbon { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; overflow: hidden; white-space: nowrap; padding: 12px 0 calc(14px + env(safe-area-inset-bottom));
          border-top: 1px solid rgba(215,183,142,.35); background: rgba(11,16,36,.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
          font: italic 300 clamp(14px, 1.5vw, 16px)/1.2 var(--text); color: rgba(244,236,220,.85); }
.ribbon .track { display: inline-block; animation: slide 170s linear infinite; }
.ribbon cite { font: italic 600 1.45em/1 var(--serif); color: var(--gold); margin-left: .5em; vertical-align: -.08em; }
.ribbon .sep { font-family: var(--sym); color: var(--rose); margin: 0 1.6em; font-style: normal; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- Sky art: everything starts out of focus and drifts into it ---------- */
.ap { position: absolute; pointer-events: none; overflow: visible; opacity: 0;
      filter: blur(14px) drop-shadow(0 0 0 rgba(255,240,210,0)); transform: scale(1.08);
      transition: opacity 2.6s ease, filter 3s ease, transform 4s ease; }
.ap.in  { opacity: var(--ap-op, .8); filter: blur(0) drop-shadow(0 0 3px rgba(255,240,210,.45)); transform: scale(1); }
.ap.out { opacity: 0; filter: blur(10px) drop-shadow(0 0 0 rgba(255,240,210,0)); transform: scale(.97); transition-duration: 3s, 3s, 3s; }

.constellation line { stroke: rgba(201,211,255,.6); stroke-width: .7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s ease; }
.constellation.in line { stroke-dashoffset: 0; }
.constellation circle { fill: #fff8e8; opacity: 0; transition: opacity 1.2s ease; }
.constellation.in circle { opacity: 1; }
.constellation circle.bright { animation: twinkle 2.8s ease-in-out infinite; }
.constellation .label { font: 400 7.6px var(--sym); letter-spacing: 2.4px; fill: var(--gold); text-anchor: middle; opacity: 0; transition: opacity 1.6s ease; }
.constellation.in .label { opacity: .95; }
@keyframes twinkle { 50% { opacity: .55; } }

.wheel .ring  { fill: none; stroke: rgba(215,183,142,.45); stroke-width: .35; }
.wheel .tick  { stroke: rgba(215,183,142,.4); stroke-width: .25; }
.wheel .spoke { stroke: rgba(215,183,142,.3); stroke-width: .3; }
.wheel .glyph { font: 7px var(--sym); fill: var(--gold); text-anchor: middle; transition: fill 1.2s, font-size 1.2s; }
.wheel .house { font: italic 3.4px var(--serif); fill: rgba(201,211,255,.5); text-anchor: middle; }
.wheel .hub   { fill: var(--gold-hot); }
.spin { transform-box: fill-box; transform-origin: 50% 50%; animation: spin 240s linear infinite; }

/* ---------- A review "written" beside its mini constellation ---------- */
/* Width tracks the space beside the title (about 31vw each side), so cards fit on laptops as well as big screens */
.sw { display: flex; align-items: center; gap: 14px; width: clamp(260px, calc(31vw - 52px), 352px); pointer-events: none;
      transform: translate(0, 0); transition: transform 16s linear, opacity 2.4s ease, filter 2.4s ease; }
.sw.flip { flex-direction: row-reverse; }
.sw.in { transform: translate(var(--dx), var(--dy)); }
.sw.out { opacity: 0; filter: blur(10px); transform: translate(calc(var(--dx) * 1.3), calc(var(--dy) * 1.3)); }
.sw .ap { position: static; flex: none; }
.sw p { margin: 0; font: italic 500 clamp(18px, 1.5vw, 21px)/1.4 var(--serif); color: var(--ink); text-shadow: 0 0 16px rgba(11,16,36,.95); }
.sw .w { opacity: 0; filter: blur(6px); transition: opacity 1s ease, filter 1.2s ease; transition-delay: calc(var(--wstart, 1.6s) + var(--i) * var(--wstep, .075s)); }
.sw.in .w { opacity: 1; filter: blur(0); }
.sw cite { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-style: normal; opacity: 0;
           transition: opacity 1.4s ease; transition-delay: var(--citeDelay, 4s); }
.sw.in cite { opacity: 1; }
.sw cite::before { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.sw cite .star { font: 13px var(--sym); color: var(--rose); }
.sw cite .ini { font: italic 600 clamp(28px, 2.3vw, 34px)/1 var(--serif); color: var(--gold); text-shadow: 0 0 18px rgba(243,217,168,.35); }
.sw .constellation .label { font-size: 10px; letter-spacing: 2px; }

/* ---------- The reveal: a circle blooms out of the button, "Her name is…", then her site ---------- */
.reveal { position: fixed; inset: 0; z-index: 9000; pointer-events: none; display: grid; place-items: center;
  background: var(--reveal-bg); color: var(--reveal-fg);
  clip-path: circle(0 at var(--rx) var(--ry)); transition: clip-path 1s cubic-bezier(.7,0,.3,1); }
.reveal.go { clip-path: circle(150vmax at var(--rx) var(--ry)); }
.reveal span { font: italic 500 clamp(30px, 6vw, 60px) var(--serif); opacity: 0; letter-spacing: .3em;
  transition: opacity .8s .55s, letter-spacing 1.4s .55s; }
.reveal.go span { opacity: 1; letter-spacing: .04em; }

/* ---------- The reviews as plain text: for screen readers, search engines and no-JavaScript visitors ---------- */
.reviews-list figure { margin: 0; }

/* ---------- Phones ---------- */
@media (max-width: 600px) {
  /* Title and a small "Who is she?" seal sit low, just above the ribbon; the sky above holds one large review */
  .hero { top: auto; bottom: calc(50px + env(safe-area-inset-bottom)); transform: translateX(-50%); }
  .title .l1 { font-size: clamp(42px, 11.5vw, 52px); }
  .title .l2 { font-size: clamp(36px, 9.8vw, 44px); }
  .seal { width: 92px; margin-top: 4px; }
  .seal .core { font-size: 17px; }
  .seal .ring text { font-size: 11.5px; letter-spacing: .2em; }
  .sw { flex-direction: row !important; gap: 10px; width: calc(100vw - 48px); }
  .sw p { font-size: 19px; line-height: 1.38; }
  .sw cite { margin-top: 8px; }
  .sw cite .ini { font-size: 28px; }
  .sw .constellation .label { font-size: 12px; }
  /* Keep the wheel and its dark halo centred on the (now lower) title */
  .great, .halo { top: calc(100% - 158px - env(safe-area-inset-bottom)); }
}
/* ---------- Phones held upright: one review at a time, always in the same place (main.js builds .slot) ----------
   Centred in the sky above the title; a large drawing of its constellation on top; the words across 80% of the width. */
.slot { position: fixed; left: 0; right: 0; top: calc(14px + env(safe-area-inset-top)); bottom: var(--slot-bottom, 45%);
        display: grid; place-items: center; pointer-events: none; z-index: 3; }
.slot .sw { grid-area: 1 / 1; width: 80vw !important; flex-direction: column !important; align-items: center; gap: 4px;
            text-align: center; --dx: 0px; --dy: -8px; }
.slot .sw p { font-size: clamp(17px, 2.5vh, 21px); line-height: 1.4; }
.slot .sw cite { justify-content: center; margin-top: 10px; }
.slot .sw cite::after { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); }
.slot .sw cite .ini { font-size: 30px; }
.slot .sw .constellation .label { font-size: 9.5px; letter-spacing: 3px; }
.slot .sw.tight p { font-size: 16px; line-height: 1.35; }
.slot .sw.tight .ap { width: 96px !important; }

/* Short screens (phones held sideways) */
@media (max-height: 520px) {
  .hero { top: 46%; }
  .title .l1 { font-size: min(7.4vw, 14vh); }
  .title .l2 { font-size: min(6.2vw, 12vh); }
  .seal { width: 112px; margin-top: 6px; }
  .seal .core { font-size: 20px; }
  .ribbon { padding-top: 8px; padding-bottom: 8px; }
  /* Compact, text-only review cards so they fit beside the title */
  .sw { width: min(230px, 28vw); }
  .sw .ap { display: none; }
  .sw p { font-size: 15px; line-height: 1.35; }
  .sw cite { margin-top: 6px; }
  .sw cite .ini { font-size: 22px; }
}

/* ---------- Without JavaScript: a plain, readable page ---------- */
.no-js body { overflow: auto; }
.no-js .hero { position: static; transform: none; margin: 12vh auto 6vh; }
.no-js .reviews-list { position: static !important; width: auto; height: auto; margin: 0 auto 10vh; clip: auto; white-space: normal; overflow: visible;
                       max-width: 620px; padding: 0 16px; display: grid; gap: 28px; }
.no-js .reviews-list blockquote { margin: 0; font: italic 500 20px/1.45 var(--serif); }
.no-js .reviews-list figcaption { margin-top: 6px; font: italic 600 26px var(--serif); color: var(--gold); }
.no-js .ribbon, .no-js .halo { display: none; }

/* ---------- Reduced motion: the same page, calm. Things fade; nothing travels, spins or blurs ---------- */
@media (prefers-reduced-motion: reduce) {
  .great { animation: none; filter: none; opacity: .32; }
  .spin, .seal .ring, .seal .core, .ribbon .track, .constellation circle.bright { animation: none; }
  .ap, .ap.in, .ap.out, .sw, .sw.in, .sw.out { transform: none; filter: none; transition: opacity 1.6s ease; }
  .sw .w { opacity: 1; filter: none; transition: none; }
  .sw cite { transition: opacity 1.6s ease; transition-delay: 0s; }
  .constellation line { transition: none; stroke-dashoffset: 0; }
  .ribbon { text-align: center; text-overflow: ellipsis; }  /* main.js shows a single quote here */
}

/* ---------- 404 ---------- */
.lost-the { margin: 0 0 6px; font: 400 clamp(28px, 4vw, 44px)/1 'Pinyon Script', cursive; color: var(--rose); }
.lost .title .l1 { font-size: clamp(40px, 6vw, 80px); }
.lost-text { margin: 18px 0 30px; font: italic 300 18px var(--text); color: rgba(244,236,220,.8); }
.lost-link { display: inline-block; padding: 14px 30px; border: 1px solid var(--gold); border-radius: 999px; text-decoration: none;
             font: 600 18px var(--serif); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-hot); }
.lost-link:hover, .lost-link:focus-visible { background: rgba(215,183,142,.12); }

/* ---------- Tagline under the title (visible text for visitors and search engines) ---------- */
.tagline { margin: 10px 0 0; font: italic 300 clamp(14px, 1.45vw, 18px)/1.3 var(--text); letter-spacing: .04em; color: rgba(244,236,220,.78); }
@media (max-width: 600px) { .tagline { margin-top: 6px; font-size: 13.5px; } }
@media (max-height: 520px) { .tagline { margin-top: 4px; font-size: 13px; } }

/* ---------- Small "Privacy" link, sitting on the right end of the ribbon ---------- */
.foot { position: fixed; right: 0; bottom: 0; z-index: 6; padding: 0 14px calc(13px + env(safe-area-inset-bottom)) 34px;
        background: linear-gradient(90deg, rgba(11,16,36,0), rgba(11,16,36,.95) 26px); }
.foot a { font: 400 11px var(--text); letter-spacing: .14em; text-transform: uppercase; color: rgba(215,183,142,.75); text-decoration: none; }
.foot a:hover, .foot a:focus-visible { color: var(--gold-hot); text-decoration: underline; }
.no-js .foot { position: static; background: none; text-align: center; padding: 0 0 6vh; }

/* ---------- Text pages (privacy) ---------- */
body.doc { overflow: auto; }
.doc-box { max-width: 640px; margin: 0 auto; padding: clamp(40px, 9vh, 90px) 22px 70px; }
.doc-the { margin: 0; font: 400 clamp(24px, 4vw, 32px)/1 'Pinyon Script', cursive; color: var(--rose); }
.doc h1 { margin: 6px 0 4px; font: 600 clamp(40px, 7vw, 64px)/1 var(--serif);
          background: linear-gradient(180deg, #fff6e2, var(--gold) 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.doc-lede { margin: 0 0 30px; font: italic 300 19px/1.5 var(--text); color: rgba(244,236,220,.85); }
.doc h2 { margin: 28px 0 6px; font: 600 23px/1.2 var(--serif); color: var(--gold-hot); }
.doc p { margin: 0 0 10px; font: 300 16.5px/1.65 var(--text); color: rgba(244,236,220,.88); }
.doc-updated { margin-top: 30px !important; font-style: italic !important; font-size: 14px !important; opacity: .7; }
.doc .lost-link { margin-top: 26px; }