/* The home page flower (Loke, 2026-10-05): a round bloom floating just behind the words,
   in front of a softened copy of the same picture, so it reads as depth.
   --zx / --zy run from -1 to 1 and follow the pointer (set in site.js). */
.zl-far {
  filter: blur(12px) saturate(0.85);
  opacity: 0.5;
  transform: scale(1.08) translate3d(calc(var(--zx, 0) * -12px), calc(var(--zy, 0) * -8px), 0);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.zl-bloom-anchor { position: relative; padding: clamp(56px, 10vh, 120px) 0 clamp(28px, 5vh, 56px); }
.zl-bloom {
  --size: min(94vw, 660px);
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  z-index: -1;
  pointer-events: none;
  transform: perspective(900px)
    translate3d(calc(var(--zx, 0) * 26px), calc(var(--zy, 0) * 18px), 0)
    rotateY(calc(var(--zx, 0) * 10deg)) rotateX(calc(var(--zy, 0) * -8deg));
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  filter: drop-shadow(0 30px 34px rgba(70, 45, 0, 0.5)) drop-shadow(0 0 48px rgba(255, 215, 0, 0.55));
}
.zl-bloom i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: url("/lovable-uploads/ed10892c-70f7-40cb-8e6f-606aacb06988.png") 50% 52% / 104% auto no-repeat;
  -webkit-mask: radial-gradient(circle, #000 54%, transparent 71%);
  mask: radial-gradient(circle, #000 54%, transparent 71%);
  animation: zl-float 9s ease-in-out infinite;
}
@keyframes zl-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-14px) scale(1.035); }
}
@media (prefers-reduced-motion: reduce) {
  .zl-bloom i { animation: none; }
  .zl-bloom, .zl-far { transition: none; }
}

/* The name, raised: a stack of darker blues underneath gives it thickness, a soft shadow lifts it
   off the flower, and it leans with the pointer like the bloom does. */
.zl-title {
  display: inline-block;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #2447c4;
  text-shadow:
    0 -1px 0 rgba(255, 255, 255, 0.75),
    0 1px 0 #2040b3, 0 2px 0 #1c3aa3, 0 3px 0 #193493, 0 4px 0 #162e84,
    0 5px 0 #132875, 0 6px 0 #102266, 0 7px 0 #0d1c57, 0 8px 0 #0b174a,
    0 9px 2px rgba(0, 0, 0, 0.35),
    0 16px 18px rgba(20, 20, 70, 0.45),
    0 28px 44px rgba(20, 20, 70, 0.35),
    0 0 34px rgba(255, 244, 190, 0.9);
  transform: perspective(700px) rotateX(calc(10deg + var(--zy, 0) * -7deg)) rotateY(calc(var(--zx, 0) * 9deg));
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) { .zl-title { transition: none; } }

/* The line under the name: frosted glass with a hairline of gold, in a quiet serif italic. */
.zl-tagline {
  display: inline-block;
  padding: 16px 38px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 250, 230, 0.42));
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid rgba(184, 134, 11, 0.45);
  box-shadow: 0 10px 30px rgba(60, 40, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.zl-tagline h2 {
  margin: 0;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.2rem, 2.6vw, 1.75rem);
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: #1e3a8a;
}

/* ------------------------------------------------------------------------------------------
   "More angelic" (Loke, 2026-10-05): scrolling down, the creams and golds read as burnt custard.
   First tried on the home page, then carried to every page the same day at her word.
   The page turns to pearl and light; gold stays as a hairline and a glow, not as a fill;
   every card has a deep glacier blue line. To undo: delete from this comment to the end of the file.
   ------------------------------------------------------------------------------------------ */
body {
  --background: 45 70% 99%;
  --card: 0 0% 100%;
  --muted: 45 60% 97%;
  --border: 45 40% 90%;
  /* no hard gold stripes down the sides; soft light from above and from the edges instead */
  background-color: #fffefb;
  background-image:
    radial-gradient(1100px 700px at 50% -120px, rgba(255, 244, 200, 0.55), transparent 70%),
    radial-gradient(900px 900px at -10% 45%, rgba(226, 236, 255, 0.55), transparent 65%),
    radial-gradient(900px 900px at 110% 70%, rgba(255, 246, 214, 0.6), transparent 65%),
    linear-gradient(180deg, #ffffff 0%, #fffdf5 45%, #f8faff 100%);
  background-size: 100% 100%;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
/* each page's own full-height backdrop steps aside so the light shows through */
main > .min-h-screen { background: transparent !important; }
/* home page: the dark band at the foot and the three blurred gold dots */
[data-flower] > [aria-hidden="true"]:last-of-type,
[data-flower] .floating-dot { display: none; }

/* The gold-filled boxes (their colour is written on each box, hence !important) turn white with a faint gold edge. */
main div[style*="rgba(184, 134, 11, 0.12)"],
main div[style*="rgba(184, 134, 11, 0.15), rgba(218, 165, 32, 0.1)"],
main div[style*="rgba(184, 134, 11, 0.08), rgba(218, 165, 32, 0.04)"],
main div[style*="rgba(255, 255, 255, 0.6), rgba(218, 165, 32, 0.05)"] {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(255, 251, 238, 0.7)) !important;
  border: 1px solid rgba(196, 160, 70, 0.22) !important;
  box-shadow: 0 12px 34px -18px rgba(150, 125, 60, 0.3) !important;
}
main div[style*="rgba(30, 58, 138, 0.08)"] {
  background: linear-gradient(145deg, rgba(247, 250, 255, 0.95), rgba(255, 255, 255, 0.75)) !important;
  border: 1px solid rgba(30, 58, 138, 0.1) !important;
}

/* Every card, on every page: white glass, a deep glacier blue line with a soft blue glow — Loke's pick, "the coolest".
   Also tried: light ice blue line (#cfe8fb); no line with a blue glow; no line with a turquoise-to-blue glow. */
main .rounded-lg.text-card-foreground {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.7)) !important;
  border: 2px solid #3d9cc6 !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9) inset, 0 0 28px rgba(80, 170, 215, 0.4), 0 40px 90px -30px rgba(120, 150, 190, 0.3), 0 10px 30px rgba(120, 130, 170, 0.08) !important;
}

/* The flower, quieter: one bloom dissolving into light. The copy behind it is only a warm haze. */
[data-flower] .zl-far { filter: blur(40px) saturate(0.7) brightness(1.15); opacity: 0.28; }
[data-flower] .zl-bloom {
  --size: min(104vw, 760px);
  filter: drop-shadow(0 0 70px rgba(255, 240, 185, 0.75)) drop-shadow(0 46px 60px rgba(120, 100, 40, 0.16));
}
[data-flower] .zl-bloom i {
  filter: saturate(0.88) brightness(1.06);
  -webkit-mask: radial-gradient(circle, #000 30%, rgba(0, 0, 0, 0.55) 52%, transparent 70%);
  mask: radial-gradient(circle, #000 30%, rgba(0, 0, 0, 0.55) 52%, transparent 70%);
}

/* The pop-ups (bios, Contact Us, the policies) wear the same white and glacier blue. */
[role="dialog"] {
  background: #ffffff;
  border: 2px solid #3d9cc6;
  box-shadow: 0 0 28px rgba(80, 170, 215, 0.4), 0 40px 90px -30px rgba(60, 90, 130, 0.45);
}