/*
 * World-class home quote and clock treatment.
 * Loaded after home-premium-polish.css so it can safely refine the existing
 * React structure without changing routes, content ownership or clock logic.
 */

.home-premium-shell {
  --mba-clock-navy: #102a5c;
  --mba-clock-blue: #2375d8;
  --mba-clock-cyan: #42d9ff;
  --mba-clock-gold: #ffcf66;
}

/* Greeting and clock composition */
.home-premium-shell .home-greeting-clock-card {
  position: relative !important;
  overflow: visible !important;
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 218, 137, 0.30), transparent 34%),
    radial-gradient(circle at 92% 18%, rgba(80, 204, 255, 0.28), transparent 35%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(238, 247, 255, 0.50) 52%, rgba(255, 248, 232, 0.62)) !important;
  box-shadow:
    0 20px 48px rgba(19, 52, 102, 0.16),
    0 6px 16px rgba(19, 52, 102, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -1px 0 rgba(72, 124, 184, 0.10) !important;
  -webkit-backdrop-filter: blur(24px) saturate(175%) !important;
  backdrop-filter: blur(24px) saturate(175%) !important;
}

.home-premium-shell .home-greeting-clock-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 12%, rgba(255, 255, 255, 0.48) 34%, transparent 52%);
  transform: translateX(-115%);
  animation: mbaGreetingLightSweep 8s ease-in-out infinite;
}

.home-premium-shell .home-analog-clock-slot {
  position: relative;
  margin-left: 12px !important;
  padding-left: 13px !important;
  border-left: 0 !important;
}

.home-premium-shell .home-analog-clock-slot::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14%;
  bottom: 14%;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 195, 79, 0.18), #ffbe4b 34%, #4bd9ff 72%, rgba(75, 217, 255, 0.16));
  box-shadow: 0 0 12px rgba(74, 192, 255, 0.38);
}

.home-premium-shell .home-analog-clock-section > div {
  width: clamp(66px, 16vw, 80px) !important;
  filter: drop-shadow(0 10px 18px rgba(20, 61, 116, 0.22));
  transform: translateZ(0);
}

.home-premium-shell .clock-face {
  border: 2px solid rgba(255, 255, 255, 0.96) !important;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.98) 0 7%, transparent 26%),
    radial-gradient(circle at 68% 72%, rgba(66, 217, 255, 0.30), transparent 34%),
    conic-gradient(from 205deg, #fff8df, #dff5ff 23%, #dce7ff 47%, #f1ddff 70%, #fff0d2 88%, #fff8df) !important;
  box-shadow:
    0 10px 24px rgba(22, 67, 129, 0.24),
    0 3px 8px rgba(22, 67, 129, 0.12),
    inset 0 0 0 1px rgba(43, 111, 190, 0.16),
    inset 0 0 20px rgba(255, 255, 255, 0.90) !important;
}

.home-premium-shell .clock-face::before {
  content: "";
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  border: 1px solid rgba(36, 105, 189, 0.15);
  box-shadow:
    inset 0 0 12px rgba(68, 179, 255, 0.13),
    0 0 12px rgba(255, 206, 94, 0.12);
  pointer-events: none;
  z-index: 2;
}

.home-premium-shell .clock-face::after {
  content: "";
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(67, 210, 255, 0.22), transparent 34%, rgba(255, 194, 70, 0.20), transparent 72%);
  opacity: 0.62;
  animation: mbaClockAura 14s linear infinite;
  pointer-events: none;
  z-index: 1;
}

.home-premium-shell .clock-face > span:nth-of-type(-n + 12) {
  background: var(--mba-clock-navy) !important;
  box-shadow: 0 0 3px rgba(17, 56, 112, 0.18);
}

.home-premium-shell .clock-face > span:nth-of-type(1),
.home-premium-shell .clock-face > span:nth-of-type(4),
.home-premium-shell .clock-face > span:nth-of-type(7),
.home-premium-shell .clock-face > span:nth-of-type(10) {
  width: 2.5px !important;
  background: linear-gradient(180deg, #174b98, #2e87df) !important;
  opacity: 0.92 !important;
}

.home-premium-shell .clock-face > span:nth-of-type(13) {
  background: linear-gradient(180deg, #112d62, #1e5bab) !important;
  box-shadow: 0 1px 2px rgba(12, 38, 82, 0.26);
}

.home-premium-shell .clock-face > span:nth-of-type(14) {
  background: linear-gradient(180deg, #174d96, #2b83d4) !important;
  box-shadow: 0 1px 2px rgba(12, 38, 82, 0.20);
}

.home-premium-shell .clock-face > span:nth-of-type(15) {
  background: linear-gradient(180deg, #ff8e3c, #ef3f78) !important;
  box-shadow: 0 0 6px rgba(239, 63, 120, 0.35);
}

.home-premium-shell .clock-face > span:nth-of-type(16) {
  width: 9% !important;
  height: 9% !important;
  background: radial-gradient(circle at 35% 30%, #fff7cc, #ffc74f 45%, #e67c28 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow:
    0 0 0 2px rgba(32, 97, 174, 0.16),
    0 2px 6px rgba(24, 62, 115, 0.28);
}

.home-premium-shell .clock-face > span:nth-of-type(17) {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.04) 46%, transparent 64%) !important;
}

.home-premium-shell .clock-sound-toggle {
  right: -2px !important;
  bottom: -2px !important;
  width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.96) !important;
  background: linear-gradient(145deg, #fff8dc, #dff6ff 48%, #eadfff) !important;
  box-shadow:
    0 4px 10px rgba(26, 67, 124, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
  transition: transform 160ms ease, box-shadow 160ms ease !important;
}

.home-premium-shell .clock-sound-toggle:hover,
.home-premium-shell .clock-sound-toggle:focus-visible {
  transform: translateY(-1px) scale(1.06);
  box-shadow:
    0 6px 14px rgba(26, 67, 124, 0.26),
    0 0 0 3px rgba(74, 190, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
  outline: none;
}

/* Daily banking insight: colourful, premium and still readable. */
.home-premium-shell .home-daily-quote-wrap {
  width: min(100%, 720px) !important;
  max-width: 720px !important;
  padding: 4px 16px 16px !important;
}

.home-premium-shell .home-daily-quote-card {
  --insight-a: #123d7a;
  --insight-b: #5b2fa8;
  --insight-c: #00a6c8;
  --insight-glow: rgba(70, 218, 255, 0.34);
  --insight-warm: rgba(255, 196, 76, 0.38);
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
  min-height: 96px !important;
  grid-template-columns: 54px minmax(0, 1fr) auto !important;
  gap: 15px !important;
  padding: 17px 17px 17px 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 25px !important;
  background:
    radial-gradient(circle at 8% 20%, var(--insight-warm), transparent 31%),
    radial-gradient(circle at 92% 18%, var(--insight-glow), transparent 36%),
    radial-gradient(circle at 72% 110%, rgba(255, 255, 255, 0.16), transparent 42%),
    linear-gradient(132deg, var(--insight-a), var(--insight-b) 52%, var(--insight-c)) !important;
  background-size: 115% 115%, 120% 120%, 100% 100%, 130% 130% !important;
  box-shadow:
    0 24px 54px rgba(24, 42, 92, 0.25),
    0 7px 18px rgba(24, 42, 92, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(7, 19, 55, 0.18) !important;
  -webkit-backdrop-filter: blur(26px) saturate(170%) !important;
  backdrop-filter: blur(26px) saturate(170%) !important;
  transition: transform 200ms ease, box-shadow 200ms ease, filter 200ms ease !important;
  animation: mbaInsightColourDrift 14s ease-in-out infinite alternate;
}

.home-premium-shell .home-daily-quote-card[data-banking-insight-theme="sunrise"] {
  --insight-a: #8f2f6d;
  --insight-b: #e05c54;
  --insight-c: #f4a631;
  --insight-glow: rgba(255, 222, 112, 0.42);
  --insight-warm: rgba(255, 130, 191, 0.30);
}

.home-premium-shell .home-daily-quote-card[data-banking-insight-theme="ocean"] {
  --insight-a: #0b3c74;
  --insight-b: #1269a9;
  --insight-c: #0fb7b3;
  --insight-glow: rgba(93, 237, 255, 0.38);
  --insight-warm: rgba(255, 209, 92, 0.28);
}

.home-premium-shell .home-daily-quote-card[data-banking-insight-theme="emerald"] {
  --insight-a: #0b5a50;
  --insight-b: #15846f;
  --insight-c: #63a94a;
  --insight-glow: rgba(156, 255, 195, 0.34);
  --insight-warm: rgba(255, 211, 95, 0.34);
}

.home-premium-shell .home-daily-quote-card[data-banking-insight-theme="royal"] {
  --insight-a: #2b2d78;
  --insight-b: #6540b4;
  --insight-c: #b14c9e;
  --insight-glow: rgba(239, 156, 255, 0.34);
  --insight-warm: rgba(255, 211, 99, 0.30);
}

.home-premium-shell .home-daily-quote-card[data-banking-insight-theme="aurora"] {
  --insight-a: #113d70;
  --insight-b: #2360a8;
  --insight-c: #00a8a5;
  --insight-glow: rgba(83, 241, 222, 0.38);
  --insight-warm: rgba(255, 199, 80, 0.30);
}

.home-premium-shell .home-daily-quote-card::before {
  content: "";
  position: absolute;
  inset: 0 !important;
  width: auto !important;
  border-radius: inherit !important;
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.24) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 28%, rgba(255, 255, 255, 0.18) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 64% 82%, rgba(255, 255, 255, 0.14) 0 1px, transparent 2px) !important;
  background-size: 46px 46px, 66px 66px, 82px 82px !important;
  opacity: 0.72 !important;
  z-index: -1;
  pointer-events: none;
}

.home-premium-shell .home-daily-quote-card::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 1px;
  border-radius: 24px;
  background: linear-gradient(112deg, transparent 10%, rgba(255, 255, 255, 0.18) 30%, transparent 48%) !important;
  transform: translateX(-112%);
  animation: mbaInsightLightSweep 7.5s ease-in-out infinite !important;
  pointer-events: none;
  z-index: 0;
}

.home-premium-shell .home-daily-quote-card__icon,
.home-premium-shell .home-daily-quote-card__copy,
.home-premium-shell .home-daily-quote-card__today {
  position: relative;
  z-index: 2;
}

.home-premium-shell .home-daily-quote-card__icon {
  width: 54px !important;
  height: 54px !important;
  border-radius: 18px !important;
  color: #ffffff !important;
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.40), transparent 28%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.10)) !important;
  border: 1px solid rgba(255, 255, 255, 0.48) !important;
  box-shadow:
    0 10px 22px rgba(8, 22, 61, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.50) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
}

.home-premium-shell .home-daily-quote-card__icon svg {
  width: 25px;
  height: 25px;
  filter: drop-shadow(0 2px 4px rgba(7, 22, 58, 0.22));
}

.home-premium-shell .home-daily-quote-card__copy {
  gap: 6px !important;
}

.home-premium-shell .home-daily-quote-card__kicker {
  color: rgba(255, 255, 255, 0.84) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(6, 18, 52, 0.22) !important;
  animation: none !important;
}

.home-premium-shell .home-daily-quote-card p {
  color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  font-family: "Manrope", system-ui, sans-serif !important;
  font-size: clamp(14px, 2.65vw, 16px) !important;
  font-weight: 720 !important;
  line-height: 1.46 !important;
  letter-spacing: -0.16px !important;
  text-wrap: pretty;
  text-shadow: 0 2px 10px rgba(4, 17, 49, 0.30) !important;
  animation: none !important;
  overflow-wrap: anywhere !important;
}

.home-premium-shell .home-daily-quote-card__today {
  align-self: center !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  color: rgba(255, 255, 255, 0.92) !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.30) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 5px 12px rgba(7, 20, 57, 0.12) !important;
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  font-size: 8.5px !important;
  font-weight: 850 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(6, 18, 52, 0.24) !important;
}

@media (hover: hover) and (pointer: fine) {
  .home-premium-shell .home-daily-quote-card:hover {
    transform: translateY(-3px) scale(1.005) !important;
    filter: saturate(1.06) brightness(1.02);
    box-shadow:
      0 30px 64px rgba(24, 42, 92, 0.30),
      0 9px 22px rgba(24, 42, 92, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.46),
      inset 0 -1px 0 rgba(7, 19, 55, 0.18) !important;
  }
}

@media (max-width: 430px) {
  .home-premium-shell .home-analog-clock-slot {
    margin-left: 9px !important;
    padding-left: 10px !important;
  }

  .home-premium-shell .home-analog-clock-section > div {
    width: clamp(62px, 17vw, 70px) !important;
  }

  .home-premium-shell .home-daily-quote-card {
    min-height: 94px !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 15px !important;
    border-radius: 22px !important;
  }

  .home-premium-shell .home-daily-quote-card::after {
    border-radius: 21px;
  }

  .home-premium-shell .home-daily-quote-card__icon {
    width: 46px !important;
    height: 46px !important;
    border-radius: 15px !important;
  }

  .home-premium-shell .home-daily-quote-card__icon svg {
    width: 22px;
    height: 22px;
  }

  .home-premium-shell .home-daily-quote-card__today {
    display: none !important;
  }

  .home-premium-shell .home-daily-quote-card p {
    font-size: 13.7px !important;
    line-height: 1.44 !important;
  }
}

@media (max-width: 360px) {
  .home-premium-shell .home-analog-clock-slot {
    margin-left: 7px !important;
    padding-left: 8px !important;
  }

  .home-premium-shell .home-analog-clock-section > div {
    width: 60px !important;
  }

  .home-premium-shell .home-daily-quote-wrap {
    padding-inline: 11px !important;
  }
}

@keyframes mbaGreetingLightSweep {
  0%, 66% {
    transform: translateX(-115%);
    opacity: 0;
  }
  76% {
    opacity: 1;
  }
  100% {
    transform: translateX(115%);
    opacity: 0;
  }
}

@keyframes mbaClockAura {
  to {
    transform: rotate(360deg);
  }
}

@keyframes mbaInsightColourDrift {
  from {
    background-position: 0% 0%, 100% 0%, 50% 100%, 0% 50%;
  }
  to {
    background-position: 8% 4%, 92% 8%, 54% 92%, 100% 50%;
  }
}

@keyframes mbaInsightLightSweep {
  0%, 64% {
    transform: translateX(-112%);
    opacity: 0;
  }
  74% {
    opacity: 1;
  }
  100% {
    transform: translateX(112%);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-premium-shell .home-greeting-clock-card::after,
  .home-premium-shell .clock-face::after,
  .home-premium-shell .home-daily-quote-card,
  .home-premium-shell .home-daily-quote-card::after {
    animation: none !important;
  }

  .home-premium-shell .clock-sound-toggle,
  .home-premium-shell .home-daily-quote-card {
    transition: none !important;
  }
}