/* Beach Insurance: atelier lane (prefix bia-). Page vignettes for 404, claim, contact, about, locations.
   Static (no-motion / no-JS) state is always the composed final state. Motion only under no-preference. */

/* ---------- 404: "Washed ashore" ---------- */
.bia-shore{max-width:26rem;margin:-.75rem auto 1.25rem}
.bia-shore-svg{display:block;width:100%;height:auto}
.bia-shore-label{font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:17px;font-style:italic;font-weight:600;letter-spacing:.3px}
.bia-glint{opacity:.7}

/* ---------- hero vignettes (claim lighthouse, contact mailbox) ---------- */
.bia-vanchor{position:relative;height:0;pointer-events:none}
.bia-vig{position:absolute;display:block;height:auto;overflow:hidden}
.bia-lh{width:88px;top:-.5rem;right:-.25rem}
.bia-mb{width:128px;top:-1.9rem;right:-.25rem}
@media (min-width:400px){.bia-lh{width:112px;top:-1.25rem}.bia-mb{width:140px}}
@media (min-width:768px){.bia-lh{width:170px;top:-.5rem;right:0}.bia-mb{width:156px;top:-1rem;right:0}}
@media (min-width:1024px){.bia-lh{width:240px;top:-1.25rem;right:3rem}.bia-mb{width:220px;top:-1.75rem;right:3rem}}
@media (min-width:1280px){.bia-lh,.bia-mb{right:6rem}}
@media (max-width:359px){.bia-vig{display:none}}
.bia-lh-beam{transform-box:view-box;transform-origin:120px 69px;transform:scaleX(.8)}
.bia-mb-flag{transform-box:view-box;transform-origin:58px 100px}

/* ---------- about: palmetto + crescent drawn in the sand ---------- */
.bia-sand{display:block;width:12.5rem;height:auto;margin:-.35rem 0 .85rem}
/* md+: the hero has min-height:300px, so an in-flow flourish would eat the slack that currently hides the
   site's own Inter font-swap reflow (CLS). Take it out of flow and trail it after the heading instead. */
@media (min-width:768px){.bia-sand{display:none}}
@media (min-width:1024px){.bia-sand{display:block;position:absolute;left:45rem;top:calc(4rem + 36px);width:16rem;margin:0;filter:drop-shadow(0 1px 1.5px rgba(13,59,110,.55))}}

/* ---------- locations: map pins on each city card (injected by JS, aria-hidden) ---------- */
.bia-pinned{position:relative}
.bia-pin{position:absolute;left:50%;top:-11px;width:14px;height:19px;margin-left:-7px;color:var(--bia-pin,#1565A8);pointer-events:none;z-index:1}
.bia-pin svg{display:block;width:14px;height:19px;filter:drop-shadow(0 1px 1px rgba(13,59,110,.28))}
.bia-pin-ring{position:absolute;left:0;top:16px;width:14px;height:5px;border-radius:50%;background:currentColor;opacity:0}
.bia-pins-wait .bia-pin svg{opacity:0}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .bia-glint{animation:bia-glint 3.2s ease-in-out infinite}
  .bia-glint:nth-child(2){animation-delay:-.7s}.bia-glint:nth-child(3){animation-delay:-1.5s}
  .bia-glint:nth-child(4){animation-delay:-2.2s}.bia-glint:nth-child(5){animation-delay:-2.8s}
  .bia-drift-a{animation:bia-drift-a 12s linear infinite}
  .bia-drift-b{animation:bia-drift-b 9s linear infinite}
  .bia-drift-c{animation:bia-drift-c 6s linear infinite}
  .bia-lap{animation:bia-lap 5s ease-in-out infinite alternate}
  .bia-bottle{transform-box:fill-box;transform-origin:50% 55%;animation:bia-bottle 5s ease-in-out infinite}
  .bia-crab{animation:bia-crab 4.4s ease-in-out .8s both}
  .bia-crab-bob{animation:bia-crab-bob .2s ease-in-out .8s 22 alternate}
  .bia-crab-ll{transform-box:fill-box;transform-origin:100% 20%;animation:bia-leg-l .2s ease-in-out .8s 22 alternate}
  .bia-crab-lr{transform-box:fill-box;transform-origin:0 20%;animation:bia-leg-r .2s ease-in-out .9s 22 alternate}
  .bia-crab-claw{transform-box:fill-box;transform-origin:0 100%;animation:bia-claw .32s ease-in-out 5.3s 4 alternate}
  .bia-crab-eyes{transform-box:fill-box;transform-origin:50% 100%;animation:bia-blink .16s ease-in-out 2.9s 2 alternate}

  .bia-lh-beam-l{animation:bia-beam-l 14s ease-in-out infinite}
  .bia-lh-beam-r{animation:bia-beam-r 14s ease-in-out infinite}
  .bia-lh-halo{animation:bia-halo 7s ease-in-out infinite}
  .bia-lh-gulls{animation:bia-float 4.5s ease-in-out infinite alternate}
  .bia-lh-waves{animation:bia-lap 5s ease-in-out infinite alternate}

  .bia-mb-card{transform-box:fill-box;transform-origin:50% 50%;animation:bia-mb-card 2.8s cubic-bezier(.3,.7,.35,1) .5s both}
  .bia-mb-flag{animation:bia-mb-flag .8s cubic-bezier(.3,1.55,.5,1) 3.3s both}
  .bia-mb-oats{transform-box:fill-box;transform-origin:50% 100%;animation:bia-sway 4.5s ease-in-out infinite alternate}

  .bia-sand path{stroke-dasharray:1 2;animation:bia-draw .45s ease-out both}
  .bia-sand-a{animation-duration:1.5s!important;animation-delay:.35s!important}
  .bia-sand-b{animation-delay:1.7s!important}
  .bia-sand-c:nth-of-type(3){animation-delay:2.05s}.bia-sand-c:nth-of-type(4){animation-delay:2.15s}
  .bia-sand-c:nth-of-type(5){animation-delay:2.25s}.bia-sand-c:nth-of-type(6){animation-delay:2.35s}
  .bia-sand-c:nth-of-type(7){animation-delay:2.45s}
  .bia-sand-d{animation-duration:.8s!important;animation-delay:2.8s!important}

  .bia-pin svg{transition:transform .25s ease}
  .bia-pinned:hover .bia-pin svg,.bia-pinned:focus-visible .bia-pin svg{transform:translateY(-3px)}
  .bia-pins-go .bia-pin svg{animation:bia-pin-drop .6s cubic-bezier(.3,1.45,.6,1) calc(var(--bia-i,0)*55ms) both}
  .bia-pins-go .bia-pin-ring{animation:bia-pin-ring .8s ease-out calc(var(--bia-i,0)*55ms + .42s) both}
}
/* offscreen or background tab: freeze everything in place */
.bia-off,.bia-off *,html.bia-hidden .bia-loop,html.bia-hidden .bia-loop *{animation-play-state:paused!important}

@keyframes bia-glint{0%,100%{opacity:.2}50%{opacity:.95}}
@keyframes bia-drift-a{to{transform:translateX(-104px)}}
@keyframes bia-drift-b{to{transform:translateX(80px)}}
@keyframes bia-drift-c{to{transform:translateX(-60px)}}
@keyframes bia-lap{from{transform:translateX(-5px)}to{transform:translateX(5px)}}
@keyframes bia-bottle{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(3px) rotate(6deg)}}
@keyframes bia-crab{0%{transform:translateX(-400px)}36%,50%{transform:translateX(-236px)}100%{transform:translateX(0)}}
@keyframes bia-crab-bob{to{transform:translateY(-1.4px)}}
@keyframes bia-leg-l{to{transform:rotate(14deg)}}
@keyframes bia-leg-r{to{transform:rotate(-14deg)}}
@keyframes bia-claw{to{transform:rotate(-30deg)}}
@keyframes bia-blink{to{transform:scaleY(.15)}}
@keyframes bia-beam-l{0%{transform:scaleX(1)}25%,75%{transform:scaleX(0)}100%{transform:scaleX(1)}}
@keyframes bia-beam-r{0%,25%{transform:scaleX(0)}50%{transform:scaleX(1)}75%,100%{transform:scaleX(0)}}
@keyframes bia-halo{0%,100%{opacity:.6}50%{opacity:.95}}
@keyframes bia-float{from{transform:translateY(0)}to{transform:translateY(-3px)}}
@keyframes bia-mb-card{0%{opacity:0;transform:translate(70px,-50px) rotate(16deg)}15%{opacity:1}45%{transform:translate(44px,-16px) rotate(-7deg)}72%{transform:translate(34px,0) rotate(0)}100%{opacity:1;transform:translate(0,0) rotate(0)}}
@keyframes bia-mb-flag{from{transform:rotate(-90deg)}to{transform:rotate(0)}}
@keyframes bia-sway{from{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg)}}
@keyframes bia-draw{from{stroke-dashoffset:1.02}to{stroke-dashoffset:0}}
@keyframes bia-pin-drop{0%{opacity:0;transform:translateY(-26px)}55%{opacity:1}100%{opacity:1;transform:translateY(0)}}
@keyframes bia-pin-ring{from{opacity:.55;transform:scale(.3)}to{opacity:0;transform:scale(2.2)}}