/* Reusable banner plane (Flyerz Friday, closing dates, ...). Config lives in js/banner-plane.js */
.bp-sky{position:relative;height:96px;overflow:hidden;pointer-events:none;margin:0 0 -6px}
.bp-tow{position:absolute;left:0;top:10px;display:flex;align-items:center;will-change:transform;transform:translateX(-100%);animation:bp-tow 26s infinite}
@keyframes bp-tow{
  0%{transform:translateX(-100%);animation-timing-function:cubic-bezier(.25,.6,.5,1)}
  30%{transform:translateX(calc(50vw - 50% - 7vw));animation-timing-function:linear}
  70%{transform:translateX(calc(50vw - 50% + 7vw));animation-timing-function:cubic-bezier(.5,0,.75,.4)}
  100%{transform:translateX(100vw)}}
@keyframes bp-tow-sm{
  0%{transform:translateX(-100%);animation-timing-function:cubic-bezier(.25,.6,.5,1)}
  30%{transform:translateX(calc(50vw - 50% - 1vw));animation-timing-function:linear}
  70%{transform:translateX(calc(50vw - 50% + 1vw));animation-timing-function:cubic-bezier(.5,0,.75,.4)}
  100%{transform:translateX(100vw)}}
.bp-in{display:flex;align-items:center;animation:bp-bob 3.4s ease-in-out infinite alternate}
@keyframes bp-bob{from{transform:translateY(-4px)}to{transform:translateY(4px)}}
.bp-banner{position:relative;display:flex;align-items:center;gap:.4em;height:62px;padding:0 24px;margin-left:10px;background:#fff;color:var(--navy,#16163a);
  font-weight:800;font-size:1.3rem;white-space:nowrap;text-transform:uppercase;letter-spacing:-.01em;border:3px solid var(--navy,#16163a);border-right-width:6px;border-radius:4px;
  filter:drop-shadow(0 6px 6px rgba(20,20,60,.18));transform-origin:100% 50%;animation:bp-wave 1.8s ease-in-out infinite alternate}
.bp-banner::before{content:"";position:absolute;left:-11px;top:-9px;bottom:-9px;width:6px;border-radius:3px;background:var(--navy,#16163a)}
.bp-banner b{color:var(--red,#e3262f)}
.bp-banner i{font-style:normal;opacity:.45}
@keyframes bp-wave{from{transform:skewY(-1.2deg) scaleY(.98)}to{transform:skewY(1.2deg) scaleY(1.02)}}
.bp-rope{flex:none;width:46px;height:40px;margin:0 -6px 0 -2px}
.bp-rope path{fill:none;stroke:#4b4f5c;stroke-width:2;stroke-linecap:round}
.bp-plane{position:relative;flex:none;width:124px;aspect-ratio:1508/823;filter:drop-shadow(0 6px 5px rgba(20,20,60,.18));transform:rotate(-3deg)}
.bp-plane .bp-flip{position:absolute;inset:0;transform:scaleX(-1)}
.bp-plane .pl-img{position:absolute;inset:0;width:100%;height:100%}
.bp-santa{flex:none;width:220px;height:84px;filter:drop-shadow(0 6px 5px rgba(20,20,60,.18))}
.bp-santa .leg{transform-box:fill-box;transform-origin:50% 0;animation:bp-gallop .5s ease-in-out infinite alternate}
.bp-santa .leg.b{animation-delay:-.25s}
@keyframes bp-gallop{from{transform:rotate(-22deg)}to{transform:rotate(22deg)}}
.bp--santa .bp-banner{border-color:#b3121c;color:#0f5132}
.bp--santa .bp-banner::before{background:#b3121c}
.bp--santa .bp-banner b{color:#b3121c}
@media (max-width:700px){
  .bp-sky{height:88px}
  .bp-tow{animation-name:bp-tow-sm}
  .bp-banner{height:auto;padding:6px 12px;flex-direction:column;align-items:flex-start;gap:0;font-size:.9rem;line-height:1.1}
  .bp-banner b{font-size:1.15rem}.bp-banner i{display:none}
  .bp-plane{width:78px}.bp-santa{width:150px;height:58px}.bp-rope{width:30px}
}
@media (prefers-reduced-motion:reduce){.bp-tow{animation:none;transform:translateX(calc(50vw - 50%))}.bp-in,.bp-banner,.bp-santa .leg,.bp-sky .prop-spin{animation:none}}

/* Flyerz Friday strip under the hero */
.ff-strip{max-width:980px;margin:18px auto 6px;padding:18px 22px;border-radius:18px;background:linear-gradient(135deg,#16163a,#2b2b6e);color:#fff;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;box-shadow:0 10px 30px rgba(20,20,60,.18)}
.ff-strip h2{margin:0 0 4px;font-size:clamp(1.2rem,2.6vw,1.6rem);letter-spacing:-.02em;line-height:1.1}
.ff-strip h2 span{color:#ffcc33}
.ff-strip p{margin:0;opacity:.88;font-size:.98rem;max-width:560px}
.ff-cd{display:flex;gap:8px}
.ff-cd div{min-width:64px;padding:8px 6px;border-radius:12px;background:rgba(255,255,255,.12);text-align:center}
.ff-cd b{display:block;font-size:1.7rem;line-height:1;font-variant-numeric:tabular-nums}
.ff-cd small{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;opacity:.8}
@media (max-width:560px){.ff-strip{margin:12px 10px 4px;padding:14px}.ff-cd{width:100%;justify-content:center}}

/* long daily lines: wrap to 2 lines, keep readable */
.bp--wrap{height:104px}
.bp--wrap .bp-banner{display:block;height:auto;max-width:min(640px,calc(100vw - 230px));padding:8px 20px;white-space:normal;font-size:1.12rem;line-height:1.18;text-transform:none;text-wrap:balance}
@media (max-width:700px){
  .bp--wrap{height:100px}
  .bp--wrap .bp-banner{max-width:calc(100vw - 132px);padding:6px 10px;font-size:.84rem;line-height:1.16}
  .bp--wrap .bp-banner b{font-size:inherit}
}
.ff-strip .ff-date{margin-top:4px;opacity:1;color:#ffcc33}

/* ===== LAUNCH 25 Oct 2026: rippling cloth tow-banner, swallow-tail, streamers, glitter + confetti (built by js/banner-plane.js) ===== */
.bp-js .bp-in{position:relative;transform-origin:70% 50%;animation:bp-bob2 3.4s ease-in-out infinite alternate}
@keyframes bp-bob2{from{transform:translateY(-4px) rotate(-.7deg)}to{transform:translateY(4px) rotate(.7deg)}}
.bp-js .bp-banner{visibility:hidden;animation:none;filter:none}
.bp-fx{position:absolute;left:0;top:0;pointer-events:none}
.bp-cloth{position:absolute;pointer-events:none;transform-origin:100% 50%;animation:bp-sag 2.9s ease-in-out infinite alternate}
@keyframes bp-sag{from{transform:rotate(-1.1deg)}to{transform:rotate(1.4deg)}}
.bp-sl{position:absolute;top:0;height:100%;overflow:hidden;will-change:transform;animation:bp-rip 1.5s ease-in-out infinite alternate;animation-delay:var(--d)}
@keyframes bp-rip{from{transform:translateY(calc(var(--a)*-1))}to{transform:translateY(var(--a))}}
.bp-sk{position:absolute;inset:0;display:block;animation:bp-skew 1.5s ease-in-out infinite alternate;animation-delay:calc(var(--d) - .75s)}
@keyframes bp-skew{from{transform:skewY(calc(var(--k)*-1))}to{transform:skewY(var(--k))}}
.bp-fl{position:absolute;inset:0;display:block;animation:bp-flut .62s ease-in-out infinite alternate;animation-delay:var(--d2)}
@keyframes bp-flut{from{transform:translateY(calc(var(--f)*-1))}to{transform:translateY(var(--f))}}
.bp-sk .bp-banner{position:absolute;top:0;margin:0;visibility:visible;animation:none;filter:none;border-left-width:0;max-width:none}
.bp-sk .bp-banner::before{display:none}
.bp-sk::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 40%,rgba(22,22,58,.09));opacity:var(--sh,.5)}
.bp-shadow{position:absolute;left:6%;right:2%;top:100%;height:12px;margin-top:10px;border-radius:50%;background:radial-gradient(closest-side,rgba(20,20,60,.16),rgba(20,20,60,0));pointer-events:none}
.bp-tail{position:absolute;left:-56px;top:-4px;overflow:visible;--a:6.5px;--d:0s;animation:bp-tailrip 1.5s ease-in-out infinite alternate}
@keyframes bp-tailrip{from{transform:translateY(calc(var(--a)*-1))}to{transform:translateY(var(--a))}}
.bp-tail path{fill:none;stroke:inherit;stroke-width:3.2;stroke-linecap:round}
.bp-tail .g1b{transform:translateY(3px)}
@media (max-width:700px){.bp-tail{--a:4px;width:44px;left:-42px}.bp-sk .bp-banner{border-radius:3px}}
@media (prefers-reduced-motion:reduce){.bp-cloth,.bp-sl,.bp-sk,.bp-fl,.bp-tail{animation:none}.bp-fx{display:none}}
.bp--tail .bp-banner{padding-left:50px}
@media (max-width:700px){.bp--tail .bp-banner{padding-left:44px}}