/* bandeau.css */

:root{
  --po-violet:#2E2C62;
  --po-violet-deep:#171338;
  --po-violet-soft:#6671C7;
  --po-ink:#0E1030;
  --po-light:#E6E8FF;

  --po-gold-1:#E8DCC8;
  --po-gold-2:#C8AD7F;
  --po-orange:#B85C3A;

  --po-dock-h:72px;
  --po-dock-gap:10px;

  /* période horizontale exacte du motif diagonal -45deg
     avec répétition 28px sur l’axe du gradient */
  --po-stripe-shift:39.598px;
  --po-text-speed:35s;
}

/* =========================================================
   BANDEAU HAUT
   ========================================================= */

.po-banner{
  width:100%;
  margin:0;
  padding:0;
}

.po-banner__top{
  position:relative;
  isolation:isolate;
  width:100%;
  margin:0;
  padding:22px 18px 22px;
  overflow:hidden;
  border-radius:0;

  background:
    radial-gradient(
      160% 220% at 12% 0%,
      rgba(255,255,255,.84) 0%,
      rgba(255,255,255,.30) 36%,
      transparent 58%
    ),
    radial-gradient(
      120% 180% at 88% 12%,
      rgba(230,232,255,.50) 0%,
      rgba(230,232,255,.16) 40%,
      transparent 68%
    ),
    radial-gradient(
      160% 200% at 50% 40%,
      rgba(255,255,255,.97) 0%,
      rgba(203,207,252,.96) 45%,
      rgba(157,163,234,.93) 100%
    );

  box-shadow:
    0 0 0 1px rgba(230,231,255,.92),
    0 10px 24px rgba(158,168,255,.16),
    0 4px 12px rgba(0,0,0,.05);
}

/* Rayures animées */
.po-banner__top::before{
  content:"";
  position:absolute;
  top:-140px;
  bottom:-140px;
  left:-50%;
  width:200%;
  z-index:0;
  pointer-events:none;
  opacity:.92;
  will-change:transform;

  background:
    repeating-linear-gradient(
      -45deg,
      rgba(46,44,98,.030) 0 14px,
      rgba(46,44,98,.075) 14px 28px
    );

  transform:translate3d(0,0,0);
  animation:poStripeDrift 1s linear infinite;
}

/* Reflet + petits scintillements */
.po-banner__top::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.95;

  background:
    radial-gradient(circle at 12% 22%, rgba(255,255,255,.80) 0 1px, transparent 2px),
    radial-gradient(circle at 26% 68%, rgba(255,255,255,.62) 0 1px, transparent 2px),
    radial-gradient(circle at 41% 31%, rgba(255,255,255,.72) 0 1.3px, transparent 2.4px),
    radial-gradient(circle at 59% 62%, rgba(255,255,255,.70) 0 1px, transparent 2px),
    radial-gradient(circle at 76% 24%, rgba(255,255,255,.84) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 88% 58%, rgba(255,255,255,.68) 0 1px, transparent 2px),
    linear-gradient(
      115deg,
      transparent 0%,
      rgba(255,255,255,.12) 22%,
      transparent 42%
    );

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.35),
    inset 0 -10px 24px rgba(46,44,98,.04);

  animation:
    poSparkleBlink 4.8s ease-in-out infinite,
    poShimmerSlide 6.8s linear infinite;
}

.po-banner__corner{
  position:absolute;
  top:14px;
  left:14px;
  z-index:2;
  width:42px;
  height:42px;
  border-radius:14px;

  display:grid;
  place-items:center;

  color:#5B3A15;
  background:
    linear-gradient(
      135deg,
      rgba(232,220,200,.98),
      rgba(200,173,127,.98)
    );

  box-shadow:
    0 0 0 1px rgba(255,255,255,.55),
    0 8px 18px rgba(120,98,56,.14),
    0 0 18px rgba(200,173,127,.16);

  animation:poBadgeBreath 3.2s ease-in-out infinite;
}

.po-banner__corner-icon{
  font-size:1rem;
  line-height:1;
  animation:poIconBlink 2.15s ease-in-out infinite;
}

.po-banner__corner--br{
  top:auto;
  left:auto;
  right:14px;
  bottom:14px;
}

.po-banner__heading{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  text-align:center;
  margin:0 0 12px;
}

.po-banner__title-wrap{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}

.po-banner__title-dot{
  width:12px;
  height:12px;
  border-radius:999px;
  flex:0 0 12px;
  background:var(--po-orange);
  box-shadow:
    0 0 0 8px rgba(184,92,58,.10),
    0 0 18px rgba(184,92,58,.28);
  animation:poPulseStrong 1.7s ease-in-out infinite;
}

.po-banner__title{
  margin:0;
  font-family:"Big Caslon","Bodoni Moda",var(--ff-serif),Georgia,serif;
  font-weight:900;
  font-size:2.05rem;
  line-height:1.1;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--po-violet);
  text-shadow:
    0 6px 16px rgba(14,16,48,.10),
    0 0 18px rgba(102,113,199,.06);
  animation:poTitleGlow 3.8s ease-in-out infinite;
}

.po-banner__date-pill{
  position:relative;
  overflow:hidden;
  isolation:isolate;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:8px 16px;
  border-radius:999px;

  font-family:Impact,"Bodoni Moda",var(--ff-serif),system-ui,sans-serif;
  font-size:.98rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#3E2E10;

  background:linear-gradient(135deg,var(--po-gold-1),var(--po-gold-2));

  box-shadow:
    0 0 0 1px rgba(255,255,255,.55),
    0 8px 18px rgba(120,98,56,.12),
    0 0 16px rgba(200,173,127,.16);

  animation:poPillFloat 3.8s ease-in-out infinite;
}

.po-banner__date-pill::after{
  content:"";
  position:absolute;
  top:-30%;
  bottom:-30%;
  left:-140%;
  width:52%;
  pointer-events:none;
  transform:skewX(-20deg);
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.10) 35%,
    rgba(255,255,255,.42) 50%,
    rgba(255,255,255,.10) 65%,
    rgba(255,255,255,0) 100%
  );
  animation:poDateShine 3.4s ease-in-out infinite;
}

.po-banner__intro{
  position:relative;
  z-index:2;
  max-width:1180px;
  margin:0 auto 16px;
  text-align:center;
  font-family:"Big Caslon","Bodoni Moda",var(--ff-serif),Georgia,serif;
  font-size:1.28rem;
  line-height:1.78;
  color:rgba(14,16,48,.90);
}

.po-banner__ticker{
  position:relative;
  z-index:2;
  width:min(1520px, 100%);
  margin:0 auto;
  overflow:hidden;
  border-radius:999px;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.62),
      rgba(230,232,255,.50)
    );
  box-shadow:
    inset 0 0 0 1px rgba(230,231,255,.95),
    0 6px 14px rgba(158,168,255,.12);
}

.po-banner__ticker::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-24%;
  width:24%;
  pointer-events:none;
  transform:skewX(-22deg);
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.16) 50%,
    rgba(255,255,255,0) 100%
  );
  animation:poTickerShine 8s linear infinite;
}

.po-banner__ticker-track{
  width:max-content;
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  animation:poMarquee var(--po-text-speed) linear infinite;
}

.po-banner__ticker-seq{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:28px;
  padding:10px 28px 10px 0;
  flex:0 0 auto;
}

.po-banner__ticker-seq span{
  white-space:nowrap;
  font-family:Inter, sans-serif;
  font-size:.88rem;
  font-weight:800;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:rgba(46,44,98,.88);
}

.po-ticker-accent{
  color:var(--po-orange) !important;
  font-weight:900;
}

.po-banner__cta{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:16px;
}

.po-banner__btn{
  appearance:none;
  border:0;
  cursor:pointer;
  text-decoration:none;
  border-radius:999px;
  padding:14px 24px;
  min-width:260px;
  min-height:50px;
  position:relative;
  overflow:hidden;
  isolation:isolate;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  font-family:Impact,"Bodoni Moda",var(--ff-serif),system-ui,sans-serif;
  font-weight:700;
  font-size:1.15rem;
  letter-spacing:.18em;
  text-transform:uppercase;

  color:#F7F1FB;
  background:
    radial-gradient(
      160% 220% at 20% 10%,
      rgba(255,255,255,.18) 0%,
      transparent 48%
    ),
    linear-gradient(
      135deg,
      #241C56 0%,
      #4A356F 55%,
      #8A5D86 100%
    );

  box-shadow:
    0 0 0 1px rgba(255,255,255,.12),
    0 14px 34px rgba(46,44,98,.18),
    0 10px 24px rgba(102,113,199,.20),
    0 0 18px rgba(102,113,199,.14);

  transition:
    transform .35s ease,
    filter .35s ease,
    box-shadow .35s ease;

  animation:poButtonBreath 2.9s ease-in-out infinite;
}

.po-banner__btn::before{
  content:"";
  position:absolute;
  top:-35%;
  bottom:-35%;
  left:-28%;
  width:22%;
  transform:skewX(-22deg);
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.20) 52%,
    rgba(255,255,255,0) 100%
  );
  animation:poButtonShine 3.4s ease-in-out infinite;
  pointer-events:none;
}

.po-banner__btn::after{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}

.po-banner__btn:hover{
  transform:translateY(-2px) scale(1.015);
  filter:brightness(1.05);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.16),
    0 18px 42px rgba(46,44,98,.22),
    0 14px 30px rgba(102,113,199,.22),
    0 0 24px rgba(102,113,199,.20);
}

.po-banner__btn:focus-visible{
  outline:2px solid rgba(46,44,98,.55);
  outline-offset:4px;
}

/* =========================================================
   DOCK BAS FIXE
   ========================================================= */

.po-dock{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:1400;
  padding:0;
  transform:translateY(calc(100% + 8px));
  opacity:0;
  pointer-events:none;
  transition:
    transform .28s ease,
    opacity .28s ease;
}

.po-dock.is-visible{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}

.po-dock__inner{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr) auto auto;
  align-items:center;
  gap:var(--po-dock-gap);
  width:100%;
  min-height:var(--po-dock-h);
  padding:8px 12px;

  background:
    radial-gradient(
      160% 220% at 12% 0%,
      rgba(255,255,255,.82) 0%,
      rgba(255,255,255,.28) 36%,
      transparent 58%
    ),
    radial-gradient(
      160% 200% at 50% 40%,
      rgba(255,255,255,.96) 0%,
      rgba(203,207,252,.95) 45%,
      rgba(157,163,234,.92) 100%
    );

  box-shadow:
    0 -1px 0 rgba(230,231,255,.95),
    0 -10px 24px rgba(14,16,48,.12);
}

/* Rayures du dock */
.po-dock__inner::before{
  content:"";
  position:absolute;
  top:-140px;
  bottom:-140px;
  left:-50%;
  width:200%;
  z-index:0;
  pointer-events:none;
  opacity:.88;
  will-change:transform;

  background:
    repeating-linear-gradient(
      -45deg,
      rgba(46,44,98,.030) 0 14px,
      rgba(46,44,98,.075) 14px 28px
    );

  transform:translate3d(0,0,0);
  animation:poStripeDrift 1s linear infinite;
}

.po-dock__inner::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;

  background:
    radial-gradient(circle at 18% 34%, rgba(255,255,255,.72) 0 1px, transparent 2px),
    radial-gradient(circle at 58% 22%, rgba(255,255,255,.68) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 58%, rgba(255,255,255,.70) 0 1.1px, transparent 2.1px),
    linear-gradient(
      115deg,
      transparent 0%,
      rgba(255,255,255,.10) 22%,
      transparent 42%
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35);

  animation:
    poSparkleBlink 5.2s ease-in-out infinite,
    poShimmerSlide 7.4s linear infinite;
}

.po-dock__label,
.po-dock__date,
.po-dock__marquee,
.po-dock__btn,
.po-dock__toggle{
  position:relative;
  z-index:2;
}

.po-dock__label{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:0 6px 0 2px;
}

.po-dock__dot{
  width:10px;
  height:10px;
  border-radius:999px;
  flex:0 0 10px;
  background:var(--po-orange);
  box-shadow:
    0 0 0 6px rgba(184,92,58,.10),
    0 0 16px rgba(184,92,58,.35);
  animation:poPulseStrong 1.7s ease-in-out infinite;
}

.po-dock__title{
  white-space:nowrap;
  font-family:Impact,"Bodoni Moda",var(--ff-serif),system-ui,sans-serif;
  font-size:1rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--po-violet);
}

.po-dock__date{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 14px;
  border-radius:999px;
  white-space:nowrap;

  font-family:Impact,"Bodoni Moda",var(--ff-serif),system-ui,sans-serif;
  font-size:.90rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#3E2E10;

  background:linear-gradient(135deg,var(--po-gold-1),var(--po-gold-2));

  box-shadow:
    0 0 0 1px rgba(255,255,255,.50),
    0 6px 14px rgba(120,98,56,.10);

  animation:poPillFloat 3.8s ease-in-out infinite;
}

.po-dock__marquee{
  min-width:0;
  width:100%;
  overflow:hidden;
  border-radius:999px;
  position:relative;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.58),
      rgba(230,232,255,.48)
    );
  box-shadow:
    inset 0 0 0 1px rgba(230,231,255,.95),
    0 6px 14px rgba(158,168,255,.12);
}

.po-dock__marquee::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-24%;
  width:24%;
  pointer-events:none;
  transform:skewX(-22deg);
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.16) 50%,
    rgba(255,255,255,0) 100%
  );
  animation:poTickerShine 8s linear infinite;
}

.po-dock__marquee-track{
  width:max-content;
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  animation:poMarquee var(--po-text-speed) linear infinite;
}

.po-dock__marquee-seq{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:24px;
  padding:12px 24px 12px 0;
  flex:0 0 auto;
}

.po-dock__marquee-seq span{
  white-space:nowrap;
  font-family:Inter, sans-serif;
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:rgba(46,44,98,.88);
}

.po-dock__btn{
  appearance:none;
  border:0;
  cursor:pointer;
  text-decoration:none;
  border-radius:999px;
  padding:14px 18px;
  min-height:46px;
  position:relative;
  overflow:hidden;
  isolation:isolate;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;

  font-family:Impact,"Bodoni Moda",var(--ff-serif),system-ui,sans-serif;
  font-size:.96rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#F7F1FB;

  background:
    radial-gradient(
      160% 220% at 20% 10%,
      rgba(255,255,255,.16) 0%,
      transparent 48%
    ),
    linear-gradient(
      135deg,
      #241C56 0%,
      #4A356F 55%,
      #8A5D86 100%
    );

  box-shadow:
    0 0 0 1px rgba(255,255,255,.14),
    0 12px 28px rgba(46,44,98,.14),
    0 8px 18px rgba(102,113,199,.18);

  animation:poButtonBreath 2.9s ease-in-out infinite;
}

.po-dock__btn::before{
  content:"";
  position:absolute;
  top:-35%;
  bottom:-35%;
  left:-28%;
  width:22%;
  transform:skewX(-22deg);
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.18) 52%,
    rgba(255,255,255,0) 100%
  );
  animation:poButtonShine 3.7s ease-in-out infinite;
  pointer-events:none;
}

.po-dock__btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.03);
}

.po-dock__toggle{
  appearance:none;
  border:0;
  cursor:pointer;
  width:46px;
  height:46px;
  border-radius:999px;
  padding:0;
  flex:0 0 46px;

  display:grid;
  place-items:center;

  color:var(--po-violet);
  background:
    radial-gradient(
      160% 200% at 50% 40%,
      rgba(255,255,255,.96) 0%,
      rgba(230,232,255,.96) 48%,
      rgba(203,207,252,.98) 100%
    );

  box-shadow:
    0 0 0 1px rgba(230,231,255,.95),
    0 8px 18px rgba(158,168,255,.20);

  transition:
    transform .28s ease,
    box-shadow .28s ease,
    filter .28s ease;
}

.po-dock__toggle:hover{
  transform:translateY(-1px) scale(1.03);
  filter:brightness(1.02);
}

.po-dock__toggle:focus-visible{
  outline:2px solid rgba(46,44,98,.55);
  outline-offset:4px;
}

.po-dock__toggle-icon{
  width:18px;
  height:18px;
  display:block;
}

/* =========================================================
   MINI PASTILLE
   ========================================================= */

.po-dock-mini{
  appearance:none;
  border:0;
  cursor:pointer;
  position:fixed;
  right:12px;
  bottom:12px;
  z-index:1401;

  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:52px;
  padding:0 16px;
  border-radius:999px;
  overflow:hidden;
  isolation:isolate;

  color:#F7F1FB;
  background:
    radial-gradient(
      160% 220% at 20% 10%,
      rgba(255,255,255,.14) 0%,
      transparent 48%
    ),
    linear-gradient(
      135deg,
      #241C56 0%,
      #4A356F 55%,
      #8A5D86 100%
    );

  box-shadow:
    0 0 0 1px rgba(255,255,255,.12),
    0 14px 30px rgba(46,44,98,.18),
    0 10px 22px rgba(102,113,199,.18);

  opacity:0;
  transform:translateY(16px);
  pointer-events:none;
  transition:
    transform .28s ease,
    opacity .28s ease,
    filter .28s ease;

  animation:poMiniPulse 2.8s ease-in-out infinite;
}

.po-dock-mini::before{
  content:"";
  position:absolute;
  top:-35%;
  bottom:-35%;
  left:-28%;
  width:22%;
  transform:skewX(-22deg);
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.18) 52%,
    rgba(255,255,255,0) 100%
  );
  animation:poButtonShine 4s ease-in-out infinite;
  pointer-events:none;
}

.po-dock-mini.is-visible{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.po-dock-mini:hover{
  filter:brightness(1.03);
}

.po-dock-mini:focus-visible{
  outline:2px solid rgba(46,44,98,.55);
  outline-offset:4px;
}

.po-dock-mini__dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:#C8AD7F;
  box-shadow:
    0 0 10px rgba(200,173,127,.35),
    0 0 18px rgba(200,173,127,.20);
  animation:poPulseStrong 1.7s ease-in-out infinite;
}

.po-dock-mini__text{
  font-family:Impact,"Bodoni Moda",var(--ff-serif),system-ui,sans-serif;
  font-size:.92rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
}

.po-dock-mini__icon{
  width:16px;
  height:16px;
  display:block;
}

/* =========================================================
   PAUSE AU SURVOL
   ========================================================= */

.po-banner:hover .po-banner__top::before,
.po-banner:hover .po-dock__inner::before{
  animation-play-state:paused;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px){
  .po-dock__inner{
    grid-template-columns:auto auto minmax(0,1fr) auto auto;
    gap:8px;
    padding:8px 10px;
  }

  .po-dock__title{
    font-size:.90rem;
  }

  .po-dock__date{
    font-size:.80rem;
    padding:0 12px;
  }

  .po-dock__btn{
    font-size:.86rem;
    padding:12px 14px;
  }
}

@media (max-width: 900px){
  .po-banner__corner{
    width:38px;
    height:38px;
    border-radius:12px;
  }

  .po-banner__title{
    font-size:1.62rem;
    letter-spacing:.14em;
  }

  .po-banner__intro{
    font-size:1.12rem;
    line-height:1.72;
  }

  .po-banner__btn{
    min-width:240px;
    font-size:1.05rem;
  }

  .po-dock__inner{
    grid-template-columns:auto auto 1fr auto auto;
  }

  .po-dock__marquee-seq span{
    font-size:.76rem;
  }
}

@media (max-width: 720px){
  .po-banner__top{
    padding:16px 12px 18px;
  }

  .po-banner__corner{
    top:12px;
    left:12px;
    width:34px;
    height:34px;
    border-radius:10px;
  }
  
  .po-banner__corner{
    display:none;
  }

  .po-banner__heading{
    gap:10px;
    margin-bottom:10px;
    padding-top:2px;
  }

  .po-banner__title-wrap{
    gap:10px;
  }

  .po-banner__title-dot{
    width:10px;
    height:10px;
    flex-basis:10px;
  }

  .po-banner__title{
    font-size:1.24rem;
    letter-spacing:.10em;
  }

  .po-banner__date-pill{
    min-height:34px;
    padding:6px 12px;
    font-size:.84rem;
    letter-spacing:.10em;
  }

  .po-banner__intro{
    font-size:1.02rem;
    line-height:1.68;
    margin-bottom:12px;
  }

  .po-banner__ticker-seq span{
    font-size:.76rem;
    letter-spacing:.08em;
  }

  .po-banner__btn{
    min-width:0;
    width:100%;
    padding:13px 18px;
    font-size:.98rem;
    letter-spacing:.14em;
  }

  .po-dock__inner{
    grid-template-columns:1fr auto auto;
    grid-template-areas:
      "left btn toggle"
      "marquee marquee marquee";
    gap:8px;
    padding:8px 10px 10px;
    min-height:auto;
  }

  .po-dock__label{
    grid-area:left;
    padding-right:0;
  }

  .po-dock__date{
    display:none;
  }

  .po-dock__marquee{
    grid-area:marquee;
  }

  .po-dock__btn{
    grid-area:btn;
    font-size:.80rem;
    min-height:42px;
    padding:10px 12px;
  }

  .po-dock__toggle{
    grid-area:toggle;
    width:42px;
    height:42px;
    flex-basis:42px;
  }

  .po-dock-mini{
    right:10px;
    bottom:10px;
    min-height:48px;
    padding:0 14px;
  }

  .po-dock-mini__text{
    font-size:.82rem;
  }
}

@media (max-width: 520px){
  .po-banner__title{
    font-size:1.12rem;
  }

  .po-banner__intro{
    font-size:.96rem;
  }

  .po-dock__title{
    font-size:.78rem;
  }

  .po-dock__marquee-seq span{
    font-size:.72rem;
    letter-spacing:.07em;
  }

  .po-dock-mini__text{
    display:none;
  }
}

@media (prefers-reduced-motion: reduce){
  .po-banner *,
  .po-banner *::before,
  .po-banner *::after{
    transition:none !important;
    animation:none !important;
  }
}

/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes poMarquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

@keyframes poSparkleBlink{
  0%,100%{ opacity:.90; }
  25%{ opacity:1; }
  50%{ opacity:.76; }
  72%{ opacity:.98; }
}

@keyframes poShimmerSlide{
  0%{
    background-position:
      0 0, 0 0, 0 0, 0 0, 0 0, 0 0, -220px 0;
  }
  100%{
    background-position:
      0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 1300px 0;
  }
}

@keyframes poTickerShine{
  from{ transform:translateX(0) skewX(-22deg); }
  to{ transform:translateX(650%) skewX(-22deg); }
}

@keyframes poPulseStrong{
  0%,100%{
    transform:scale(1);
    opacity:1;
  }
  50%{
    transform:scale(1.18);
    opacity:.84;
  }
}

@keyframes poTitleGlow{
  0%,100%{
    text-shadow:
      0 6px 16px rgba(14,16,48,.10),
      0 0 18px rgba(102,113,199,.06);
  }
  50%{
    text-shadow:
      0 6px 18px rgba(14,16,48,.12),
      0 0 24px rgba(102,113,199,.14);
  }
}

@keyframes poDateShine{
  0%{ left:-140%; }
  45%{ left:140%; }
  100%{ left:140%; }
}

@keyframes poPillFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-2px); }
}

@keyframes poButtonBreath{
  0%,100%{
    transform:translateY(0) scale(1);
  }
  50%{
    transform:translateY(-1px) scale(1.01);
  }
}

@keyframes poButtonShine{
  0%{ left:-28%; }
  42%{ left:125%; }
  100%{ left:125%; }
}

@keyframes poMiniPulse{
  0%,100%{
    box-shadow:
      0 0 0 1px rgba(255,255,255,.12),
      0 14px 30px rgba(46,44,98,.18),
      0 10px 22px rgba(102,113,199,.18);
  }
  50%{
    box-shadow:
      0 0 0 1px rgba(255,255,255,.16),
      0 18px 38px rgba(46,44,98,.20),
      0 12px 28px rgba(102,113,199,.22),
      0 0 20px rgba(102,113,199,.14);
  }
}

@keyframes poBadgeBreath{
  0%,100%{
    transform:translateY(0) scale(1);
  }
  50%{
    transform:translateY(-1px) scale(1.04);
  }
}

@keyframes poIconBlink{
  0%,100%{
    transform:scale(1) rotate(0deg);
    opacity:1;
  }
  50%{
    transform:scale(1.08) rotate(-4deg);
    opacity:.82;
  }
}

@keyframes poStripeDrift{
  from{
    transform:translate3d(0,0,0);
  }
  to{
    transform:translate3d(var(--po-stripe-shift),0,0);
  }
}