/* ===========================================================================
   Glassmorphism treatment for the "Let's Talk" contact block
   (home page and support page).

   Selectors lean on Framer's semantic data-framer-name attributes instead of
   its generated class hashes: the two pages hash the same components
   differently (the home page's badge pill is .framer-pnhrnl, support's is
   .framer-z76bm4) while the names stay identical on both.

   Rings and outlines are drawn with inset box-shadows rather than real
   borders so nothing changes box size - these components sit in fixed-width
   Framer layouts where an extra 2px would reflow the column.
   =========================================================================== */

[data-framer-name="Section-Contact"] {
  /* dark theme (the page default) */
  --glass-fill: rgba(255, 255, 255, 0.05);
  --glass-sheen: linear-gradient(140deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.04) 46%, rgba(54, 160, 253, 0.13));
  --glass-ring: rgba(255, 255, 255, 0.16);
  --glass-highlight: rgba(255, 255, 255, 0.24);
  --glass-drop: 0 30px 80px rgba(0, 0, 0, 0.5);

  --card-fill: rgba(12, 13, 17, 0.55);
  --card-ring: rgba(255, 255, 255, 0.11);
  --card-highlight: rgba(255, 255, 255, 0.09);

  --field-fill: rgba(255, 255, 255, 0.055);
  --field-ring: rgba(255, 255, 255, 0.16);
  --field-fill-focus: rgba(255, 255, 255, 0.1);

  --chip-fill: rgba(54, 160, 253, 0.28);
  --chip-ring: rgba(255, 255, 255, 0.28);

  --aurora-opacity: 0.9;
}

html:not([data-theme="dark"]) [data-framer-name="Section-Contact"] {
  /* The panel's own copy ("Let's Talk", the contact list, "AIMORE SUPPORT")
     is plain white text baked into the page - it was designed for the
     original solid brand-blue panel, not for glass. A pale, near-white glass
     fill (an earlier version of this file used ~0.18 alpha) reads as washed-
     out pastel AND drops that white text to near-invisible. Solved by going
     the other way: a deeply saturated blue glass, dark enough that white
     text and white icon strokes keep full contrast, with the "glass" quality
     coming from blur + a soft diagonal sheen rather than from being pale. */
  --glass-fill: rgba(37, 108, 189, 0.82);
  --glass-sheen: linear-gradient(140deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.02) 46%, rgba(15, 46, 84, 0.35));
  --glass-ring: rgba(255, 255, 255, 0.38);
  --glass-highlight: rgba(255, 255, 255, 0.55);
  --glass-drop: 0 30px 70px rgba(23, 65, 116, 0.35);

  --card-fill: rgba(255, 255, 255, 0.92);
  --card-ring: rgba(255, 255, 255, 0.8);
  --card-highlight: rgba(255, 255, 255, 0.95);

  --field-fill: rgba(255, 255, 255, 0.6);
  --field-ring: rgba(20, 55, 100, 0.25);
  --field-fill-focus: rgba(255, 255, 255, 0.88);

  /* Chips (the "AIMORE SUPPORT" pill, the three round contact icons) sit a
     shade darker than the panel behind them - the same layering trick as
     the dark theme's lighter-on-dark chips, just inverted - so their white
     label text and white icon strokes stay legible instead of blending
     into a same-tone fill. */
  --chip-fill: rgba(13, 42, 79, 0.4);
  --chip-ring: rgba(255, 255, 255, 0.4);

  --aurora-opacity: 0.6;
}

/* backdrop-filter can only reveal whatever sits behind it, and this section
   paints one flat colour - blurring that yields nothing at all. So the section
   lays down a soft multi-point colour field first, and the panel above blurs
   *that*. This is what actually reads as glass. The section already clips its
   overflow, so the blobs stay within its bounds. */
[data-framer-name="Section-Contact"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--aurora-opacity);
  background:
    radial-gradient(38% 42% at 18% 26%, rgba(54, 160, 253, 0.55), transparent 70%),
    radial-gradient(34% 38% at 84% 16%, rgba(35, 101, 159, 0.5), transparent 72%),
    radial-gradient(44% 40% at 74% 88%, rgba(54, 160, 253, 0.32), transparent 74%);
}

/* ---- the panel itself ---- */
[data-framer-name="Contact Panel"] {
  position: relative;
  z-index: 1;
  background-color: var(--glass-fill) !important;
  background-image: var(--glass-sheen) !important;
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  backdrop-filter: blur(30px) saturate(160%);
  box-shadow:
    inset 0 0 0 1px var(--glass-ring),
    inset 0 1px 0 var(--glass-highlight),
    var(--glass-drop);
}

/* ---- form card: a deeper pane layered on the panel, so the fields keep
        their contrast instead of washing into the glass behind them ---- */
[data-framer-name="Contact Form Card"] {
  background-color: var(--card-fill) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow:
    inset 0 0 0 1px var(--card-ring),
    inset 0 1px 0 var(--card-highlight),
    0 18px 50px rgba(0, 0, 0, 0.28);
}

/* ---- input fields ---- */
[data-framer-name="Contact Form Card"] .framer-form-input-wrapper {
  background-color: var(--field-fill);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Framer draws each field's outline on the wrapper's ::after, so recolour
   that rather than adding a second ring on top of it. */
[data-framer-name="Contact Form Card"] .framer-form-input-wrapper::after {
  border-color: var(--field-ring) !important;
  transition: border-color 0.2s ease;
}

[data-framer-name="Contact Form Card"] .framer-form-input-wrapper:focus-within {
  background-color: var(--field-fill-focus);
  box-shadow: 0 0 0 3px rgba(54, 160, 253, 0.18);
}

[data-framer-name="Contact Form Card"] .framer-form-input-wrapper:focus-within::after {
  border-color: rgba(84, 178, 255, 0.75) !important;
}

/* ---- the "AIMORE SUPPORT" pill and the three round contact icons ---- */
[data-framer-name="Opening"] > div:first-child,
[data-framer-name="Contact Methods"] > div > div:first-child {
  background-color: var(--chip-fill) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow:
    inset 0 0 0 1px var(--chip-ring),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* ---- send button: stays the solid CTA, but picks up the same glassy
        highlight and a blue glow so it reads as lit rather than flat ---- */
[data-framer-name="Contact Form Card"] button {
  background-image: linear-gradient(135deg, rgba(96, 184, 255, 0.98), rgba(54, 160, 253, 0.88)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 10px 30px rgba(54, 160, 253, 0.35);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

[data-framer-name="Contact Form Card"] button:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 14px 38px rgba(54, 160, 253, 0.48);
}

@media (prefers-reduced-motion: no-preference) {
  [data-framer-name="Contact Form Card"] button:hover {
    transform: translateY(-1px);
  }
}

/* Without backdrop-filter support the translucent fills would just look
   washed out over the aurora, so fall back to opaque surfaces. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  [data-framer-name="Contact Panel"] {
    background-color: rgba(24, 26, 32, 0.96) !important;
  }

  [data-framer-name="Contact Form Card"] {
    background-color: rgba(12, 13, 17, 0.96) !important;
  }

  html:not([data-theme="dark"]) [data-framer-name="Contact Panel"] {
    background-color: rgba(43, 122, 190, 0.97) !important;
  }

  html:not([data-theme="dark"]) [data-framer-name="Contact Form Card"] {
    background-color: rgba(255, 255, 255, 0.97) !important;
  }
}