/* Daniel, 7 Oct: use the approved stronger hero wave on existing patterns and
   blue content fields. One tile, colour sequence and tempo across the preview. */
:root {
  --dio-wave-duration: 8.5s;
  --dio-wave-tile: 179.4px;
  --dio-wave-travel: 1765.4px;
  --dio-wave-colour: repeating-linear-gradient(115deg,
    rgba(169,193,209,.09) 0, rgba(169,193,209,.09) 360px,
    rgba(169,193,209,.32) 530px, rgba(237,135,60,.66) 720px,
    rgba(237,135,60,.54) 890px, rgba(169,193,209,.14) 1100px,
    rgba(169,193,209,.09) 1600px);
  --dio-wave-colour-light: repeating-linear-gradient(115deg,
    rgba(76,114,136,.13) 0, rgba(76,114,136,.13) 360px,
    rgba(76,114,136,.34) 530px, rgba(237,135,60,.66) 720px,
    rgba(237,135,60,.54) 890px, rgba(76,114,136,.18) 1100px,
    rgba(76,114,136,.13) 1600px);
}
.opening-wave {background:var(--dio-wave-colour);animation-duration:var(--dio-wave-duration)}
.dio-blue-field {
  --dio-field-base:#2f4452;
  position:relative;
  isolation:isolate;
  background:var(--dio-field-base);
}
.dio-blue-field--light {--dio-field-base:#e8eff3}
.dio-blue-field > .pattern {display:none}
.dio-field-pattern {
  position:absolute;inset:0;z-index:-1;overflow:hidden;
  pointer-events:none;
  /* One continuous, stationary fade across the field. No text-shaped cutouts. */
  --dio-reading-fade:linear-gradient(90deg,rgba(0,0,0,.055),rgba(0,0,0,.08) 28%,rgba(0,0,0,.12) 43%,rgba(0,0,0,.28) 57%,rgba(0,0,0,.60) 75%,#000);
  --dio-edge-fade:linear-gradient(#000 45%,rgba(0,0,0,.72) 60%,rgba(0,0,0,.28) 74%,rgba(0,0,0,.10) 90%,rgba(0,0,0,.025));
  -webkit-mask-image:url(assets/arch-tile.svg),var(--dio-reading-fade),var(--dio-edge-fade);
  mask-image:url(assets/arch-tile.svg),var(--dio-reading-fade),var(--dio-edge-fade);
  -webkit-mask-size:var(--dio-wave-tile) var(--dio-wave-tile),100% 100%,100% 100%;
  mask-size:var(--dio-wave-tile) var(--dio-wave-tile),100% 100%,100% 100%;
  -webkit-mask-repeat:repeat,no-repeat,no-repeat;mask-repeat:repeat,no-repeat,no-repeat;
  -webkit-mask-composite:source-in,source-in;mask-composite:intersect,intersect;
}
.dio-blue-field:is(.hero,.offices-hero,.pod-hero,.story-hero,.rec-hero,.why-opening) > .dio-field-pattern {
  --dio-reading-fade:linear-gradient(90deg,rgba(0,0,0,.08),rgba(0,0,0,.12) 48%,rgba(0,0,0,.18) 65%,rgba(0,0,0,.40) 80%,#000);
}
.dio-field-pattern > .dio-field-wave {
  position:absolute;inset:0 auto 0 0;
  width:calc(100% + var(--dio-wave-travel));
  background:var(--dio-wave-colour);
  animation:dio-field-flow var(--dio-wave-duration) linear -2s infinite!important;
}
.dio-blue-field--light > .dio-field-pattern > .dio-field-wave {background:var(--dio-wave-colour-light)}
@keyframes dio-field-flow {to{transform:translateX(calc(-1 * var(--dio-wave-travel)))}}

/* Preserve the process page's architectural field, using the same wave. */
.hero-pattern {overflow:hidden;isolation:isolate}
.hero-pattern > div {
  inset:0;background:none;animation:none;
  -webkit-mask-image:url(assets/arch-tile.svg),linear-gradient(90deg,rgba(0,0,0,.06),rgba(0,0,0,.24) 35%,rgba(0,0,0,.60) 65%,#000),linear-gradient(#000 35%,rgba(0,0,0,.4) 75%,transparent);
  mask-image:url(assets/arch-tile.svg),linear-gradient(90deg,rgba(0,0,0,.06),rgba(0,0,0,.24) 35%,rgba(0,0,0,.60) 65%,#000),linear-gradient(#000 35%,rgba(0,0,0,.4) 75%,transparent);
  -webkit-mask-size:var(--dio-wave-tile) var(--dio-wave-tile),100% 100%,100% 100%;
  mask-size:var(--dio-wave-tile) var(--dio-wave-tile),100% 100%,100% 100%;
  -webkit-mask-repeat:repeat,no-repeat,no-repeat;mask-repeat:repeat,no-repeat,no-repeat;
  -webkit-mask-composite:source-in,source-in;mask-composite:intersect,intersect;
}
.hero-pattern > div::before {
  content:'';position:absolute;inset:0 auto 0 0;
  width:calc(100% + var(--dio-wave-travel));
  background:var(--dio-wave-colour-light);
  animation:dio-field-flow var(--dio-wave-duration) linear -2s infinite;
}
.hero-pattern::after {display:none}

/* Copy sits over the faint tail of the field-wide fade. Keep its layout intact. */
.dio-blue-field :is(.lab-copy,.landing-lab-copy,.material-title,.prototype-intro,.prototype-reader),
.dio-blue-field.design-section .design-heading > *,
.dio-blue-field.why-lab > .wrap > div,
.dio-blue-field.why-opening > .wrap > :is(h1,p,nav),
.dio-blue-field:is(.hero,.offices-hero,.pod-hero,.story-hero) > :is(.wrap,.narrow) > :is(h1,p,nav,.meta),
.dio-blue-field.rec-hero > .narrow {
  position:relative;
  background:transparent;
  box-shadow:none;
}
.dio-blue-field:is(.hero,.offices-hero,.pod-hero,.story-hero) > :is(.wrap,.narrow) > :is(h1,p,.meta) {
  width:fit-content;max-width:100%;
}
.dio-blue-field :is(.lab-film,.material-film) > :is(button,figcaption),
.dio-blue-field.landing-lab figure > :is(button,figcaption),
.dio-blue-field.why-lab figure > figcaption {
  position:relative;background:transparent;box-shadow:none;
}
/* Small labels need the same clarity as the headline at the brightest wave.
   Brighten the type, rather than shorten Daniel's requested long fade. */
.dio-blue-field :is(.lab-copy,.landing-lab-copy,.material-title) > .label,
.dio-blue-field .phone-material-label,
.landing-opening .landing-lead > .label {color:#fff}
.dio-blue-field .material-title > p:not(.label) {color:#e6edf1}
.dio-blue-field:is(.step-held,.patient-media-held,.portrait) {
  overflow:hidden;
}
.dio-blue-field:is(.step-held,.patient-media-held,.portrait) > .dio-field-pattern {
  -webkit-mask-image:url(assets/arch-tile.svg),radial-gradient(ellipse at center,rgba(0,0,0,.05),rgba(0,0,0,.15) 35%,rgba(0,0,0,.38) 60%,rgba(0,0,0,.72) 82%,#000);
  mask-image:url(assets/arch-tile.svg),radial-gradient(ellipse at center,rgba(0,0,0,.05),rgba(0,0,0,.15) 35%,rgba(0,0,0,.38) 60%,rgba(0,0,0,.72) 82%,#000);
  -webkit-mask-size:var(--dio-wave-tile) var(--dio-wave-tile),100% 100%;
  mask-size:var(--dio-wave-tile) var(--dio-wave-tile),100% 100%;
  -webkit-mask-repeat:repeat,no-repeat;mask-repeat:repeat,no-repeat;
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
.dio-field-label,.patient-media-held > span:not(.dio-field-pattern) {
  position:relative;background:transparent;box-shadow:none;
}
.dio-blue-field.day-field > :is(strong,p,svg) {
  position:relative;background:var(--dio-field-base);
  box-shadow:0 0 8px 8px var(--dio-field-base);
}

/* Keep the same arch texture beside a patient's account, without an orange
   sweep competing with their words. The patient-account motion rule still applies. */
.patient-media-held > .dio-field-pattern > .dio-field-wave,
.story-hero > .dio-field-pattern > .dio-field-wave,
[data-patient-account="true"] > .dio-field-pattern > .dio-field-wave {
  animation:none!important;
  background:rgba(76,114,136,.17)!important;
}
.story-hero > .dio-field-pattern > .dio-field-wave,
[data-patient-account="true"] > .dio-field-pattern > .dio-field-wave {background:rgba(169,193,209,.17)!important}

/* Pause offscreen decorative work; never animate photographs or the reading zone. */
.dio-field-paused > .dio-field-pattern > .dio-field-wave,
.dio-field-paused .opening-wave,
.dio-field-paused .hero-pattern > div::before {animation-play-state:paused!important}

@media(max-width:700px) {
  .dio-blue-field > .dio-field-pattern {
    --dio-reading-fade:linear-gradient(rgba(0,0,0,.60),rgba(0,0,0,.25) 10%,rgba(0,0,0,.10) 24%,rgba(0,0,0,.08) 53%,rgba(0,0,0,.28) 65%,rgba(0,0,0,.60) 76%,rgba(0,0,0,.22) 87%,rgba(0,0,0,.035));
    --dio-edge-fade:linear-gradient(#000,#000);
  }
  .dio-blue-field:is(.hero,.offices-hero,.pod-hero,.story-hero,.rec-hero,.why-opening) > .dio-field-pattern {
    --dio-reading-fade:linear-gradient(#000,rgba(0,0,0,.50) 10%,rgba(0,0,0,.19) 27%,rgba(0,0,0,.10) 48%,rgba(0,0,0,.045) 75%,rgba(0,0,0,.025));
  }
  /* Materials puts the film first on phones; its fade continues downward
     into the title, rather than becoming stronger again behind that copy. */
  .material-opening > .dio-field-pattern {
    --dio-reading-fade:linear-gradient(rgba(0,0,0,.60),rgba(0,0,0,.50) 20%,rgba(0,0,0,.30) 40%,rgba(0,0,0,.16) 60%,rgba(0,0,0,.06) 80%,rgba(0,0,0,.015));
  }
  .dio-blue-field:is(.hero,.offices-hero,.pod-hero,.story-hero,.rec-hero,.why-opening) {padding-top:76px}
}
@media(prefers-reduced-motion:reduce) {
  .dio-field-pattern > .dio-field-wave,.hero-pattern > div::before,.opening-wave {
    animation:none!important;transform:none!important;
  }
  .dio-field-pattern > .dio-field-wave,.opening-wave {background:rgba(169,193,209,.14)!important}
  .dio-blue-field--light > .dio-field-pattern > .dio-field-wave,.hero-pattern > div::before {background:rgba(76,114,136,.17)!important}
}
.reduce-motion .dio-field-pattern > .dio-field-wave,
.reduce-motion .hero-pattern > div::before,.reduce-motion .opening-wave {animation:none!important;transform:none!important}
.reduce-motion .dio-field-pattern > .dio-field-wave,.reduce-motion .opening-wave {background:rgba(169,193,209,.14)!important}
.reduce-motion .dio-blue-field--light > .dio-field-pattern > .dio-field-wave,
.reduce-motion .hero-pattern > div::before {background:rgba(76,114,136,.17)!important}
@media print {.dio-field-pattern,.hero-pattern {display:none!important}}

/* Patient-account headings (stories library; patient-interview episodes): same arch texture, at rest, steel, no sweep. */
.dio-blue-field--still > .dio-field-pattern > .dio-field-wave {animation:none!important;transform:none!important;background:rgba(169,193,209,.14)!important}

/* The stronger wave keeps its long fade. Light-field reading text uses ink
   so the orange peak does not lower small-label or caption contrast. */
.dio-blue-field--light :is(p,.label,.eyebrow,h1,h2,h3,h4,figcaption,.dio-field-label):not(.design-viewer *):not(.button *):not(.btn *),
.dio-blue-field--light.patient-media-held > span:not(.dio-field-pattern),
.dio-blue-field--light.step-held > span:not(.dio-field-pattern) {color:#203846}
.dio-blue-field.why-opening :is(.label,.eyebrow) {color:#fff}

.dio-blue-field--light .material-selector button{color:#203846}