/*
 * CareHub Plus — Story cards and the Carta Parceira
 *
 * Styles the bottom-sheet story card of each stage (eyebrow, title, movement
 * chip, body and button), the Claro "Carta Parceira" of stage 3 with its
 * seal, logo, red rule and text fallback, and the intro start screen copy.
 * Every value comes from tokens.css.
 *
 * Author: Vitoria Lana
 * Created on: 21/10/2026
 * Version: 1.0.0
 * Squad: CareHub Plus
 */

/* ---------- Start screen (#intro) ---------- */
/* Hidden until the fonts are ready; shown statically once the intro state begins. */
body[data-state="boot"] .intro-inner {
  visibility: hidden;
}

/* Stage-2 warning sign, carried on Mariana's shoulder inside her billboard */
.token-warning {
  position: absolute;
}

.intro-inner {
  /* Fill exactly the device height so the whole start screen fits without
     scrolling. On very short phones the inner zones shrink (see the gap,
     the Mariana height and the short-height media query below) instead of
     overflowing and forcing the user to scroll to reach the CTA. */
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Three zones: logo pinned to the top, hero content centred in the
     remaining space, partner strip pinned to the bottom. */
  justify-content: space-between;
  /* Vertical breathing room scales with the viewport height: tight on short
     phones, up to the usual 24 px token on tall screens. */
  gap: clamp(var(--space-8), 2.2vh, var(--space-24));
  padding: calc(clamp(var(--space-12), 2.2vh, var(--space-24)) + env(safe-area-inset-top, 0px)) calc(var(--space-24) + env(safe-area-inset-right, 0px)) calc(clamp(var(--space-12), 2.2vh, var(--space-24)) + env(safe-area-inset-bottom, 0px)) calc(var(--space-24) + env(safe-area-inset-left, 0px));
  text-align: center;
}

.intro-logo {
  box-sizing: content-box;
  width: var(--size-logo-intro);
  max-width: 100%;
  height: auto;
  flex: 0 0 auto;
  /* Same white pill treatment as the board HUD logo (.hud-logo). */
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-full);
  background: var(--bg);
  box-shadow: var(--shadow-card);
}

/* Hero block (title, Mariana, CTA) grows to fill the middle and centres.
   min-height: 0 lets the Mariana image shrink inside the flex column on short
   screens instead of forcing the block taller than the viewport. */
.intro-hero {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--space-8), 2.2vh, var(--space-24));
  width: 100%;
}

.intro-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(var(--space-4), 1.2vh, var(--space-12));
}

.intro-line1 {
  font-family: var(--font-body);
  font-weight: var(--fw-500);
  /* Shrinks a step on short phones (16 px) up to the usual 20 px on tall ones. */
  font-size: clamp(var(--fs-16), 2.2vh, var(--fs-20));
  line-height: var(--lh-body);
  color: var(--text-secondary);
  text-wrap: balance;
}

.intro-line2 {
  font-family: var(--font-display);
  font-weight: var(--fw-700);
  /* Scales between 24 px on short phones and the full 35 px display size. */
  font-size: clamp(var(--fs-24), 4.4vh, var(--fs-35));
  line-height: var(--lh-tight);
  color: var(--text-primary);
  text-wrap: balance;
  /* Game-style shine: a lilac light sweeps across the dark title in a loop.
     The gradient is wider than the text and clipped to the letters, so moving
     its position slides the highlight through the words (and hides the reset). */
  background-image: linear-gradient(
    100deg,
    var(--text-primary) 0%,
    var(--text-primary) 40%,
    var(--primary) 50%,
    var(--text-primary) 60%,
    var(--text-primary) 100%
  );
  background-size: 250% 100%;
  background-position: 150% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: intro-shine 3.2s ease-in-out infinite;
}

@keyframes intro-shine {
  to {
    background-position: -50% 0;
  }
}

/* Respect reduced motion: no sweep, keep the solid readable title. */
@media (prefers-reduced-motion: reduce) {
  .intro-line2 {
    animation: none;
    background-image: none;
    -webkit-text-fill-color: var(--text-primary);
  }
}

.intro-mariana {
  /* The heaviest item on the start screen. Instead of a fixed 260 px height,
     it takes whatever vertical room the hero block has left (min-height: 0 on
     .intro-hero allows this), capped at the token size, and shrinks on short
     phones so the title, CTA and partner strip always stay on screen. */
  height: auto;
  width: auto;
  max-height: var(--size-intro-mariana);
  min-height: 0;
  flex: 0 1 auto;
  object-fit: contain;
}

.intro-cta {
  /* Larger tap target and label, local to the start screen (the shared .btn
     token stays untouched so other screens keep their size). Same width as
     the partner pill below. */
  width: min(100%, var(--size-intro-pill));
  min-height: var(--space-64);
  font-size: var(--fs-18);
}

/* Partner strip pinned to the bottom of the start screen:
   white pill with "Parceria:" + logos. Same width as the CTA above. */
.partners {
  flex: 0 0 auto;
  margin-top: var(--space-8);
  width: min(100%, var(--size-intro-pill));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  padding: var(--space-12) var(--space-20);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-card);
}

.partners-label {
  /* Centred with the logos on a single baseline-free row; the whole strip
     relies on the flex `align-items: center` of `.partners`. */
  font-family: var(--font-body);
  font-weight: var(--fw-500);
  font-size: var(--fs-16);
  line-height: var(--lh-tight);
  color: var(--text-secondary);
}

.partners-sep {
  width: 1px;
  height: var(--space-32);
  background: var(--border-strong);
}

.partners-logo {
  width: auto;
  display: block;
}

/* Both marks share the same cap height so they sit centred on one row. */
.partners-logo-claro,
.partners-logo-fiap {
  height: var(--space-24);
}

/* Short viewports (small phones, address bar visible, or landscape): tighten
   the start screen further so every zone — logo, title, Mariana, CTA and the
   partner strip — fits in the device height with no scrolling. The CTA keeps
   its minimum touch target; only the decorative spacing and art give way. */
@media (max-height: 720px) {
  .intro-logo {
    width: clamp(180px, 42vh, var(--size-logo-intro));
    padding: var(--space-4) var(--space-12);
  }

  .partners {
    padding: var(--space-8) var(--space-16);
    gap: var(--space-12);
  }

  .partners-sep {
    height: var(--space-24);
  }
}

@media (max-height: 560px) {
  .intro-mariana {
    /* On very short screens hide the art rather than squashing the layout;
       the title and CTA carry the message. */
    display: none;
  }

  .intro-cta {
    min-height: var(--cta-h);
  }
}

/* ---------- Story card (design §13): bottom sheet in #layer ---------- */
.card {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--space-16) + env(safe-area-inset-bottom, 0px));
  width: min(100% - var(--space-32), var(--size-card));
  max-height: calc(100% - var(--space-32));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-24);
  background: var(--bg);
  border-radius: var(--radius-24);
  box-shadow: var(--shadow-overlay);
  overflow-y: auto;
}

.card-title {
  outline: none;
}

.card[data-fx="sink"] .card-title {
  color: var(--text-secondary);
}

.card[data-fx="burst"] .card-title {
  color: var(--primary-dark);
  text-shadow: var(--shadow-glow-text);
}

.card-btn {
  margin-top: var(--space-4);
  flex: 0 0 auto;
}

/* ---------- Carta Parceira Claro (design §14) ---------- */
.partner-card {
  border: 1px solid var(--border);
  padding-top: calc(var(--space-24) + var(--size-partner-rule));
}

.partner-rule {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--size-partner-rule);
  background: var(--partner-claro-red);
}

.partner-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
}

.partner-seal {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-full);
  background: var(--primary-dark);
  color: var(--text-inverse);
  font-family: var(--font-display);
  font-weight: var(--fw-700);
  font-size: var(--fs-11);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-section);
  text-transform: uppercase;
  outline: none;
  overflow: hidden;
}

/* Bonus accent: the same game-style shine as the intro title — a light sweeps
   across the seal in a loop (intro-shine), marking it as a special card. The
   sweep is a gloss overlay, so the pill colour and text stay fully readable. */
.partner-seal::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(
    100deg,
    transparent 0%,
    transparent 40%,
    rgb(255 255 255 / .55) 50%,
    transparent 60%,
    transparent 100%
  );
  background-size: 250% 100%;
  background-position: 150% 0;
  animation: intro-shine 3.2s ease-in-out infinite;
}

/* Respect reduced motion: no sweep. */
@media (prefers-reduced-motion: reduce) {
  .partner-seal::after {
    animation: none;
    background-image: none;
  }
}

.partner-logo-box {
  flex: 0 0 var(--size-partner-logo);
  width: var(--size-partner-logo);
  height: var(--size-partner-logo);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.partner-logo {
  width: var(--size-partner-logo);
  height: var(--size-partner-logo);
  object-fit: cover;
}

.partner-name {
  font-family: var(--font-body);
  font-weight: var(--fw-600);
  font-size: var(--fs-18);
  color: var(--text-primary);
}