/* Apple Bank × Ape Water — Design Tokens */
:root {
  /* Brand palette — Apple Bank navy primary, apple-red accent, leaf, stem, cream */
  --ab-navy:      #0F2659;
  --ab-navy-deep: #081A40;
  --ab-navy-soft: #DCE2EF;
  --ab-navy-mid:  #2B4078;

  --ab-red: #D72D2D;
  --ab-red-deep: #A8201F;
  --ab-red-soft: #F4D9D8;
  --ab-leaf: #4A8B2C;
  --ab-leaf-soft: #DBEACE;
  --ab-stem: #6B3A1E;

  --ab-cream: #FAF7F2;
  --ab-cream-2: #F1ECE2;
  --ab-paper: #FFFFFF;

  --ab-ink: #1A1A1A;
  --ab-ink-soft: #555555;
  --ab-ink-mute: #8A857C;
  --ab-line: #E5DFD4;
  --ab-line-2: #EFEAE0;

  /* Type — Playfair Display editorial serif + Inter humanist sans */
  --ab-serif: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --ab-sans: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --ab-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Shadows — soft navy lift for buttons, paper for cards */
  --ab-shadow-btn: 0 4px 0 -1px rgba(15, 38, 89, 0.22), 0 6px 18px -6px rgba(15, 38, 89, 0.4);
  --ab-shadow-btn-hover: 0 6px 0 -1px rgba(15, 38, 89, 0.28), 0 10px 24px -8px rgba(15, 38, 89, 0.5);
  --ab-shadow-card: 0 1px 0 rgba(26, 26, 26, 0.04), 0 8px 28px -16px rgba(26, 26, 26, 0.18);
  --ab-shadow-lift: 0 2px 0 rgba(26, 26, 26, 0.04), 0 24px 60px -28px rgba(26, 26, 26, 0.28);

  /* Radii — pill buttons, gentle cards */
  --ab-r-pill: 999px;
  --ab-r-card: 16px;
  --ab-r-tile: 22px;
  --ab-r-chip: 12px;
}

/* Resets scoped under .ab — design system root class */
.ab, .ab * { box-sizing: border-box; }
.ab {
  font-family: var(--ab-sans);
  color: var(--ab-ink);
  background: var(--ab-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.ab h1, .ab h2, .ab h3, .ab h4 {
  font-family: var(--ab-serif);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
.ab p { margin: 0; }

/* Type scale */
.ab .t-display   { font-family: var(--ab-serif); font-weight: 700; font-size: clamp(34px, 8.5vw, 44px); line-height: 1.05; letter-spacing: -0.02em; }
.ab .t-h1        { font-family: var(--ab-serif); font-weight: 700; font-size: 30px; line-height: 1.1;  letter-spacing: -0.015em; }
.ab .t-h2        { font-family: var(--ab-serif); font-weight: 700; font-size: 24px; line-height: 1.15; letter-spacing: -0.01em; }
.ab .t-h3        { font-family: var(--ab-serif); font-weight: 700; font-size: 20px; line-height: 1.2;  }
.ab .t-lead      { font-family: var(--ab-sans);  font-weight: 400; font-size: 17px; line-height: 1.45; color: var(--ab-ink-soft); }
.ab .t-body      { font-family: var(--ab-sans);  font-weight: 400; font-size: 16px; line-height: 1.5;  }
.ab .t-small     { font-family: var(--ab-sans);  font-weight: 500; font-size: 14px; line-height: 1.45; color: var(--ab-ink-soft); }
.ab .t-eyebrow   { font-family: var(--ab-sans);  font-weight: 600; font-size: 11px; line-height: 1;    letter-spacing: 0.16em; text-transform: uppercase; color: var(--ab-ink-mute); }
.ab .t-num       { font-family: var(--ab-serif); font-weight: 700; font-size: 38px; line-height: 1;    letter-spacing: -0.02em; }

/* Apple drop animation — for hero S1 */
@keyframes ab-drop {
  0%   { transform: translate(-50%, -120%) rotate(-8deg); opacity: 0; }
  18%  { opacity: 1; }
  60%  { transform: translate(-50%, 0%) rotate(2deg); }
  72%  { transform: translate(-50%, -8%) rotate(0deg); }
  84%  { transform: translate(-50%, 0%) rotate(0deg); }
  100% { transform: translate(-50%, 0%) rotate(0deg); opacity: 1; }
}
@keyframes ab-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@keyframes ab-check-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74, 139, 44, 0.6); }
  100% { box-shadow: 0 0 0 32px rgba(74, 139, 44, 0); }
}
@keyframes ab-sway {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg); }
}

/* Dancing can — bob, sway, translate, twist. Used on S1 mobile + desktop. */
@keyframes ab-can-dance {
  0%   { transform: translate(0, 0)    rotate(-4deg) scale(1.00); }
  10%  { transform: translate(-6px, -10px) rotate(3deg)  scale(1.02); }
  22%  { transform: translate(4px, -4px)   rotate(-3deg) scale(0.99); }
  34%  { transform: translate(-2px, -16px) rotate(4deg)  scale(1.03); }
  46%  { transform: translate(8px, -6px)   rotate(-2deg) scale(1.00); }
  58%  { transform: translate(-8px, -12px) rotate(5deg)  scale(1.02); }
  70%  { transform: translate(6px, -2px)   rotate(-4deg) scale(0.98); }
  82%  { transform: translate(-4px, -14px) rotate(2deg)  scale(1.01); }
  100% { transform: translate(0, 0)    rotate(-4deg) scale(1.00); }
}
/* Shadow under the dancing can — pulses inversely with bob */
@keyframes ab-can-shadow {
  0%, 100% { transform: scaleX(1)    translateY(0); opacity: 0.32; }
  10%      { transform: scaleX(0.78) translateY(0); opacity: 0.18; }
  34%      { transform: scaleX(0.68) translateY(0); opacity: 0.14; }
  46%      { transform: scaleX(0.95) translateY(0); opacity: 0.28; }
  58%      { transform: scaleX(0.74) translateY(0); opacity: 0.16; }
  82%      { transform: scaleX(0.82) translateY(0); opacity: 0.20; }
}
/* Drop-in entrance — used once before the dance begins */
@keyframes ab-can-drop-in {
  0%   { transform: translateY(-380px) rotate(-12deg); opacity: 0; }
  40%  { opacity: 1; }
  72%  { transform: translateY(20px) rotate(6deg); }
  86%  { transform: translateY(-10px) rotate(-3deg); }
  100% { transform: translateY(0) rotate(0deg); opacity: 1; }
}
/* Sparkle notes flying around the dancing can */
@keyframes ab-spark {
  0%   { transform: translate(0, 0) scale(0.4); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(var(--sx, 30px), var(--sy, -40px)) scale(1); opacity: 0; }
}