/* five-card-tarot.html CSS [A-D] reset / :root tokens / base / background / layout / header.
   Load order (after five-card-reading.css): base -> mode -> page -> transition -> ask -> select -> reveal.
   See AGENTS.md. */

@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,500;0,600;1,500&display=swap');

/* ==== A. RESET + :root (design tokens) ==== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-base: #000;
  --text: #fff;
  --accent-purple: #ba80ff;
  --spot-purple: rgba(151, 61, 255, 0.25);
  --dot-1: #c79bfe;
  --dot-2: #bab7fe;
  --dot-3: #b3c5fe;
  --dot-4: #a7dffe;
  --dot-5: #26dbff;
  --font-display: 'Lora', serif;
  --font-body: 'Montserrat', sans-serif;
  --font-card-name: 'Cormorant', 'Lora', serif;
  --content-max: 720px;
  --site-header-chrome: 164px;
}

@media (min-width: 768px) {
  :root {
    --site-header-chrome: 340px;
  }
}
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text);
  background: var(--bg-base);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
}

a { color: inherit; text-decoration: none; }
a.content-link { color: #0000ee; text-decoration: underline; }

/* ==== C. BACKGROUND — background layers (tarotcards.io parity) ==== */
.bg-container {
  inset: 0;
  opacity: 0.8;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.bg-container * {
  pointer-events: none;
  user-select: none;
}

.spot {
  background: radial-gradient(circle, rgba(151, 61, 255, 0.25), transparent 70%);
  border-radius: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}

.img-spot {
  background: url('../assets/bg_element.webp') no-repeat;
  background-size: cover;
  height: 1440px;
  -webkit-mask-image: radial-gradient(circle, #000 10%, transparent 80%);
  mask-image: radial-gradient(circle, #000 10%, transparent 80%);
  -webkit-mask-size: cover;
  mask-size: cover;
  position: absolute;
  transform: translate(-50%, -50%);
  width: 1440px;
}

@media screen and (max-width: 669px) {
  .spot.a { height: 187.11vw; left: -10.395vw; top: 2695px; width: 187.11vw; }
  .spot.b,
  .spot.c { height: 192.654vw; width: 192.654vw; }
  .spot.b { left: 58.212vw; top: 1705px; }
  .spot.c { left: 24.255vw; top: 12.012vw; }
  .spot.d,
  .spot.e { height: 166.32vw; width: 166.32vw; }
  .spot.d { left: 222.453vw; top: 100.485vw; }
  .spot.e { left: 264.495vw; top: 2056px; }

  .img-spot.a { left: 322.245vw; top: 30.03vw; }
  .img-spot.b { left: 322.245vw; top: 2767px; }
  .img-spot.c { left: 0; top: 139.062vw; transform: rotate(45deg) translate(-50%, -50%); }
  .img-spot.d { left: 2838px; top: -141.73236vw; transform: rotate(-135deg) translate(-50%, -50%); }
  .img-spot.e { left: -10.395vw; top: 108.108vw; }
  .img-spot.f { left: -10.395vw; top: 2272px; }
  .img-spot.g { left: -138.6vw; opacity: 0.6; top: 3172px; transform: rotate(-135deg) translate(-50%, -50%); }
}

@media screen and (min-width: 670px) and (max-width: 1439px) {
  .spot.a { height: 60.75vw; left: -3.375vw; top: 2695px; width: 60.75vw; }
  .spot.b,
  .spot.c { height: 62.55vw; width: 62.55vw; }
  .spot.b { left: 18.9vw; top: 1705px; }
  .spot.c { left: 7.875vw; top: 3.9vw; }
  .spot.d,
  .spot.e { height: 54vw; width: 54vw; }
  .spot.d { left: 72.225vw; top: 32.625vw; }
  .spot.e { left: 85.875vw; top: 2056px; }

  .img-spot.a { left: 104.625vw; top: 9.75vw; }
  .img-spot.b { left: 104.625vw; top: 2767px; }
  .img-spot.c { left: 0; top: 45.15vw; transform: rotate(45deg) translate(-50%, -50%); }
  .img-spot.d { left: 2838px; top: -46.017vw; transform: rotate(-135deg) translate(-50%, -50%); }
  .img-spot.e { left: -3.375vw; top: 35.1vw; }
  .img-spot.f { left: -3.375vw; top: 2272px; }
  .img-spot.g { left: -45vw; opacity: 0.6; top: 3172px; transform: rotate(-135deg) translate(-50%, -50%); }
}

@media screen and (min-width: 1440px) {
  .spot.a { height: 810px; left: -45px; top: 2695px; width: 810px; }
  .spot.b,
  .spot.c { height: 834px; width: 834px; }
  .spot.b { left: 252px; top: 1705px; }
  .spot.c { left: 105px; top: 52px; }
  .spot.d,
  .spot.e { height: 720px; width: 720px; }
  .spot.d { left: 963px; top: 435px; }
  .spot.e { left: 1145px; top: 2056px; }

  .img-spot.a { left: 1395px; top: 130px; }
  .img-spot.b { left: 1395px; top: 2767px; }
  .img-spot.c { left: 0; top: 602px; transform: rotate(45deg) translate(-50%, -50%); }
  .img-spot.d { left: 2838px; top: -613.56px; transform: rotate(-135deg) translate(-50%, -50%); }
  .img-spot.e { left: -45px; top: 468px; }
  .img-spot.f { left: -45px; top: 2272px; }
  .img-spot.g { left: -600px; opacity: 0.6; top: 3172px; transform: rotate(-135deg) translate(-50%, -50%); }
}

@media screen and (min-width: 1600px) {
  .bg-container::after {
    background: radial-gradient(ellipse 72% 58% at 50% 32%, rgba(97, 45, 180, 0.2), transparent 74%);
    content: "";
    inset: -8%;
    pointer-events: none;
    position: absolute;
  }
}

/* ==== D. LAYOUT + HEADER ==== */
.app {
  align-items: center;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
  width: 100%;
  z-index: 1;
}

main {
  position: relative;
  width: 100%;
}

/* Header */
.mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
}

.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.logo-img { height: 76px; width: auto; display: block; }

.menu-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.menu-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text);
  border-radius: 1px;
}

.nav-panel {
  display: none;
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.95);
  padding: 20px;
  z-index: 99;
  flex-direction: column;
  gap: 12px;
}
.nav-panel.open { display: flex; }
.nav-panel a {
  font-size: 18px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* Desktop header + icon nav carousel (copy-in-copy arc) */
.site-header {
  display: none;
  position: relative;
  z-index: 100;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 32px 0 0;
}

.breadcrumbs {
  position: absolute;
  top: 20px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  line-height: 1.2;
}

.breadcrumbs--hidden { display: none; }
.breadcrumbs--visible { display: flex; }

@media (max-width: 767px) {
  :root {
    --mobile-header-h: 108px;
    --mobile-bc-h: 34px;
  }

  .menu-btn {
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
  }

  .mobile-header {
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
  }
}