/* Beach Insurance: micro-interactions (lane "micro", prefix bim-) 2026-09-28
   Hover/focus bells: nav wave squiggle, CTA beach umbrella, card lift + shield,
   quick-quote press bounce, footer wave dash, one focus ring.
   Additive only. Transform/opacity/clip-path + SVG stroke. No layout changes. */

/* ── 1. Focus ring: sky on light surfaces, sunset gold on dark ones ─────────
   sky #2E90D1: 3.48 vs white, 3.15 vs bi-light, 3.07 vs sand, 3.23 vs navy.
   light gold #F2C94C: 7.09 vs navy, 3.83 vs bi-blue.  navy on gold: 4.73. */
:root { --bim-ring: #2E90D1; }
#main-nav, footer, section.text-white, section.bg-bi-blue, section.bg-bi-navy,
.bg-bi-navy.text-white { --bim-ring: #F2C94C; }
#main-nav .bg-white { --bim-ring: #1565A8; }         /* dropdown panels: 6.07 vs white */
#main-nav a.bg-bi-gold { --bim-ring: #0D3B6E; }      /* the gold "Get a Quote" item */

#main-nav a:focus-visible,
a[href="/get-an-insurance-quote/"]:is(.bg-bi-gold, .bg-bi-blue):focus-visible,
.bim-card a:focus-visible,
.sm\:grid-cols-2.gap-3 > a.p-3.rounded-lg:focus-visible,
.lg\:grid-cols-4.gap-6 > a.rounded-2xl.border-2:focus-visible,
.lg\:grid-cols-6.gap-3 > a.rounded-xl:focus-visible,
footer a:focus-visible {
  outline: 3px solid var(--bim-ring);
  outline-offset: 2px;
  border-radius: 6px;
}
/* nav items sit flush against each other, so their ring goes inside */
#main-nav a:focus-visible { outline-offset: -4px; border-radius: 4px; }

/* ── 2. Dropdowns: open for keyboard users too (were hover-only) ──────────────
   :focus-within, not :has(:focus-visible): Chrome drops focus mid-Tab with the
   latter (focus-visible flag clears during the move, the panel hides, focus lost). */
#main-nav .group:focus-within > div,
#main-nav .group\/sub:focus-within > div { display: block; }
#main-nav .group.bim-shut > div { display: none !important; }  /* Escape closes */

/* ── 3. Nav: hand-drawn wave squiggle draws in under top-level items ─────── */
#main-nav .md\:flex > .group > a { position: relative; }
#main-nav .md\:flex > .group > a::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: 7px;
  height: 7px;
  background: #F2C94C;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 8'%3E%3Cpath d='M0 4.4C3.4 1.3 6.6 1.1 10 4.1S16.9 7.3 20 4.6 26.3 1.5 30 3.9 36.5 7.1 40 4.4' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E") 0 50% / 26px 7px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 8'%3E%3Cpath d='M0 4.4C3.4 1.3 6.6 1.1 10 4.1S16.9 7.3 20 4.6 26.3 1.5 30 3.9 36.5 7.1 40 4.4' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E") 0 50% / 26px 7px repeat-x;
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
  transition: clip-path .42s cubic-bezier(.65, 0, .35, 1);
}
#main-nav .md\:flex > .group > a.bg-bi-gold::after { background: #0D3B6E; }
#main-nav .md\:flex > .group > a:focus-visible::after,
#main-nav .md\:flex > .group > a.bg-bi-blue::after { clip-path: inset(0 0 0 0); }  /* current page keeps its wave */
@media (hover: hover) {
  #main-nav .md\:flex > .group:hover > a::after { clip-path: inset(0 0 0 0); }
}

/* ── 4. Quote CTAs: a tiny beach umbrella pops open beside the label ─────── */
.bim-lbl { position: relative; display: inline-block; transition: transform .32s cubic-bezier(.34, 1.4, .64, 1); }
.bim-umb {
  position: absolute; left: 100%; top: 50%;
  width: 1.45em; height: 1.45em; margin: -.86em 0 0 .28em;
  opacity: 0;
  transform: translateY(.25em) rotate(-28deg) scale(.6);
  transform-origin: 50% 90%;
  transition: opacity .18s ease-out, transform .38s cubic-bezier(.34, 1.56, .64, 1);
  pointer-events: none;
  --bim-u1: #F2C94C; --bim-u2: #FFFFFF; --bim-us: #FFFFFF; --bim-uo: #0D3B6E;   /* on blue buttons */
}
.bg-bi-gold > .bim-lbl > .bim-umb { --bim-u1: #0D3B6E; --bim-u2: #FFFFFF; --bim-us: #0D3B6E; --bim-uo: #0D3B6E; }
.bim-umb svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bim-umb .bim-c1 { fill: var(--bim-u1); }
.bim-umb .bim-c2 { fill: var(--bim-u2); }
.bim-umb .bim-canopy path { stroke: var(--bim-uo); stroke-width: .7; stroke-linejoin: round; }
.bim-umb .bim-pole { fill: none; stroke: var(--bim-us); stroke-width: 1.6; stroke-linecap: round; }
.bim-umb .bim-canopy { transform-origin: 12px 3px; transform: scale(.18, .7); transition: transform .42s cubic-bezier(.34, 1.7, .5, 1) .04s; }
.bim-cta:focus-visible .bim-lbl { transform: translateX(-.86em); }
.bim-cta:focus-visible .bim-umb { opacity: 1; transform: rotate(-14deg); }
.bim-cta:focus-visible .bim-canopy { transform: none; }
@media (hover: hover) {
  .bim-cta:hover .bim-lbl { transform: translateX(-.86em); }
  .bim-cta:hover .bim-umb { opacity: 1; transform: rotate(-14deg); }
  .bim-cta:hover .bim-canopy { transform: none; }
}

/* ── 5. Home coverage cards lift; icons get a shield outline drawn round them */
.grid > .rounded-2xl.p-8.transition-shadow {
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
}
.grid > .rounded-2xl.p-8.transition-shadow:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 22px 40px -18px rgba(13, 59, 110, .38);
}
@media (hover: hover) {
  .grid > .rounded-2xl.p-8.transition-shadow:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 40px -18px rgba(13, 59, 110, .38);
  }
}
.bim-shh { position: relative; }
.bim-shield { position: absolute; pointer-events: none; overflow: visible; }
.bim-shield path {
  fill: none; stroke: var(--bim-sh, #2E90D1); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset .7s cubic-bezier(.65, 0, .35, 1);
}
.bim-sh-card { width: 70px; height: 72.8px; left: -11px; top: -10px; }   /* 48px tile */
.bim-sh-adv  { width: 76px; height: 79px;   left: -10px; top: -13px; }   /* 56px circle */
.bg-bi-navy .bim-shield { --bim-sh: #F2C94C; }
.bim-card:focus-within .bim-shield path { stroke-dashoffset: 0; }
@media (hover: hover) {
  .bim-card:hover .bim-shield path,
  .bim-adv:hover .bim-shield path { stroke-dashoffset: 0; }
}

/* "Independent Advantage" icons: lift on hover, bob once on scroll-in */
.bim-adv .bim-shh { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
@media (hover: hover) {
  .bim-adv:hover .bim-shh { transform: translateY(-5px); }
}
.bim-bob { animation: bim-bob 1s cubic-bezier(.3, .7, .4, 1) var(--bim-d, 0ms); }
@keyframes bim-bob {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-8px); }
  56% { transform: translateY(0); }
  76% { transform: translateY(-2.5px); }
}

/* ── 6. Quick Quote tiles: pressed micro-bounce. CSS only, no listeners, no form logic.
   A = home "Quick Quote Request" card; B = /get-an-insurance-quote/ big type tiles;
   C = that page's small secondary tiles. The tile box never moves (only its icon/label
   inside do), so the click target is unchanged. */
:is(.sm\:grid-cols-2.gap-3 > a.p-3.rounded-lg, .lg\:grid-cols-4.gap-6 > a.rounded-2xl.border-2, .lg\:grid-cols-6.gap-3 > a.rounded-xl) { transition: border-color .15s, background-color .15s, box-shadow .2s ease; }
:is(.sm\:grid-cols-2.gap-3 > a.p-3.rounded-lg > div, .lg\:grid-cols-4.gap-6 > a.rounded-2xl.border-2 > div, .lg\:grid-cols-6.gap-3 > a.rounded-xl > svg) {
  transition: transform .5s cubic-bezier(.34, 1.8, .5, 1), background-color .3s, color .3s;
}
.sm\:grid-cols-2.gap-3 > a.p-3.rounded-lg > span { transition: transform .5s cubic-bezier(.34, 1.8, .5, 1), color .15s; }
:is(.sm\:grid-cols-2.gap-3 > a.p-3.rounded-lg, .lg\:grid-cols-4.gap-6 > a.rounded-2xl.border-2, .lg\:grid-cols-6.gap-3 > a.rounded-xl):active {
  box-shadow: inset 0 2px 5px rgba(13, 59, 110, .14), 0 0 0 3px rgba(46, 144, 209, .28);
  transition-duration: .06s;
}
:is(.sm\:grid-cols-2.gap-3 > a.p-3.rounded-lg, .lg\:grid-cols-4.gap-6 > a.rounded-2xl.border-2, .lg\:grid-cols-6.gap-3 > a.rounded-xl):active > :is(div, svg) { transform: scale(.8) rotate(-10deg); transition-duration: .09s; }
.sm\:grid-cols-2.gap-3 > a.p-3.rounded-lg:active > span { transform: translateX(3px); transition-duration: .09s; }
@media (hover: hover) {
  :is(.sm\:grid-cols-2.gap-3 > a.p-3.rounded-lg, .lg\:grid-cols-4.gap-6 > a.rounded-2xl.border-2, .lg\:grid-cols-6.gap-3 > a.rounded-xl):hover > :is(div, svg) { transform: scale(1.08); }
  :is(.sm\:grid-cols-2.gap-3 > a.p-3.rounded-lg, .lg\:grid-cols-4.gap-6 > a.rounded-2xl.border-2, .lg\:grid-cols-6.gap-3 > a.rounded-xl):hover:active > :is(div, svg) { transform: scale(.8) rotate(-10deg); }
}

/* ── 7. Footer links: a little wave dash slides in before the text ───────── */
footer .grid ul a {
  position: relative; display: inline-block;
  transition: transform .28s cubic-bezier(.34, 1.4, .64, 1), color .15s;
}
footer .grid ul a::before {
  content: "";
  position: absolute; left: -17px; top: 50%;
  width: 13px; height: 6px; margin-top: -3px;
  background: #F2C94C;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 6'%3E%3Cpath d='M1 3.2C2.9.8 5 .8 7 3s4.1 2.2 6-.2' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 6'%3E%3Cpath d='M1 3.2C2.9.8 5 .8 7 3s4.1 2.2 6-.2' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .2s ease, transform .3s cubic-bezier(.34, 1.4, .64, 1);
  pointer-events: none;
}
footer .grid ul a:focus-visible { transform: translateX(17px); }
footer .grid ul a:focus-visible::before { opacity: 1; transform: none; }
@media (hover: hover) {
  footer .grid ul a:hover { transform: translateX(17px); }
  footer .grid ul a:hover::before { opacity: 1; transform: none; }
}

/* ── Reduced motion: same end states, no travel ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #main-nav .md\:flex > .group > a::after,
  .bim-lbl, .bim-umb, .bim-canopy, .bim-shield path, .sm\:grid-cols-2.gap-3 > a.p-3.rounded-lg > span,
  :is(.sm\:grid-cols-2.gap-3 > a.p-3.rounded-lg, .lg\:grid-cols-4.gap-6 > a.rounded-2xl.border-2, .lg\:grid-cols-6.gap-3 > a.rounded-xl) > :is(div, svg),
  .bim-adv .bim-shh, footer .grid ul a, footer .grid ul a::before,
  .grid > .rounded-2xl.p-8.transition-shadow { transition: none !important; }
  .bim-bob { animation: none !important; }
  .grid > .rounded-2xl.p-8.transition-shadow:hover,
  .grid > .rounded-2xl.p-8.transition-shadow:focus-within,
  .bim-adv:hover .bim-shh, .sm\:grid-cols-2.gap-3 > a.p-3.rounded-lg:active > span,
  :is(.sm\:grid-cols-2.gap-3 > a.p-3.rounded-lg, .lg\:grid-cols-4.gap-6 > a.rounded-2xl.border-2, .lg\:grid-cols-6.gap-3 > a.rounded-xl) > :is(div, svg) { transform: none !important; }
  .bim-cta:hover .bim-lbl, .bim-cta:focus-visible .bim-lbl { transform: translateX(-.86em); }
  .bim-cta .bim-umb { transform: rotate(-14deg); }
  .bim-cta .bim-canopy { transform: none; }
  footer .grid ul a:hover, footer .grid ul a:focus-visible { transform: translateX(17px); }
}