/*
  FaB shared design tokens + components.
  Written for the coming-soon page, meant to be reused by the main site.
  Style source of truth: reference/moodboard.jpg (2000s girl-web / fan-portal).
*/

/* ---------- Fonts (self-hosted, SIL OFL: see /fonts/Fredoka-OFL.txt) ---------- */
@font-face {
  font-family: "Fredoka";
  src: url("/fonts/fredoka-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fredoka";
  src: url("/fonts/fredoka-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand pink, sampled from the FaB logo */
  --fab-pink: #ec1e84;
  --fab-pink-light: #ff7dbd;
  --fab-pink-pale: #ffd3e9;
  --fab-pink-deep: #c20f69;   /* white text on this passes AA (5.3:1) */
  --fab-pink-ink: #a30b57;    /* pink text on white (7.2:1) */

  /* From the Flesh and Bone "about" artwork */
  --fab-maroon: #680c30;      /* white text on this: 12.5:1 */
  --fab-pink-soft: #f7b0d8;   /* on maroon: 7.2:1 */

  /* Blue-grey chrome (header, sidebar, bubble cards) */
  --chrome-50: #f3f5f8;
  --chrome-100: #e4e8ee;
  --chrome-200: #c9d0d9;
  --chrome-300: #b3bcc7;
  --chrome-400: #a1abb7;      /* wireframe card grey */
  --chrome-500: #8a95a2;
  --chrome-600: #6e7986;
  --chrome-700: #535d69;

  /* Deep navy for text and dark surfaces */
  --navy-900: #141a3a;
  --navy-800: #1e2656;
  --navy-700: #2c3677;

  /* Starburst + iCarly-style accents */
  --burst-red: #e3102b;
  --burst-red-dark: #8f0718;
  --accent-yellow: #ffd200;
  --accent-orange: #ff8a00;
  --accent-lime: #9fe02a;
  --accent-sky: #5fd3ff;

  /* Feedback */
  --error-ink: #b00020;       /* on white: 6.4:1 */
  --success-ink: #0b6b2f;     /* on white: 6.6:1 */

  /* Surfaces + text */
  --surface: #ffffff;
  --text: var(--navy-900);
  --text-muted: #3d4566;
  --focus-ring: var(--navy-900);
  --focus-ring-on-dark: var(--accent-yellow);

  /* Type */
  --font-display: "Fredoka", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Trebuchet MS", Verdana, "Segoe UI", system-ui, sans-serif;

  /* Shape + depth */
  --radius-bubble: 28px;
  --radius-pill: 999px;
  --border-thick: 4px;
  --shadow-pop: 0 4px 0 rgba(20, 26, 58, 0.25), 0 10px 24px rgba(20, 26, 58, 0.18);
  --gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.15) 100%);

  /* Starburst outline (20 points) */
  --burst-shape: polygon(50% 0%, 55.9% 12.5%, 65.5% 2.4%, 67.3% 16.1%, 79.4% 9.5%, 76.9% 23.1%, 90.5% 20.6%, 83.9% 32.7%, 97.6% 34.5%, 87.5% 44.1%, 100% 50%, 87.5% 55.9%, 97.6% 65.5%, 83.9% 67.3%, 90.5% 79.4%, 76.9% 76.9%, 79.4% 90.5%, 67.3% 83.9%, 65.5% 97.6%, 55.9% 87.5%, 50% 100%, 44.1% 87.5%, 34.5% 97.6%, 32.7% 83.9%, 20.6% 90.5%, 23.1% 76.9%, 9.5% 79.4%, 16.1% 67.3%, 2.4% 65.5%, 12.5% 55.9%, 0% 50%, 12.5% 44.1%, 2.4% 34.5%, 16.1% 32.7%, 9.5% 20.6%, 23.1% 23.1%, 20.6% 9.5%, 32.7% 16.1%, 34.5% 2.4%, 44.1% 12.5%);

  /* Patterned page background: polka dots + sparkles on hot pink */
  --pattern-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23fff'%3E%3Cpath d='M30 14l3 9 9 3-9 3-3 9-3-9-9-3 9-3z' opacity='.85'/%3E%3Cpath d='M92 70l2 6 6 2-6 2-2 6-2-6-6-2 6-2z' opacity='.7'/%3E%3Ccircle cx='96' cy='22' r='2.5' opacity='.6'/%3E%3Ccircle cx='22' cy='92' r='2' opacity='.6'/%3E%3C/g%3E%3C/svg%3E");
  --pattern-dots: radial-gradient(circle, rgba(255, 255, 255, 0.22) 22%, transparent 24%);
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
  background-color: var(--fab-pink);
  background-image: var(--pattern-sparkle), var(--pattern-dots);
  background-size: 120px 120px, 28px 28px;
}

img,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-underline-offset: 0.18em;
}

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-pill);
  background: var(--navy-900);
  color: #fff;
  font-weight: 700;
}
.skip-link:focus {
  top: 1rem;
  outline-color: var(--focus-ring-on-dark);
}

/* ---------- Bubble card ---------- */
.bubble {
  position: relative;
  padding: 1.25rem 1.5rem 1.4rem;
  border-radius: var(--radius-bubble);
  background: var(--chrome-400);
  border: var(--border-thick) solid #fff;
  box-shadow: 0 0 0 3px var(--chrome-600), var(--shadow-pop);
  isolation: isolate;
}
/* glossy highlight on the top half */
.bubble::before {
  content: "";
  position: absolute;
  inset: 3px 3px 55% 3px;
  border-radius: calc(var(--radius-bubble) - 6px) calc(var(--radius-bubble) - 6px) 50% 50% / calc(var(--radius-bubble) - 6px) calc(var(--radius-bubble) - 6px) 22px 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
  z-index: -1;
  pointer-events: none;
}
.bubble--pink {
  box-shadow: 0 0 0 4px var(--fab-pink), var(--shadow-pop);
}

/* ---------- Glossy pill button ---------- */
.btn-glossy {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  min-height: 48px;
  padding: 0.55em 1.4em;
  border: 2px solid #8a0848;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, #ff5aa9 0%, #e01a7d 49%, var(--fab-pink-deep) 51%, #d0147a 100%);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem; /* bold 19px+ counts as large text for contrast */
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 rgba(90, 0, 40, 0.6);
  box-shadow: inset 0 -3px 0 rgba(90, 0, 40, 0.25), 0 3px 0 #8a0848, 0 6px 14px rgba(138, 8, 72, 0.35);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
/* glossy shine */
.btn-glossy::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 3px;
  height: 42%;
  border-radius: var(--radius-pill);
  background: var(--gloss);
  opacity: 0.7;
  pointer-events: none;
}
.btn-glossy:hover {
  filter: brightness(1.06);
}
.btn-glossy:active {
  transform: translateY(2px);
  box-shadow: inset 0 -2px 0 rgba(90, 0, 40, 0.25), 0 1px 0 #8a0848, 0 3px 8px rgba(138, 8, 72, 0.3);
}
/* Navy variant for secondary actions (e.g. social links) */
.btn-glossy--navy {
  border-color: #070a1c;
  background: linear-gradient(180deg, #4a5596 0%, var(--navy-700) 49%, var(--navy-800) 51%, var(--navy-900) 100%);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25), 0 3px 0 #070a1c, 0 6px 14px rgba(20, 26, 58, 0.35);
  text-decoration: none;
}
.btn-glossy--navy:active {
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25), 0 1px 0 #070a1c, 0 3px 8px rgba(20, 26, 58, 0.3);
}
.btn-icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

.btn-glossy:disabled,
.btn-glossy[aria-disabled="true"] {
  cursor: progress;
  filter: saturate(0.6);
}

/* ---------- Text field ---------- */
.field {
  width: 100%;
  min-height: 48px;
  padding: 0.6rem 1.1rem;
  border: 2px solid var(--navy-800);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 1.05rem;
  box-shadow: inset 0 2px 4px rgba(20, 26, 58, 0.15);
}
.field::placeholder {
  color: #5c6380;
  opacity: 1;
}
.field[aria-invalid="true"] {
  border-color: var(--error-ink);
  box-shadow: inset 0 2px 4px rgba(176, 0, 32, 0.15), 0 0 0 2px var(--error-ink);
}

/* ---------- Sticker / pill label ---------- */
.sticker {
  display: inline-block;
  padding: 0.3em 0.9em;
  border-radius: var(--radius-pill);
  border: 3px solid #fff;
  background: var(--accent-yellow);
  color: var(--navy-900);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: 0 3px 0 rgba(20, 26, 58, 0.3);
  transform: rotate(-4deg);
}

/* ---------- Starburst sticker ---------- */
.starburst {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  width: var(--burst-size, 140px);
  filter: drop-shadow(0 4px 0 rgba(20, 26, 58, 0.25));
}
.starburst::before,
.starburst::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: var(--burst-shape);
}
.starburst::before {
  background: #fff; /* white outline */
}
.starburst::after {
  inset: 6%;
  background: radial-gradient(circle at 40% 35%, #ff4a5c 0%, var(--burst-red) 55%, #c10a22 100%);
}
.starburst__text {
  position: relative;
  z-index: 1;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.95;
  color: #fff;
  text-transform: uppercase;
  font-size: calc(var(--burst-size, 140px) * 0.17);
  text-shadow:
    2px 0 0 var(--burst-red-dark), -2px 0 0 var(--burst-red-dark),
    0 2px 0 var(--burst-red-dark), 0 -2px 0 var(--burst-red-dark),
    2px 2px 0 var(--burst-red-dark), -2px -2px 0 var(--burst-red-dark),
    2px -2px 0 var(--burst-red-dark), -2px 2px 0 var(--burst-red-dark);
}

/* ---------- Tab strip (wireframe's grey tabs) ---------- */
.tabstrip {
  display: flex;
  height: 30px;
  background: linear-gradient(180deg, #9aa3ae, #7d8794);
  border-bottom: 2px solid var(--chrome-700);
}
.tabstrip__tab {
  flex: 1 1 0;
  border-right: 2px solid rgba(255, 255, 255, 0.35);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 55%);
}

/* ---------- Caution tape ---------- */
/* Solid yellow tape with hazard stripes along both edges; text sits on the yellow. */
.caution-tape {
  position: relative;
  overflow: hidden;
  border-block: 3px solid var(--navy-900);
  background: var(--accent-yellow);
  box-shadow: 0 4px 0 rgba(20, 26, 58, 0.25);
}
.caution-tape::before,
.caution-tape::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  background: repeating-linear-gradient(-45deg, var(--navy-900) 0 8px, transparent 8px 16px);
}
.caution-tape::before { top: 0; }
.caution-tape::after { bottom: 0; }
.caution-tape__track {
  display: flex;
  width: max-content;
  padding: 0.55rem 0;
}
.caution-tape__label {
  margin-right: 1.5rem; /* margin, not gap, so a -50% marquee loops seamlessly */
  padding: 0 0.8rem;
  color: var(--navy-900);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- Motion ---------- */
@keyframes fab-wobble {
  0%, 100% { transform: rotate(-8deg) scale(1); }
  50% { transform: rotate(-2deg) scale(1.04); }
}
@keyframes fab-twinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
}
@keyframes fab-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}