/* ==========================================================================
   sections/hero-visual.css · owner: hero-visual-agent
   Hero phone cluster: dark backdrop, 10 notification cards, device frame.
   DESIGN_SPEC §4.5 · motion.md §3.1, §3.3, §3.5 · BUILD_CONVENTIONS §7.
   Reads (never writes) #hero[data-hero-step] / [data-hero-theme].
   ========================================================================== */

/* ---------- 1. Root: fills .hero-stage ---------- */
.hero-visual {
  position: absolute;
  inset: 0;
}

/* ---------- 2. Dark backdrop (steps 3–4) ----------
   Sits fully inside .hero-stage (which clips with overflow: hidden), and every
   layer fades to transparent at its own edges (closest-side gradients/masks),
   so no straight edge is ever visible. */
.hero-visual__backdrop {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--t-fast);            /* 200ms --ease-inout */
  pointer-events: none;
}

.hero-visual__backdrop-media {                  /* hero.backdrop slot · 1023×416 (2.459), soft-masked */
  position: absolute;
  top: 45%;
  left: 50%;
  width: min(1023px, 100%);
  aspect-ratio: 2.459;
  transform: translate(-50%, -50%);
  background: var(--grad-placeholder-dark);
  -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 20%, transparent 100%);
  opacity: .7;
}

.hero-visual__glow {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(1200px, 100%);
  height: 100%;
  translate: -50% 0;
  background: radial-gradient(closest-side,
    rgb(36, 1, 111) 0%,
    rgb(36, 1, 111) 30%,
    rgba(36, 1, 111, .55) 58%,
    rgba(36, 1, 111, .2) 80%,
    rgba(36, 1, 111, 0) 100%);
  scale: .3;
  transition: scale var(--dur-bloom) var(--ease-in-bloom) 0ms;
}

/* ---------- 3. Notification cards ---------- */
.hero-visual__cards {
  position: absolute;
  inset: 0;
}

.hero-visual__card {
  /* Geometry. The phone body (device) spans cx - .193·H … cx + .1655·H, where
     H = stage height (--hero-stage-h) and cx = stage center: frame width is
     .7338·H, shifted -37.2%, device from 10.9% to 59.75% of the frame.
     Left cards end --gap left of the device, right cards start --gap right of
     it; --st adds the zigzag. max-width keeps every card 16px inside the
     viewport, and text may wrap when it binds (tablet). Rows use --yf, a
     fraction of the stage height (57/720, 155/720, …), so they spread with it. */
  --yf: .079;
  --w: 340px;
  --st: 0px;
  --stx: var(--st);
  --gap: 24px;
  --dev-l: calc(var(--hero-stage-h) * .193);
  --dev-r: calc(var(--hero-stage-h) * .1655);
  position: absolute;
  top: calc(var(--hero-stage-h) * var(--yf));
  width: var(--w);
  opacity: 1;
  transition: opacity var(--t-spring);          /* step 1 ↔ 2 crossfade, 650ms spring */
}

.hero-visual__card--r1l, .hero-visual__card--r2l, .hero-visual__card--r3l,
.hero-visual__card--r4l, .hero-visual__card--r5l,
.hero-visual__card--c1, .hero-visual__card--c3 {
  right: calc(50% + var(--dev-l) + var(--gap) + var(--stx));
  max-width: calc(50% - var(--dev-l) - var(--gap) - var(--stx) - 16px);
}

.hero-visual__card--r1r, .hero-visual__card--r2r, .hero-visual__card--r3r,
.hero-visual__card--r4r, .hero-visual__card--r5r,
.hero-visual__card--c2, .hero-visual__card--c4 {
  left: calc(50% + var(--dev-r) + var(--gap) + var(--stx));
  max-width: calc(50% - var(--dev-r) - var(--gap) - var(--stx) - 16px);
}

/* Rows (§4.5): top 57 + n·99 of a 720 stage. --st = zigzag away from the phone. */
.hero-visual__card--r1l { --yf: .079; --w: 340px; --st: 40px; }
.hero-visual__card--r1r { --yf: .081; --w: 400px; --st: 0px; }
.hero-visual__card--r2l { --yf: .215; --w: 384px; --st: 30px; }
.hero-visual__card--r2r { --yf: .217; --w: 400px; --st: 40px; }
.hero-visual__card--r3l { --yf: .353; --w: 400px; --st: 0px; }
.hero-visual__card--r3r { --yf: .354; --w: 325px; --st: 80px; }
.hero-visual__card--r4l { --yf: .490; --w: 384px; --st: 70px; }
.hero-visual__card--r4r { --yf: .492; --w: 384px; --st: 80px; }
.hero-visual__card--r5l { --yf: .628; --w: 340px; --st: 30px; }
.hero-visual__card--r5r { --yf: .629; --w: 340px; --st: 50px; }

/* Set C (Liberdade, steps 3–4): four cards around the dark phone */
.hero-visual__card--c1 { --yf: .120; --w: 360px; --st: 30px; }
.hero-visual__card--c2 { --yf: .300; --w: 360px; --st: 20px; }
.hero-visual__card--c3 { --yf: .480; --w: 360px; --st: 0px; }
.hero-visual__card--c4 { --yf: .640; --w: 370px; --st: 60px; }

/* Card body: same component as the sharing list (§7). Load-in lives here so it
   multiplies with the step opacity on the outer <li>. */
.hero-visual__card-in {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
  padding: var(--space-16);
  border-radius: var(--radius-16);
  background: var(--color-bg);
  box-shadow: var(--shadow-ring-02);
  transform-origin: 50% 50%;
  animation: hero-visual-appear var(--dur-soft) var(--ease-spring-soft) both;
  animation-delay: calc(var(--hero-visual-appear-at, 900ms) + var(--appear-delay, 0ms));
}

/* motion.md §3.1 delays; R1-right uses the pop spring */
.hero-visual__card--r1l .hero-visual__card-in { --appear-delay: 100ms; }
.hero-visual__card--r1r .hero-visual__card-in { --appear-delay: 0ms; animation-duration: var(--dur-pop); animation-timing-function: var(--ease-spring-pop); }
.hero-visual__card--r2l .hero-visual__card-in { --appear-delay: 200ms; }
.hero-visual__card--r2r .hero-visual__card-in { --appear-delay: 100ms; }
.hero-visual__card--r3l .hero-visual__card-in { --appear-delay: 0ms; }
.hero-visual__card--r3r .hero-visual__card-in { --appear-delay: 200ms; }
.hero-visual__card--r4l .hero-visual__card-in { --appear-delay: 100ms; }
.hero-visual__card--r4r .hero-visual__card-in { --appear-delay: 0ms; }
.hero-visual__card--r5l .hero-visual__card-in { --appear-delay: 0ms; }
.hero-visual__card--r5r .hero-visual__card-in { --appear-delay: 200ms; }

@keyframes hero-visual-appear {
  from { opacity: .001; scale: .5; }
  to   { opacity: 1;    scale: 1; }
}

.hero-visual__icon {                            /* hero.step1/2.cardN.icon · 40×40 */
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-10);
  background: var(--grad-placeholder);
  color: var(--color-text-inverse);
}

.hero-visual__glyph {
  width: 22px;
  height: 22px;
  background: currentColor;
  -webkit-mask: var(--glyph) center / contain no-repeat;
  mask: var(--glyph) center / contain no-repeat;
}

.hero-visual__glyph--calendar { --glyph: url("../assets/placeholders/icons/calendar.svg"); }
.hero-visual__glyph--bell     { --glyph: url("../assets/placeholders/icons/bell.svg"); }
.hero-visual__glyph--route    { --glyph: url("../assets/placeholders/icons/heart.svg"); }
.hero-visual__glyph--clock    { --glyph: url("../assets/placeholders/icons/clock.svg"); }
.hero-visual__glyph--check    { --glyph: url("../assets/placeholders/icons/check.svg"); }
.hero-visual__glyph--plane    { --glyph: url("../assets/placeholders/icons/flame.svg"); }
.hero-visual__glyph--alert    { --glyph: url("../assets/placeholders/icons/alert.svg"); }
.hero-visual__glyph--pin      { --glyph: url("../assets/placeholders/icons/pin.svg"); }
.hero-visual__glyph--download { --glyph: url("../assets/placeholders/icons/download.svg"); }
.hero-visual__glyph--user     { --glyph: url("../assets/placeholders/icons/user.svg"); }
.hero-visual__glyph--flame    { --glyph: url("../assets/placeholders/icons/flame.svg"); }
.hero-visual__glyph--leaf     { --glyph: url("../assets/placeholders/icons/leaf.svg"); }
.hero-visual__glyph--ribbon   { --glyph: url("../assets/placeholders/icons/ribbon.svg"); }
.hero-visual__glyph--chart    { --glyph: url("../assets/placeholders/icons/chart.svg"); }
.hero-visual__glyph--screen   { --glyph: url("../assets/placeholders/icons/screen.svg"); }

.hero-visual__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hero-visual__title,
.hero-visual__sub {
  overflow-wrap: break-word;                    /* wraps only if max-width binds */
}

.hero-visual__title { color: var(--color-text); }
.hero-visual__sub   { color: var(--color-text-50); }

/* Set C: dark glass variant of the same card for the dark Liberdade step */
.hero-visual__card--c .hero-visual__card-in {
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass));
}
.hero-visual__card--c .hero-visual__icon  { background: rgba(255, 255, 255, .12); }
.hero-visual__card--c .hero-visual__title { color: var(--color-text-inverse); }
.hero-visual__card--c .hero-visual__sub   { color: var(--color-text-inverse-60); }

/* ---------- 4. Device frame ----------
   Transparent 0.7338 box (528×720 at 1440), 100% of the stage tall, shifted so
   it sits 12.8% of its width right of center. The phone body wraps the screen
   (screen: top 1.875%, left 12.6%, width 45.45%, aspect .463, radius 6.65% of
   frame width). Sizes inside use cqw of the frame width so everything scales. */
.hero-visual__frame {
  /* screen geometry in frame-width units (cqw) */
  --sx: 12.6cqw;
  --sy: 2.555cqw;                               /* 1.875% of the height (h = w / .7338) */
  --sw: 45.45cqw;
  --sh: 98.164cqw;                              /* 45.45 / .463 */
  --sr: 6.65cqw;
  --bz: 1.7cqw;                                 /* bezel, about 9px at 528 */
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  height: 100%;
  aspect-ratio: 0.7338;                         /* --hero-frame-ratio (proposed token) */
  transform: translateX(-37.2%);                /* --hero-frame-shift (proposed token) */
  border-radius: 60px;
  container-type: inline-size;
  pointer-events: none;
}

.hero-visual__device {                          /* hero.device.frame placeholder: phone outline */
  position: absolute;
  top: calc(var(--sy) - var(--bz));
  left: calc(var(--sx) - var(--bz));
  width: calc(var(--sw) + 2 * var(--bz));
  height: calc(var(--sh) + 2 * var(--bz));
  border-radius: calc(var(--sr) + var(--bz));
  background: var(--grad-placeholder);
  box-shadow: inset 0 0 0 1px var(--color-border-strong), var(--shadow-ring-02);
}

.hero-visual__screen {
  position: absolute;
  inset: var(--bz);
  overflow: hidden;
  border-radius: var(--sr);
  background: var(--grad-placeholder-dark);     /* what shows once both screens fade (steps 3–4) */
  box-shadow: 0 0 0 1px var(--color-border-strong);
  container-type: inline-size;
}

/* Inside the screen, 1cqw = 1% of the screen width (2.4px at 1440). */
.hero-visual__base {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  flex-direction: column;
  opacity: 1;
  transition: opacity var(--dur-pill) var(--ease-inout);
}

.hero-visual__slot {
  position: relative;
  width: 100%;
  flex: none;
}

.hero-visual__slot--top {                       /* 238×518, ratio .4609 */
  aspect-ratio: 0.4609;
  background: var(--grad-placeholder);
}

.hero-visual__slot--bottom {                    /* 238×522 */
  aspect-ratio: 238 / 522;
  display: flex;
  flex-direction: column;
  padding: 0 5cqw;
  background: var(--color-bg);
}

.hero-visual__map-controls {
  position: absolute;
  top: 24cqw;
  right: 4cqw;
  width: 11cqw;
  height: 34cqw;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
}

.hero-visual__sheet {
  position: absolute;
  inset: 94cqw 2.5cqw 0;
  display: flex;
  flex-direction: column;
  padding: 5cqw 5cqw 0;
  border-radius: 7cqw 7cqw 0 0;
  background: var(--color-bg);
}

.hero-visual__sheet-head {
  display: flex;
  align-items: center;
  gap: 3cqw;
}

.hero-visual__sheet-head .hero-visual__bar--head { margin-right: auto; }

.hero-visual__bar {
  display: block;
  height: 3.2cqw;
  border-radius: var(--radius-pill);
  background: var(--color-border-strong);
}

.hero-visual__bar--head { width: 38cqw; height: 5.4cqw; background: var(--color-text); }
.hero-visual__bar--num  { flex: none; width: 10cqw; height: 8cqw; border-radius: 2cqw; background: var(--color-text); }
.hero-visual__bar--xs   { width: 20cqw; }
.hero-visual__bar--s    { width: 42cqw; }
.hero-visual__bar--m    { width: 52cqw; background: var(--color-text-50); }
.hero-visual__bar--l    { width: 62cqw; background: var(--color-text-50); }

.hero-visual__dot {
  flex: none;
  width: 8cqw;
  height: 8cqw;
  border-radius: 50%;
  background: var(--color-border-strong);
}

.hero-visual__search {
  height: 11cqw;
  margin-top: 5cqw;
  border-radius: 4cqw;
  background: var(--color-border);
}

.hero-visual__row {
  display: flex;
  align-items: center;
  gap: 5cqw;
  min-height: 27cqw;
  border-bottom: 1px solid var(--color-border);
}

.hero-visual__lines {
  display: flex;
  flex-direction: column;
  gap: 2.4cqw;
}

/* Overlay screen (step 2): slot ratio .4617, starts hidden */
.hero-visual__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 4cqw;
  padding: 22cqw 5cqw 0;
  background: var(--color-bg);
  opacity: 0;
  transition: opacity var(--dur-pill) var(--ease-inout);
}

.hero-visual__hero-block {
  flex: none;
  aspect-ratio: 1.45;
  margin-bottom: 2cqw;
  border-radius: 6cqw;
  background: var(--grad-placeholder);
}

.hero-visual__tiles {
  display: flex;
  gap: 3cqw;
  margin: 2cqw 0;
}

.hero-visual__tile {
  flex: 1;
  height: 18cqw;
  border-radius: 4cqw;
  background: var(--color-border);
}

/* Liberdade screen (steps 3–4): dark day-counter UI, starts hidden.
   Sizes in cqw of the screen width so it scales with the phone. */
.hero-visual__free {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 3.4cqw;
  padding: 24cqw 6cqw 0;
  color: var(--color-text-inverse);
  font-family: var(--font-sans);
  opacity: 0;
  transition: opacity var(--dur-pill) var(--ease-inout);
}

.hero-visual__free p { margin: 0; }

.hero-visual__free-label {
  font-size: 4.6cqw;
  line-height: 1.2;
  font-weight: var(--fw-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-inverse-60);
}

.hero-visual__free-count {
  display: flex;
  align-items: baseline;
  gap: 2.4cqw;
  margin-top: -1cqw;
  white-space: nowrap;
}

.hero-visual__free-num {
  font-size: 25cqw;
  line-height: 1;
  font-weight: var(--fw-bold);
  letter-spacing: -.04em;
}

.hero-visual__free-unit {
  font-size: 6.2cqw;
  line-height: 1.2;
  font-weight: var(--fw-semibold);
}

.hero-visual__free-time {
  font-size: 5cqw;
  line-height: 1.2;
  font-weight: var(--fw-medium);
  color: var(--color-accent-green);
  font-variant-numeric: tabular-nums;
}

.hero-visual__free-card {
  display: flex;
  flex-direction: column;
  gap: 3cqw;
  padding: 4.2cqw 4.6cqw;
  border-radius: 5.5cqw;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}

.hero-visual__free-card--row {
  flex-direction: row;
  align-items: center;
  gap: 3cqw;
}

.hero-visual__free-head {
  font-size: 4.4cqw;
  line-height: 1.2;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.hero-visual__free-sub {
  margin-top: -1.6cqw;
  font-size: 3.9cqw;
  line-height: 1.25;
  color: var(--color-text-inverse-60);
}

.hero-visual__week,
.hero-visual__marcos {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-visual__week li {
  display: grid;
  place-items: center;
  width: 9.4cqw;
  height: 9.4cqw;
  border-radius: 50%;
  font-size: 3.6cqw;
  font-weight: var(--fw-semibold);
  color: var(--color-text-inverse-50);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
}

.hero-visual__week li.is-done  { background: var(--color-accent-green); color: var(--color-text-inverse); box-shadow: none; }
.hero-visual__week li.is-today { color: var(--color-text-inverse); box-shadow: inset 0 0 0 1.5px var(--color-accent-green); }

.hero-visual__marcos li {
  display: grid;
  place-items: center;
  min-width: 15cqw;
  height: 8.6cqw;
  padding: 0 2cqw;
  border-radius: var(--radius-pill);
  font-size: 3.8cqw;
  font-weight: var(--fw-semibold);
  color: var(--color-text-inverse-50);
  background: rgba(255, 255, 255, .08);
}

.hero-visual__marcos li.is-done { color: var(--color-text-inverse); background: rgba(8, 168, 91, .35); }

.hero-visual__free-check {
  flex: none;
  width: 7cqw;
  height: 7cqw;
  border-radius: 50%;
  background: var(--color-accent-green) center / 70% no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

/* Status bar and camera pill, above both screens */
.hero-visual__status {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 18cqw;
  padding: 0 10cqw;
}

.hero-visual__time,
.hero-visual__signal {
  height: 3.6cqw;
  border-radius: var(--radius-pill);
  background: var(--color-text);
  transition: background-color var(--t-fast);
}

.hero-visual__time   { width: 10cqw; }
.hero-visual__signal { width: 13cqw; }

.hero-visual__island {
  position: absolute;
  top: 4.4cqw;
  left: 50%;
  width: 31cqw;
  height: 9.2cqw;
  transform: translateX(-50%);
  border-radius: var(--radius-pill);
  background: var(--color-text);
}

/* ---------- 5. Step reactions (read-only hero state, §4.5.2) ---------- */

/* Step 1 (default, also without JS): set A 1, set B .2 */
.hero-visual__card--b { opacity: .2; }

/* Step 2: set A .2, set B 1; overlay screen fades in (300ms, 200ms delay) */
#hero[data-hero-step="2"] .hero-visual__card--a { opacity: .2; }
#hero[data-hero-step="2"] .hero-visual__card--b { opacity: 1; }
#hero[data-hero-step="2"] .hero-visual__overlay {
  opacity: 1;
  transition: opacity var(--dur-pill) var(--ease-inout) 200ms;
}

/* Set C is hidden in steps 1–2 */
.hero-visual__card--c {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-fast), visibility 0s linear var(--dur-fast);
}

/* Steps 3–4: sets A/B vanish instantly, set C fades in, base screen fades out,
   the Liberdade screen fades in, backdrop + glow bloom */
#hero[data-hero-step="3"] .hero-visual__card--a,
#hero[data-hero-step="3"] .hero-visual__card--b,
#hero[data-hero-step="4"] .hero-visual__card--a,
#hero[data-hero-step="4"] .hero-visual__card--b {
  opacity: 0;
  visibility: hidden;
  transition: none;
}

#hero[data-hero-step="3"] .hero-visual__card--c,
#hero[data-hero-step="4"] .hero-visual__card--c {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--t-spring) 250ms, visibility 0s;
}

#hero[data-hero-step="3"] .hero-visual__free,
#hero[data-hero-step="4"] .hero-visual__free {
  opacity: 1;
  transition: opacity var(--dur-pill) var(--ease-inout) 200ms;
}

#hero[data-hero-step="3"] .hero-visual__base,
#hero[data-hero-step="4"] .hero-visual__base {
  opacity: 0;
}

#hero[data-hero-step="3"] .hero-visual__backdrop,
#hero[data-hero-step="4"] .hero-visual__backdrop {
  opacity: 1;
}

#hero[data-hero-step="3"] .hero-visual__glow,
#hero[data-hero-step="4"] .hero-visual__glow {
  scale: 1;
  transition: scale var(--dur-bloom) var(--ease-in-bloom) 200ms;
}

#hero[data-hero-theme="dark"] .hero-visual__time,
#hero[data-hero-theme="dark"] .hero-visual__signal {
  background: var(--color-text-inverse);
}

/* ---------- 6. Breakpoints ---------- */

/* Tablet (790–1199): same rows (they spread with the taller stage), tighter
   gap and zigzag, compact card body so the cards fit beside the phone. */
@media (max-width: 1199.98px) {
  .hero-visual__card { --gap: 16px; --stx: calc(var(--st) * .2); }
  .hero-visual__card-in { gap: 8px; padding: 12px; }
  .hero-visual__icon { width: 32px; height: 32px; }
  .hero-visual__glyph { width: 18px; height: 18px; }
  .hero-visual__title { font-size: 14px; line-height: 18px; }
  .hero-visual__sub { font-size: 12px; line-height: 16px; }
}

/* Phone: no cards; phone frame 0.7067, shifted -33.54%, screen at 4% / 12.9%, 214×464, radius 31.23 */
@media (max-width: 789.98px) {
  .hero-visual__cards { display: none; }

  .hero-visual__frame {
    --sx: 12.9cqw;
    --sy: 5.66cqw;                              /* 27 / 477 */
    --sw: 44.86cqw;                             /* 214 / 477 */
    --sh: 97.27cqw;                             /* 464 / 477 */
    --sr: 6.547cqw;                             /* 31.23 / 477 */
    aspect-ratio: 0.7067;                       /* --hero-frame-ratio-phone (proposed token) */
    transform: translateX(-33.54%);             /* --hero-frame-shift-phone (proposed token) */
  }
}

/* ---------- 7. Reduced motion: cards appear at their final state ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-visual__card-in { animation: none; }
}