/* Home banner: coverflow-style slideshow with a colour glow and progress dots. Load after style.css.
   Sizes and positions are set in whole pixels by banner.js so the pictures stay sharp. */
.banner{padding:22px 0 8px}
.bn-stage{
  --sh:clamp(400px,45vw,560px);--pad:38px;--maxw:.72;--sl:.17;--sr:.83;--ease:cubic-bezier(.22,.8,.2,1);--spring:cubic-bezier(.34,1.35,.5,1);--ring:5px;
  position:relative;height:var(--sh);border-radius:28px;overflow:hidden;isolation:isolate;
  background:linear-gradient(135deg,#f4ece3,#fff 55%,#faf2ea);border:1px solid var(--border);box-shadow:var(--shadow)
}
/* Soft glow made from the picture on screen; fades from one slide's colours to the next. */
.bn-aura{position:absolute;inset:-60px;z-index:-2;background-size:cover;background-position:center;filter:blur(48px) saturate(1.35);opacity:0;transform:scale(1.15);transition:opacity 1.1s ease,transform 6s ease-out}
.bn-aura.on{opacity:.8;transform:scale(1)}
.bn-stage::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(254,247,242,.38),rgba(254,247,242,.06) 60%,rgba(254,247,242,.28))}

/* Coverflow: the centre picture is full size and sharp; neighbours sit smaller behind it. */
.bn-slide{
  position:absolute;left:0;top:0;display:block;width:min(60%,420px);aspect-ratio:var(--ar,1);
  transform:translate(var(--x0,0px),var(--y,0px)) scale(.6);opacity:0;visibility:hidden;z-index:0;
  transition:transform 1.05s var(--spring),opacity .7s ease,visibility 0s 1s
}
.bn-slide[data-pos]{visibility:visible;transition-delay:0s}
.bn-slide[data-pos="0"]{transform:translate(var(--x0,0px),var(--y,0px));opacity:1;z-index:3}
.bn-slide[data-pos="prev"]{transform:translate(var(--xl,0px),var(--y,0px)) scale(.8) rotate(-5deg);opacity:.7;z-index:2;cursor:pointer}
.bn-slide[data-pos="next"]{transform:translate(var(--xr,0px),var(--y,0px)) scale(.8) rotate(5deg);opacity:.7;z-index:2;cursor:pointer}
.bn-slide[data-pos="prev"]:hover,.bn-slide[data-pos="next"]:hover{opacity:.95}
.bn-slide[data-pos="far"]{pointer-events:none}
.bn-stage.intro .bn-slide[data-pos="prev"],.bn-stage.intro .bn-slide[data-pos="next"]{transition-delay:.2s}
.bn-slide:focus-visible{outline:3px solid var(--brand);outline-offset:6px;border-radius:22px}

.bn-card{position:absolute;inset:0;display:block;border-radius:20px;overflow:hidden;background:var(--surface);
  box-shadow:0 0 0 var(--ring) #fff,0 28px 60px -14px rgba(40,41,32,.5)}
.bn-img{width:100%;height:100%;object-fit:cover;display:block}
/* Light sweep each time a slide comes to the front */
.bn-card::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
/* A soft ring ripples out from the picture each time it arrives */
.bn-slide[data-pos="0"] .bn-card{animation:bnRing 1.5s .35s ease-out 1}
.bn-slide[data-pos="0"] .bn-card::after{animation:bnShine 1.3s .45s ease-out 1 both}

.bn-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--brand-dark);font-size:1.9rem;line-height:1;padding:0 0 4px;cursor:pointer;display:grid;place-items:center;box-shadow:var(--shadow);z-index:5;transition:background .15s,transform .2s,color .15s}
.bn-nav:hover{background:var(--brand);color:var(--on-brand);transform:translateY(-50%) scale(1.08)}
.bn-nav.prev{left:16px}.bn-nav.next{right:16px}

/* Dots double as the autoplay timer: the active one fills, and the next slide opens when it is full. */
.bn-dots{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;gap:8px;align-items:center;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.85);backdrop-filter:blur(6px);z-index:5}
.bn-dots button{position:relative;overflow:hidden;width:9px;height:9px;padding:0;border:0;border-radius:99px;background:var(--line2);cursor:pointer;transition:width .35s var(--ease),background .2s}
.bn-dots button[aria-current="true"]{width:36px}
.bn-dots button::after{content:"";position:absolute;inset:0;background:var(--brand);transform:scaleX(0);transform-origin:left}
.bn-dots button[aria-current="true"]::after{transform:scaleX(var(--p,0))}
.bn-stage.single .bn-nav,.bn-stage.single .bn-dots{display:none}
.bn-stage.single .bn-slide{cursor:pointer}

@keyframes bnRing{from{box-shadow:0 0 0 var(--ring) #fff,0 0 0 var(--ring) rgba(60,61,49,.55),0 28px 60px -14px rgba(40,41,32,.5)}to{box-shadow:0 0 0 var(--ring) #fff,0 0 0 26px rgba(60,61,49,0),0 28px 60px -14px rgba(40,41,32,.5)}}
@keyframes bnShine{from{transform:translateX(-120%)}to{transform:translateX(120%)}}

@media(max-width:700px){
  .banner{padding:14px 0 4px}
  .bn-stage{--sh:calc((100vw - 32px) * .92);--pad:31px;--maxw:.74;--sl:.06;--sr:.94;--ring:4px;border-radius:20px}
  .bn-nav{display:none}
  .bn-card{border-radius:16px}
  .bn-dots{bottom:4px;padding:6px 10px}
}

/* Visitors whose device asks for less motion: no swinging, ripple or shine, just a gentle fade between pictures.
   (style.css switches all motion off for them, so these rules put back only the fade.) */
@media(prefers-reduced-motion:reduce){
  .bn-slide{transition:opacity .6s ease,visibility 0s .6s!important}
  .bn-slide[data-pos]{transition-delay:0s!important}
  .bn-aura{transition:opacity 1s ease!important}
  .bn-dots button{transition:width .2s!important}
}

@media(max-width:700px){.bn-aura{filter:blur(28px);inset:-30px;transition:opacity 1.1s ease}}