/* ============================================================
   Home screen — layout mirrors the source app (light ornamented
   hero, green promo card, chips, function grid), with the visual
   treatment dialled up: aurora background, glass surfaces,
   entrance animations and an auto-playing banner carousel.
   ============================================================ */

/* ---------- Hero (light, ornamented) ---------- */
.home-hero {
  position: relative;
  flex-shrink: 0;
  padding: 8px 16px 0;
  /* Reach up under the shell status bar so the aurora runs behind it; the bar
     itself is transparent on this screen (see base.css). */
  margin-top: calc(-1 * var(--statusbar-h));
  padding-top: calc(8px + var(--statusbar-h));
  background: linear-gradient(175deg, var(--color-hero-top) 0%, #eff6f0 55%, #e2ece4 100%);
  overflow: hidden;
}

/* soft drifting colour blobs */
.hero-aurora {
  position: absolute;
  inset: -120px -60px auto -60px;
  height: 420px;
  pointer-events: none;
  filter: blur(58px);
  opacity: 0.5;
}
.hero-blob { position: absolute; border-radius: 50%; }
.hero-blob.b1 {
  width: 260px; height: 260px; left: -30px; top: 10px;
  background: radial-gradient(circle, rgba(var(--brand-deep-rgb),0.85), transparent 70%);
  animation: blobDrift1 16s ease-in-out infinite;
}
.hero-blob.b2 {
  width: 220px; height: 220px; right: -20px; top: -30px;
  background: radial-gradient(circle, rgba(var(--brand-yellow-rgb),0.55), transparent 70%);
  animation: blobDrift2 19s ease-in-out infinite;
}
.hero-blob.b3 {
  width: 200px; height: 200px; left: 40%; top: 90px;
  background: radial-gradient(circle, rgba(var(--brand-green-rgb),0.5), transparent 70%);
  animation: blobDrift3 22s ease-in-out infinite;
}
@keyframes blobDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(40px, 26px) scale(1.14); }
}
@keyframes blobDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-34px, 32px) scale(1.18); }
}
@keyframes blobDrift3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-26px, -22px) scale(0.88); }
}

/* geometric watermark, echoing the source app's ornament */
.hero-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: 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='none' stroke='%23006837' stroke-width='0.7' opacity='0.28'%3E%3Ccircle cx='60' cy='60' r='30'/%3E%3Ccircle cx='60' cy='60' r='18'/%3E%3Cpath d='M60 12 L96 60 L60 108 L24 60 Z'/%3E%3Cpath d='M0 0 L24 60 L0 120'/%3E%3Cpath d='M120 0 L96 60 L120 120'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 128px 128px;
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.35) 62%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.35) 62%, transparent 100%);
}

.hero-inner { position: relative; z-index: 1; }

/* The CETEM emblem is dark teal-green with gold detail, close enough to the
   app's own green that it loses definition on a green surface — so it always
   sits on a white tile. The horizontal lockup's wordmark disappears entirely
   on green, which is why the header uses the emblem alone. */
.hero-brand { display: flex; align-items: center; gap: 10px; }
.hero-mark {
  width: 42px; height: 42px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(var(--brand-deep-rgb), 0.16);
}
.hero-mark img { width: 30px; height: 30px; object-fit: contain; display: block; }

.hero-logo {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.6px;
  color: var(--color-header-bg);
}
.hero-logo .accent { color: var(--color-primary); }
.hero-logo-sub {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--color-text-secondary);
  margin-top: -2px;
}

/* glass icon buttons on the light hero */
.hero-icon-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(var(--brand-deep-rgb),0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-header-bg);
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
}
.hero-icon-btn:active { transform: scale(0.92); }

.hero-lang {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(var(--brand-deep-rgb),0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-header-bg);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

/* greeting | slogan | balance */
.hero-greet-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-bottom: 20px;
}
.hero-greet { flex-shrink: 0; }
.hero-greet-label { font-size: 12.5px; color: var(--color-text-general); }
.hero-greet-name {
  font-size: 19px;
  font-weight: 800;
  color: var(--color-header-bg);
  line-height: 1.15;
  margin-top: 1px;
}
.hero-divider {
  width: 1px;
  align-self: stretch;
  background: rgba(var(--brand-deep-rgb),0.28);
  flex-shrink: 0;
}
.hero-slogan {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-general);
  text-align: center;
  line-height: 1.3;
}
.balance-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(var(--brand-deep-rgb),0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(var(--brand-deep-rgb),0.12);
  color: var(--color-header-bg);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
  max-width: 46%;
  white-space: nowrap;
  transition: transform 0.15s;
}
.balance-pill > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.balance-pill:active { transform: scale(0.96); }
.balance-pill .icon { opacity: 0.75; }
/* Open state: the pill stops looking like a chip to read and starts looking
   like the handle of the thing below it. */
.balance-pill.open {
  background: #fff;
  border-color: rgba(var(--brand-deep-rgb), 0.34);
  box-shadow: 0 6px 18px rgba(var(--brand-deep-rgb), 0.18);
}
.pill-chev {
  display: flex;
  transition: transform var(--drawer-dur) var(--ease-drawer);
}
.balance-pill.open .pill-chev { transform: rotate(180deg); }

/* ---------- Balance drawer ---------- */
/* The height is animated as grid-template-rows 0fr -> 1fr rather than a
   max-height guess. The panel's height is content-derived — the amount grows
   a digit as the balance does, and the label wraps on narrow phones — and a
   max-height set large enough to be safe spends the first third of the
   collapse travelling through empty space, which is exactly the "cheap"
   tell we are trying to avoid.
   Both rules on the clip are load-bearing: a grid row will not collapse to
   zero unless the item inside it can (min-height) and its overflow is cut. */
.balance-drawer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--drawer-dur) var(--ease-drawer);
}
.balance-drawer.open { grid-template-rows: 1fr; }
.balance-drawer-clip { min-height: 0; overflow: hidden; }

.balance-panel { padding: 4px 2px 18px; }

/* Rows arrive just behind the opening edge, each a beat after the last, so the
   panel unpacks rather than appearing whole in a box that grew around it.
   The stagger is only on the way in: closing, everything leaves together and
   fast, because a staggered exit reads as lag. */
.balance-row {
  /* Per-row stagger offset. Declared here so the default is explicit and the
     inline style="--d:55ms" on each row is an override rather than the only
     place the property exists. */
  --d: 0ms;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  opacity: 0;
  transform: translateY(-7px);
  transition: opacity 190ms linear, transform 380ms var(--ease-drawer);
}
.balance-drawer.open .balance-row {
  opacity: 1;
  transform: none;
  transition-delay: calc(60ms + var(--d));
}
/* The eye hugs the label it belongs to rather than being flung to the far
   margin by space-between — at this width that gap read as two unrelated
   controls. Only the amount row spans the full width, because the Account
   button genuinely belongs at the opposite edge. */
.balance-label-row { justify-content: flex-start; gap: 4px; }
.balance-amount-row { margin-top: 6px; }
.balance-acct-row { justify-content: flex-start; gap: 8px; margin-top: 8px; }

.balance-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-general);
}
.balance-amount {
  display: flex;
  align-items: baseline;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.6px;
}
/* Tabular figures: without them the digits change width as the count-up runs
   and the whole number shuffles sideways for 700ms. */
.ba-int {
  font-size: 34px;
  color: var(--color-header-bg);
  font-variant-numeric: tabular-nums;
}
.ba-frac {
  font-size: 24px;
  color: rgba(var(--brand-deep-rgb), 0.32);
  font-variant-numeric: tabular-nums;
}
.ba-mask {
  font-size: 30px;
  letter-spacing: 3px;
  color: rgba(var(--brand-deep-rgb), 0.34);
}

.balance-account-btn {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  padding: 8px 10px 8px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(var(--brand-deep-rgb), 0.2);
  color: var(--color-header-bg);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 150ms var(--ease-drawer), box-shadow 150ms ease;
}
.balance-account-btn:active { transform: scale(0.95); }
.balance-account-btn .icon { opacity: 0.7; }

.balance-acct-no {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-main);
  letter-spacing: 0.3px;
}

.balance-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--color-header-bg);
  opacity: 0.72;
  cursor: pointer;
  transition: transform 150ms var(--ease-drawer), background 150ms ease, opacity 150ms ease;
}
.balance-icon-btn.sm { width: 26px; height: 26px; }
.balance-icon-btn:active { transform: scale(0.88); }
.balance-icon-btn:hover { background: rgba(var(--brand-deep-rgb), 0.07); opacity: 1; }
.balance-icon-btn.done { color: var(--color-success); opacity: 1; }

/* ---------- Body ---------- */
.home-body {
  position: relative;
  z-index: 2;
  flex: 1;
  padding: 0 16px calc(var(--nav-height) + 24px);
}

/* ---------- Green promo card ---------- */
.promo-card {
  position: relative;
  /* Clear of the hero, not overlapping it. This used to be -8px, riding up
     over the hero's bottom edge — but the greeting row above ends in a
     Balance pill, and once the slogan beside it wraps to two lines the card
     came up hard against it. 8px below the hero keeps the pill readable and
     leaves the pale hero block unobscured. */
  margin-top: 8px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #039449 0%, #0b7d3f 52%, #006837 100%);
  box-shadow: 0 12px 30px rgba(var(--brand-deep-rgb),0.34);
  padding: 18px 6px;
  display: flex;
  overflow: hidden;
}
.promo-card::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.16), transparent);
  transform: translateX(-160%);
  animation: promoSheen 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes promoSheen {
  0%, 62% { transform: translateX(-160%); }
  100%    { transform: translateX(360%); }
}
.promo-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 0 4px;
  border: none;
  background: none;
  color: #fff;
  cursor: pointer;
  position: relative;
  transition: transform 0.15s;
}
.promo-item:active { transform: scale(0.93); }
.promo-item + .promo-item::before {
  content: '';
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 1px;
  background: rgba(255,255,255,0.22);
}
.promo-item .icon { color: #fff; }
.promo-label {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

/* ---------- Banner carousel ---------- */
.banner {
  position: relative;
  margin-top: 16px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  touch-action: pan-y;
}
.banner-track {
  display: flex;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.banner-track.dragging { transition: none; }
.banner-slide {
  flex: 0 0 100%;
  min-width: 100%;
  cursor: pointer;
  position: relative;
  padding: 18px 20px;
  min-height: 104px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  background: linear-gradient(120deg, var(--g1), var(--g2));
  overflow: hidden;
  user-select: none;
}
/* decorative rings */
.banner-slide::before,
.banner-slide::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.22);
  pointer-events: none;
}
.banner-slide::before { width: 150px; height: 150px; right: -46px; top: -54px; }
.banner-slide::after  { width: 96px;  height: 96px;  right: 12px;  bottom: -46px; }
.banner-icon {
  width: 46px; height: 46px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.3);
  flex-shrink: 0;
  color: #fff;
}
.banner-text { flex: 1; min-width: 0; position: relative; z-index: 1; }
.banner-tag {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.24);
  margin-bottom: 6px;
}
.banner-title { font-size: 16px; font-weight: 800; line-height: 1.2; }
.banner-body { font-size: 11.5px; opacity: 0.9; margin-top: 3px; line-height: 1.3; }
.banner-dots {
  position: absolute;
  bottom: 10px; left: 20px;
  display: flex;
  gap: 5px;
  z-index: 2;
}
.banner-dot {
  width: 5px; height: 5px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.45);
  transition: width 0.3s, background 0.3s;
}
.banner-dot.active { width: 16px; background: #fff; }

/* ---------- Banner: photo variant ----------
   A slide with `image` set in data.js swaps the gradient for real creative.
   The photo carries no text of its own — the copy stays live HTML so it can
   follow the EN/FR switch — so it needs a scrim to stay legible over whatever
   the photograph happens to be doing behind it. Slides without an image keep
   the gradient treatment untouched. */
.banner-slide.has-image {
  min-height: 150px;
  align-items: flex-end;
  /* the extra bottom padding keeps the copy clear of the dots row */
  padding: 16px 18px 28px;
  background: var(--brand-green-900);
}
.banner-photo,
.banner-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* background-image is set inline on the element, not through a custom property:
   a url() inside a custom property resolves against the stylesheet that uses
   it, so "assets/..." would be looked up under css/ and 404. */
.banner-photo {
  background-size: cover;
  background-position: center;
}
/* Dark on the left where the words sit, clear on the right where the subject is */
.banner-scrim {
  background: linear-gradient(95deg,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.62) 34%,
    rgba(0, 0, 0, 0.24) 62%,
    rgba(0, 0, 0, 0.06) 100%);
}
/* the decorative rings belong to the gradient look, not to a photograph */
.banner-slide.has-image::before,
.banner-slide.has-image::after { display: none; }
.banner-slide.has-image .banner-text { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.banner-slide.has-image .banner-title { font-size: 17px; }
.banner-slide.has-image .banner-tag { background: rgba(255, 255, 255, 0.28); }
/* dots live on .banner, above both the photo and its scrim */
.banner .banner-dots { z-index: 3; }

/* ---------- Section headings ---------- */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 22px 2px 12px;
}
.section-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-title::before {
  content: '';
  width: 3px; height: 15px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--brand-green-400), var(--brand-green-800));
}
.section-link {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-primary);
  cursor: pointer;
}

/* ---------- Function grid tiles ---------- */
.func-tile .func-icon {
  background: linear-gradient(145deg, rgba(var(--brand-deep-rgb),0.13), rgba(var(--brand-deep-rgb),0.05));
  border: 1px solid rgba(var(--brand-deep-rgb),0.1);
  box-shadow: 0 2px 8px rgba(var(--brand-deep-rgb),0.08);
  transition: transform 0.15s, box-shadow 0.15s;
}
.func-tile:active .func-icon {
  transform: scale(0.9);
  box-shadow: 0 1px 4px rgba(var(--brand-deep-rgb),0.14);
}

/* ---------- Quick send avatars ---------- */
.qs-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 58px;
  cursor: pointer;
}
.qs-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 16px;
  background: linear-gradient(145deg,#eef6f0,#dceadf);
  color: var(--color-header-bg);
  border: 1px solid rgba(var(--brand-deep-rgb),0.14);
  transition: transform 0.15s;
}
.qs-item:active .qs-avatar { transform: scale(0.92); }
.qs-avatar.add {
  background: linear-gradient(145deg, var(--brand-green-400), var(--color-primary));
  color: #fff;
  border: none;
  box-shadow: 0 6px 16px rgba(var(--brand-green-rgb),0.4);
}
.qs-name { font-size: 11.5px; font-weight: 600; color: var(--color-text-main); }

/* ---------- Entrance animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  animation: revealUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes revealUp {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; opacity: 1; transform: none; }
  .hero-blob, .promo-card::after { animation: none; }
  .banner-track { transition: none; }
  /* The drawer still opens and closes — only the travel is dropped. Delays go
     too, or the rows would sit invisible for their stagger and then pop. */
  .balance-drawer, .balance-row, .pill-chev {
    transition-duration: 1ms;
    transition-delay: 0ms;
  }
}