/**
 * Christmas campaign — development page banner (see development-banner.php).
 *
 * Plain CSS, enqueued only on a development page that is showing a Christmas
 * banner, and scoped under .xmas-devbanner.
 *
 * Mobile first: the base styles are phones, then 768px (tablets) and 1200px
 * (desktop). The offer hexagons are the theme's hex badge component, sized by
 * --u (the scale of one design pixel) set on the banner.
 *
 * Fonts (Northwell script + Avenir) are registered by the theme in
 * includes/fonts.php.
 */

.xmas-devbanner,
.xmas-devoffers {
  --xmas-cream: #FFF4E0;
  --xmas-amber: #F9B233;
  --xmas-crimson: #EA5151;
  --xmas-grey: #5F5F5F;
  --xmas-script: 'NorthwellRegular', cursive;
  --xmas-heavy: 'AvenirLTStd-Heavy', helvetica, arial, sans-serif;
  --xmas-roman: 'AvenirLTStd-Roman', helvetica, arial, sans-serif;

  /* Hex badge colours (includes/components/hex-badge.php) */
  --badge-solid: var(--xmas-crimson);
  --badge-solid-text: #fff;
  --badge-outline-fill: var(--xmas-cream);
  --badge-outline-stroke: var(--xmas-amber);
  --badge-outline-text: var(--xmas-grey);

  /* One design pixel for the hex badges, and the height of one badge */
  --u: 0.5px;
  --hex: calc(244 * var(--u));

  position: relative;
  color: #fff;
  font-family: var(--xmas-roman);
}

.xmas-devbanner *,
.xmas-devbanner *::before,
.xmas-devbanner *::after,
.xmas-devoffers *,
.xmas-devoffers *::before,
.xmas-devoffers *::after {
  box-sizing: border-box;
}

/* ---- Photos and washes ------------------------------------------------- */
.xmas-devbanner__home {
  display: block;
  object-fit: cover;
}

.xmas-devbanner__wash,
.xmas-devbanner__lights {
  position: absolute;
  pointer-events: none;
}

.xmas-devbanner__wash {
  inset: 0;
}

.xmas-devbanner__lights {
  max-width: none;
  height: auto;
}

/* ---- Copy -------------------------------------------------------------- */
.xmas-devbanner__inner {
  position: relative;
  z-index: 2;
}

/* The script heading: two lines, each tilted about its own centre, as on the
   Christmas page and the home page slide */
.xmas-devbanner .xmas-devbanner__script {
  margin: 0;
  font-family: var(--xmas-script);
  font-size: 54px;
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0;
  text-shadow: 0 0.03em 0.03em rgba(0, 0, 0, 0.25);
}

.xmas-devbanner__script-line {
  display: block;
  width: max-content;
  max-width: 100%;
  transform: rotate(-3.35deg);
}

.xmas-devbanner__script-line + .xmas-devbanner__script-line {
  margin-left: 1.3em;
}

.xmas-devbanner .xmas-devbanner__title {
  margin: 0.3em 0 0.15em;
  color: #fff;
  font-family: var(--xmas-heavy);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0;
  text-shadow: 0 0 0.6rem rgba(0, 0, 0, 0.35);
}

.xmas-devbanner .xmas-devbanner__details {
  margin: 0 0 14px;
  color: var(--xmas-amber);
  font-family: var(--xmas-heavy);
  font-size: 17px;
  line-height: 1.3;
}

/* Bedrooms, then the price on its own line; side by side from tablets */
.xmas-devbanner__details strong {
  display: block;
  font-weight: 400;
}

/* The event pill (the development's event panel), when there is one, sits
   between the details and the buttons with the details' 14px above and below */
.xmas-devbanner .dev-event-pillrow {
  margin: 0 0 14px;
}

.xmas-devbanner__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}

.xmas-devbanner .xmas-devbanner__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  column-gap: 0.5em;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 12px;
  background: var(--xmas-cream);
  color: var(--xmas-grey);
  font-family: var(--xmas-heavy);
  font-size: 15px;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.2s linear;
}

.xmas-devbanner .xmas-devbanner__cta:hover,
.xmas-devbanner .xmas-devbanner__cta:focus-visible {
  background: #f1dfbe;
  color: var(--xmas-grey);
}

.xmas-devbanner .xmas-devbanner__cta:focus-visible,
.xmas-devbanner .xmas-devbanner__phone:focus-visible {
  outline: 3px solid var(--xmas-amber);
  outline-offset: 3px;
}

.xmas-devbanner .xmas-devbanner__phone {
  color: #fff;
  font-family: var(--xmas-heavy);
  font-size: 17px;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.xmas-devbanner .xmas-devbanner__phone:hover {
  color: var(--xmas-amber);
}

/* Small print for the offers (cream at 85%, 4.8:1 on the grey) */
.xmas-devbanner .xmas-devbanner__disclaimer {
  max-width: 34em;
  margin: 14px 0 0;
  color: rgba(255, 244, 224, 0.85);
  font-size: 13px;
  line-height: 1.4;
}

.xmas-devbanner .xmas-devbanner__disclaimer > a {
  color: inherit;
  text-decoration: underline;
}

/* Breadcrumbs: as on the standard banner, white with amber separators */
.xmas-devbanner .crumbs {
  position: absolute;
  top: 22px;
  left: 12px;
  right: 12px;
}

.xmas-devbanner .crumbs p {
  margin: 0;
  line-height: 1.3;
  text-align: right;
}

.xmas-devbanner .crumbs a,
.xmas-devbanner .crumbs span {
  color: #fff;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
}

.xmas-devbanner .crumbs i {
  color: var(--xmas-amber);
}

/* ---- Offers as hexagons ------------------------------------------------ */
.xmas-devbanner__offers {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Tighter spacing so the cream badge's text fits when it is small */
.xmas-devbanner__offers .hex-badge--outline .hex-badge__body {
  letter-spacing: 0.1em;
}

/* Each deposit badge is wrapped only to carry --hl, the size of its headline
   in design pixels, which the page works out so the longest word fits the
   hexagon ("£8,000" is full size, "Monthly Mortgage" is smaller) */
.xmas-devbanner__offer {
  display: contents;
}

.xmas-devbanner__offers .hex-badge--solid .hex-badge__headline {
  font-size: calc(var(--hl, 54.686) * var(--u));
}

/* The OR between offers: a small amber hexagon, nestled between the badges */
.xmas-devbanner__or {
  position: relative;
  z-index: 2;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 35px;
  background: var(--xmas-amber);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  color: var(--xmas-grey);
  font-family: var(--xmas-heavy);
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.xmas-devbanner__offers .xmas-devbanner__or {
  margin: 0 -6px;
}

/* At this size the badges' small print is as wide as the hexagon itself, so
   let it use the hexagon's full width, which is where the text sits */
.xmas-devbanner__offers .hex-badge__text {
  width: 100%;
}

.xmas-devbanner__offers .hex-badge--solid .hex-badge__body {
  font-size: 11px;
  letter-spacing: 0;
}

@media (min-width: 768px) {
  .xmas-devbanner .xmas-devbanner__script {
    font-size: 84px;
  }

  .xmas-devbanner .xmas-devbanner__title {
    font-size: 40px;
  }

  .xmas-devbanner .xmas-devbanner__details {
    font-size: 22px;
  }

  .xmas-devbanner .xmas-devbanner__details strong {
    display: inline;
  }

  .xmas-devbanner__details span + strong::before {
    content: '·';
    margin: 0 0.45em;
  }

  .xmas-devbanner .xmas-devbanner__cta {
    min-height: 50px;
    padding: 0 26px;
    font-size: 17px;
  }

  .xmas-devbanner .xmas-devbanner__phone {
    font-size: 20px;
  }

  .xmas-devbanner__actions {
    column-gap: 24px;
  }

  .xmas-devbanner__or {
    width: 40px;
    height: 46px;
    font-size: 15px;
  }
}

@media (min-width: 1200px) {
  .xmas-devbanner {
    --u: 0.62px;
  }

  .xmas-devbanner__offers .hex-badge__text {
    width: 91%;
  }

  .xmas-devbanner__offers .hex-badge--solid .hex-badge__body {
    font-size: max(12px, calc(22.371 * var(--u)));
  }

  .xmas-devbanner .xmas-devbanner__script {
    font-size: 100px;
  }

  .xmas-devbanner .xmas-devbanner__title {
    font-size: 46px;
  }

  .xmas-devbanner .xmas-devbanner__details {
    font-size: 25px;
  }

  .xmas-devbanner .crumbs {
    left: 12px;
  }
}

@media (max-width: 575.98px) {
  .xmas-devbanner .crumbs {
    display: none;
  }
}

/* =========================================================================
   The banner: the development's photo is the hero, the copy sits on a grey
   wash on the left, and the offer hexagons hang over the bottom edge
   ========================================================================= */
.xmas-devbanner--photo {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* The offers hang half their height below the banner; leave that room */
  margin-bottom: calc(var(--hex) / 2 + 28px);
  background: var(--xmas-grey); /* if the development has no photo */
}

/* The photo has its own clipping box, as the banner itself can't clip: the
   offer hexagons hang below it. The box also holds the slow zoom in. */
.xmas-devbanner--photo .xmas-devbanner__photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.xmas-devbanner--photo .xmas-devbanner__home {
  width: 100%;
  height: 100%;
}

/* The wash always runs left to right. On phones the copy spans the width, so
   it is held dense and only eases off at the right-hand edge. */
.xmas-devbanner--photo .xmas-devbanner__wash {
  background: linear-gradient(90deg, rgba(95, 95, 95, 0.94) 0%, rgba(95, 95, 95, 0.88) 55%, rgba(95, 95, 95, 0.6) 100%);
}

.xmas-devbanner--photo .xmas-devbanner__lights {
  top: 30px;
  left: -8px;
  width: 330px;
  opacity: 0.9;
}

/* The copy block fills the banner, with the copy at its foot, so the
   breadcrumbs (positioned in it) always sit at the top */
.xmas-devbanner--photo .xmas-devbanner__inner {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 92px; /* clears the garland's arc and the bee */
  padding-bottom: calc(var(--hex) / 2 + 20px);
}

.xmas-devbanner--photo .xmas-devbanner__hang {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  transform: translateY(50%);
}

/* Tablets and up: the copy keeps to the left, so the wash can ease right off
   and the photo shows on the right, where the offers sit too */
@media (min-width: 768px) {
  .xmas-devbanner--photo {
    justify-content: center;
    min-height: 520px;
  }

  .xmas-devbanner--photo .xmas-devbanner__wash {
    background:
      linear-gradient(180deg, rgba(60, 60, 60, 0.6) 0, rgba(60, 60, 60, 0) 160px),
      linear-gradient(90deg, rgba(95, 95, 95, 0.93) 0%, rgba(95, 95, 95, 0.8) 48%, rgba(95, 95, 95, 0.1) 90%);
  }

  .xmas-devbanner--photo .xmas-devbanner__lights {
    left: -40px;
    width: 460px;
  }

  .xmas-devbanner--photo .xmas-devbanner__inner {
    justify-content: center;
    padding-top: 90px;
    padding-bottom: calc(var(--hex) / 2 + 36px);
  }

  .xmas-devbanner--photo .xmas-devbanner__copy {
    max-width: 520px;
  }

  .xmas-devbanner--photo .xmas-devbanner__hang .xmas-devbanner__offers {
    justify-content: flex-end;
  }
}

@media (min-width: 992px) {
  .xmas-devbanner--photo .xmas-devbanner__wash {
    background:
      linear-gradient(180deg, rgba(60, 60, 60, 0.6) 0, rgba(60, 60, 60, 0) 160px),
      linear-gradient(90deg, rgba(95, 95, 95, 0.93) 0%, rgba(95, 95, 95, 0.8) 45%, rgba(95, 95, 95, 0) 85%);
  }
}

@media (min-width: 1200px) {
  .xmas-devbanner--photo {
    min-height: 560px;
  }

  .xmas-devbanner--photo .xmas-devbanner__wash {
    background:
      linear-gradient(180deg, rgba(60, 60, 60, 0.6) 0, rgba(60, 60, 60, 0) 160px),
      linear-gradient(90deg, rgba(95, 95, 95, 0.93) 0%, rgba(95, 95, 95, 0.8) 34%, rgba(95, 95, 95, 0) 68%);
  }

  .xmas-devbanner--photo .xmas-devbanner__lights {
    top: 14px;
    left: 0;
    width: 600px;
  }

  .xmas-devbanner--photo .xmas-devbanner__inner {
    padding-top: 72px;
    padding-bottom: 44px;
  }

  .xmas-devbanner--photo .xmas-devbanner__copy {
    max-width: 560px;
  }
}

/* From 1400px the container stops growing and stays centred, so the garland is
   anchored to the container's left edge (72px in from it, where it sits at
   1440px) instead of the screen's, which keeps it with the text on wide screens */
@media (min-width: 1400px) {
  .xmas-devbanner--photo .xmas-devbanner__lights {
    left: calc((100% - 1320px) / 2 - 60px);
  }
}

/* =========================================================================
   The offers block in a development page's text ([xmas_offers],
   development-offers.php). The same hexagons and colours as the banner, in a
   panel that sits in the text column. It uses the banner's hexagon rules above
   and has the hexagons at one size at every width (--u comes from the shared
   tokens), so it is the panel and the wording that are styled here.
   ========================================================================= */
.xmas-devoffers {
  --pad: 24px; /* the panel's side padding, which the photo bleeds across */
  margin: 32px 0;
  padding: 0 var(--pad) 26px;
  border-radius: 14px;
  background: var(--xmas-grey);
  text-align: center;
  overflow: hidden; /* clips the photo to the panel's rounded corners */
}

/* The photo across the top, cut at an angle along its foot like the home page
   slide's photo: the bottom edge is higher on the left and lower on the right,
   where the faces are. It is decoration, so it is not in the accessibility tree. */
.xmas-devoffers__photo {
  position: relative;
  z-index: 0;
  height: 130px;
  margin: 0 calc(var(--pad) * -1) 14px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 78%);
}

.xmas-devoffers__photo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 62%; /* low enough to keep both faces in the band */
}

/* The script heading, as in the banner (two tilted lines, the second set in) but
   smaller: this is a panel in the text, not the page's opening. */
.xmas-devoffers .xmas-devoffers__script {
  width: max-content;
  max-width: 100%;
  margin: 0 auto 12px;
  padding: 0;
  color: #fff;
  font-family: var(--xmas-script);
  font-size: 44px;
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0;
  text-align: left;
  text-shadow: 0 0.03em 0.03em rgba(0, 0, 0, 0.25);
}

.xmas-devoffers__script-line {
  display: block;
  width: max-content;
  max-width: 100%;
  transform: rotate(-3.35deg);
}

.xmas-devoffers__script-line + .xmas-devoffers__script-line {
  margin-left: 1.3em;
}

/* The theme styles headings and paragraphs in the text column, so these say
   what they need (two classes beat the theme's element rules) */
.xmas-devoffers .xmas-devoffers__heading {
  max-width: 26em;
  margin: 0 auto 12px;
  padding: 0;
  color: var(--xmas-amber);
  font-family: var(--xmas-heavy);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: center;
}

.xmas-devoffers .xmas-devoffers__lead,
.xmas-devoffers .xmas-devoffers__closing {
  margin: 0 0 16px;
  color: var(--xmas-cream);
  font-family: var(--xmas-roman);
  font-size: 17px;
  line-height: 1.4;
  text-align: center;
}

.xmas-devoffers .xmas-devoffers__closing {
  margin: 20px 0 14px;
}

.xmas-devoffers .xmas-devoffers__small {
  max-width: 34em;
  margin: 0 auto;
  color: rgba(255, 244, 224, 0.85);
  font-family: var(--xmas-roman);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}

.xmas-devoffers .xmas-devoffers__small a {
  color: var(--xmas-amber);
  text-decoration: underline;
}

.xmas-devoffers .xmas-devoffers__small a:hover,
.xmas-devoffers .xmas-devoffers__small a:focus-visible {
  color: #fff;
}

/* Snow, on desktop (the banner's snow, shown by the rules in its own section
   below): over the photo and under the text, so the text stays easy to read.
   Only half the flakes, so it is lighter than the banner's. */
.xmas-devoffers .xmas-devbanner__snow {
  z-index: 1;
}

.xmas-devoffers .xmas-devbanner__flake:nth-child(even) {
  display: none;
}

.xmas-devoffers .xmas-devoffers__script,
.xmas-devoffers .xmas-devoffers__heading,
.xmas-devoffers .xmas-devoffers__lead,
.xmas-devoffers .xmas-devoffers__closing,
.xmas-devoffers .xmas-devoffers__small,
.xmas-devoffers .xmas-devbanner__offers {
  position: relative;
  z-index: 2;
}

/* The hexagons, in the panel: the banner's rules, with the small-print fit
   held at the size they are used at here, however wide the screen */
.xmas-devoffers .xmas-devbanner__offers {
  margin: 4px 0 0;
}

.xmas-devoffers .xmas-devbanner__offers .hex-badge__text {
  width: 100%;
}

.xmas-devoffers .xmas-devbanner__offers .hex-badge--solid .hex-badge__body {
  font-size: 11px;
}

/* On a larger phone the panel has less side padding, to give the three
   hexagons in a row (353px) room in a panel only a little wider than that */
@media (min-width: 420px) and (max-width: 479.98px) {
  .xmas-devoffers {
    --pad: 12px;
  }
}

/* On an ordinary phone (iPhone 16: 393px, so a panel 353px wide) the full-size
   row (353px) no longer fits, so the hexagons shrink to fit the panel instead
   of stacking: the panel is a container, and the design pixel (--u) is worked
   out from the width inside its padding (100cqw), less the two ORs between the
   badges (36px) and shared between three hexagons (3 x 211.3 design pixels,
   divided by 640 to leave a pixel or two spare). It never grows past the
   normal size. */
@media (min-width: 380px) and (max-width: 419.98px) {
  .xmas-devoffers {
    --pad: 10px;
    container-type: inline-size;
  }

  .xmas-devoffers .xmas-devbanner__offers {
    --u: min(0.5px, calc((100cqw - 36px) / 640));
  }
}

/* Only on the narrowest phones would even small hexagons side by side not fit
   the panel, so only there do they stand in a column, each with its OR between,
   as on the Christmas page. The banner's never stack. */
@media (max-width: 379.98px) {
  .xmas-devoffers {
    --pad: 16px;
  }

  .xmas-devoffers .xmas-devbanner__offers {
    flex-direction: column;
  }

  .xmas-devoffers .xmas-devbanner__offers .xmas-devbanner__or {
    margin: -11px 0;
  }
}

@media (min-width: 768px) {
  .xmas-devoffers {
    --pad: 32px;
    padding-bottom: 30px;
  }

  .xmas-devoffers__photo {
    height: 190px;
  }

  .xmas-devoffers .xmas-devoffers__script {
    font-size: 56px;
  }

  .xmas-devoffers .xmas-devoffers__heading {
    font-size: 24px;
  }
}

/* =========================================================================
   Falling snow — hidden unless it is desktop and motion is welcome (below)
   ========================================================================= */
.xmas-devbanner__snow {
  display: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Between the photo and the copy: over the photo, under the text */
.xmas-devbanner--photo .xmas-devbanner__snow {
  z-index: 1;
}

/* A flake is a falling, swaying box; its snowflake is the ::before inside,
   which spins, so the sway does not turn with it. */
.xmas-devbanner__flake {
  position: absolute;
  top: -60px;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  opacity: var(--o);
}

.xmas-devbanner__flake::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: url('img/snowflake.svg') center / contain no-repeat;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.28));
}

/* Where each flake is (--x), how big (--s) and how clear (--o), how long it
   takes to fall (--fall), to sway (--sway) and to turn (--spin), how far it
   sways (--drift), which way it turns (--dir), and its starting point in the
   fall (--delay, negative, so the snow is already falling on arrival) */
.xmas-devbanner__flake:nth-child(1)  { --x: 3%;  --s: 26px; --o: 0.85; --fall: 19s; --sway: 7s;  --spin: 40s; --delay: -4s;  --drift: 16px; --dir: 1; }
.xmas-devbanner__flake:nth-child(2)  { --x: 11%; --s: 16px; --o: 0.7;  --fall: 25s; --sway: 9s;  --spin: 55s; --delay: -17s; --drift: 10px; --dir: -1; }
.xmas-devbanner__flake:nth-child(3)  { --x: 20%; --s: 32px; --o: 0.9;  --fall: 17s; --sway: 8s;  --spin: 35s; --delay: -9s;  --drift: 20px; --dir: 1; }
.xmas-devbanner__flake:nth-child(4)  { --x: 30%; --s: 20px; --o: 0.75; --fall: 23s; --sway: 10s; --spin: 60s; --delay: -2s;  --drift: 14px; --dir: -1; }
.xmas-devbanner__flake:nth-child(5)  { --x: 41%; --s: 28px; --o: 0.85; --fall: 20s; --sway: 7s;  --spin: 45s; --delay: -13s; --drift: 18px; --dir: 1; }
.xmas-devbanner__flake:nth-child(6)  { --x: 50%; --s: 14px; --o: 0.65; --fall: 27s; --sway: 11s; --spin: 70s; --delay: -6s;  --drift: 8px;  --dir: -1; }
.xmas-devbanner__flake:nth-child(7)  { --x: 59%; --s: 30px; --o: 0.9;  --fall: 18s; --sway: 8s;  --spin: 38s; --delay: -15s; --drift: 22px; --dir: 1; }
.xmas-devbanner__flake:nth-child(8)  { --x: 68%; --s: 18px; --o: 0.75; --fall: 24s; --sway: 9s;  --spin: 58s; --delay: -11s; --drift: 12px; --dir: -1; }
.xmas-devbanner__flake:nth-child(9)  { --x: 77%; --s: 24px; --o: 0.85; --fall: 21s; --sway: 7s;  --spin: 48s; --delay: -1s;  --drift: 16px; --dir: 1; }
.xmas-devbanner__flake:nth-child(10) { --x: 86%; --s: 34px; --o: 0.9;  --fall: 16s; --sway: 9s;  --spin: 33s; --delay: -8s;  --drift: 24px; --dir: -1; }
.xmas-devbanner__flake:nth-child(11) { --x: 94%; --s: 17px; --o: 0.7;  --fall: 26s; --sway: 10s; --spin: 64s; --delay: -19s; --drift: 10px; --dir: 1; }

/* =========================================================================
   Motion — only if the visitor is happy with it
   ========================================================================= */

/* The script heading is written on, a line at a time, as on the Christmas
   page: each line is wiped on from the left along its own tilted baseline.
   `backwards` keeps a line hidden until its turn and leaves it unclipped
   afterwards, so nothing is cut off once it has been written, and the heading
   is simply there for anyone who has asked for reduced motion. The clip is
   taller than the line, as the script's flourishes are. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes xmas-devbanner-wipe {
    from {
      clip-path: inset(-80% 100% -80% -8%);
    }

    to {
      clip-path: inset(-80% -8% -80% -8%);
    }
  }

  .xmas-devbanner__script-line {
    animation: xmas-devbanner-wipe 0.9s cubic-bezier(0.4, 0, 0.2, 1) backwards;
  }

  .xmas-devbanner__script-line:nth-child(1) {
    animation-delay: 0.15s;
  }

  .xmas-devbanner__script-line:nth-child(2) {
    animation-delay: 1.05s;
  }

  /* The offer hexagons pop in, one after another, as on the Christmas page:
     they scale up, overshoot a little and settle. They start as the heading's
     second line begins, so the whole sequence ends about when the heading
     does. The badges are animated rather than the wrapper round each deposit
     badge, which only carries a size and takes no part in the layout. `both`
     keeps each hidden until its turn. */
  @keyframes xmas-devbanner-pop {
    0% {
      opacity: 0;
      scale: 0.4;
    }

    65% {
      opacity: 1;
      scale: 1.08;
    }

    100% {
      opacity: 1;
      scale: 1;
    }
  }

  .xmas-devbanner--photo .xmas-devbanner__offers .hex-badge,
  .xmas-devbanner--photo .xmas-devbanner__offers .xmas-devbanner__or {
    animation: xmas-devbanner-pop 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  }

  .xmas-devbanner__offers > .hex-badge:first-child { animation-delay: 0.9s; }
  .xmas-devbanner__offers > .xmas-devbanner__or:nth-child(2) { animation-delay: 1.02s; }
  .xmas-devbanner__offers > .xmas-devbanner__offer:nth-child(3) .hex-badge { animation-delay: 1.14s; }
  .xmas-devbanner__offers > .xmas-devbanner__or:nth-child(4) { animation-delay: 1.26s; }
  .xmas-devbanner__offers > .xmas-devbanner__offer:nth-child(5) .hex-badge { animation-delay: 1.38s; }

  /* In the page text the hexagons pop in as the block scrolls on screen
     (development-offers.js adds .xmas-offers-js to the page, which is what hides
     them until it adds .is-in, so without the script they are simply there).
     The same pop, one after another, from a short beat after it appears. */
  .xmas-offers-js .xmas-devoffers:not(.is-in) .hex-badge,
  .xmas-offers-js .xmas-devoffers:not(.is-in) .xmas-devbanner__or {
    opacity: 0;
    scale: 0.4;
  }

  .xmas-devoffers.is-in .hex-badge,
  .xmas-devoffers.is-in .xmas-devbanner__or {
    animation: xmas-devbanner-pop 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  }

  .xmas-devoffers.is-in .xmas-devbanner__offers > .hex-badge:first-child { animation-delay: 0.9s; }
  .xmas-devoffers.is-in .xmas-devbanner__offers > .xmas-devbanner__or:nth-child(2) { animation-delay: 1.02s; }
  .xmas-devoffers.is-in .xmas-devbanner__offers > .xmas-devbanner__offer:nth-child(3) .hex-badge { animation-delay: 1.14s; }
  .xmas-devoffers.is-in .xmas-devbanner__offers > .xmas-devbanner__or:nth-child(4) { animation-delay: 1.26s; }
  .xmas-devoffers.is-in .xmas-devbanner__offers > .xmas-devbanner__offer:nth-child(5) .hex-badge { animation-delay: 1.38s; }

  /* The script heading is written on first, a line at a time, with the
     banner's write-on and its timing, so the hexagons above start as the
     second line begins, as they do in the banner. Hidden the same way, until
     the block is on screen and the script has run. */
  .xmas-offers-js .xmas-devoffers:not(.is-in) .xmas-devoffers__script-line {
    clip-path: inset(-80% 100% -80% -8%);
  }

  .xmas-devoffers.is-in .xmas-devoffers__script-line {
    animation: xmas-devbanner-wipe 0.9s cubic-bezier(0.4, 0, 0.2, 1) backwards;
  }

  .xmas-devoffers.is-in .xmas-devoffers__script-line:nth-child(1) { animation-delay: 0.15s; }
  .xmas-devoffers.is-in .xmas-devoffers__script-line:nth-child(2) { animation-delay: 1.05s; }

  /* The development photo zooms in very slowly, about 8% over 24 seconds,
     easing to a stop, so the banner is never quite still. The photo's own
     box clips it, as the banner itself can't: the offer hexagons hang below. */
  @keyframes xmas-devbanner-drift {
    from {
      scale: 1;
    }

    to {
      scale: 1.08;
    }
  }

  .xmas-devbanner--photo .xmas-devbanner__photo .xmas-devbanner__home {
    animation: xmas-devbanner-drift 24s ease-out forwards;
  }

  /* Falling snow: each flake falls past the banner, sways from side to side
     and turns, each on its own timing so they never move in step. The fall
     is long enough to clear the tallest banner and the flakes are clipped by
     their layer. The three use separate properties, so they run together. */
  @keyframes xmas-devbanner-fall {
    to {
      translate: 0 780px;
    }
  }

  @keyframes xmas-devbanner-sway {
    from {
      transform: translateX(calc(var(--drift) * -1));
    }

    to {
      transform: translateX(var(--drift));
    }
  }

  @keyframes xmas-devbanner-spin {
    to {
      rotate: calc(var(--dir) * 360deg);
    }
  }
}

/* The snow is shown, and falls, only on desktop and only if motion is welcome:
   below 1200px the banner is busier and on phones it would be a distraction. */
@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) {
  .xmas-devbanner__snow {
    display: block;
  }

  .xmas-devbanner__flake {
    animation:
      xmas-devbanner-fall var(--fall) linear var(--delay) infinite,
      xmas-devbanner-sway var(--sway) ease-in-out var(--delay) infinite alternate;
  }

  .xmas-devbanner__flake::before {
    animation: xmas-devbanner-spin var(--spin) linear infinite;
  }

  /* In the page text the snow starts when the block scrolls on screen, not
     while it is out of sight below the fold (without the script it just runs) */
  .xmas-offers-js .xmas-devoffers:not(.is-in) .xmas-devbanner__snow {
    display: none;
  }
}