:root {
 --accent-teal:#62c4af;
 --accent-light-green:#a0f133;
 --accent-pink:#f5ccd5;
 --accent-pink-light:#f8ebed;
 --accent-red:#ea6456;
 --accent-red-text:#b02a1c;
 --bg-grain:#111719;
 --border-radius:2px;
 --border-radius-lg:1rem;
}

.footer--utils-lightdark,
.global-menu--utils-lightdark { display:none; }

body { color-scheme:light; overflow-x: clip; }
.h1, .h2, .h3, h1, h2, h3, .section-title { color:light-dark(#111, #fff); }
.border-radius--lg { border-radius:var(--border-radius-lg); }

.page-header.page-head--screen { max-height: 90dvh;
  .page-image { position:relative; height: 50dvh;
    canvas { display:none; }
    img { height: 100%; width: 100%; object-position: center; object-fit: cover;
    }
  }
}

.page-primary, .page-secondary {
  --brand-blue:#222;
  --brand-blue-dark:#000;
  --link-blue:var(--accent-red-text);
}

.section-title--xs { font-size:clamp(2rem, 4vw + 1rem, 3rem); }

figure:not(.page-image) img { display:block; }

/* Backgrounds & patterns */
body { background-image: linear-gradient(180deg, var(--accent-pink) 0%, var(--accent-pink-light) 70%, white 100% ); }
.bg--grain { --link-blue:var(--accent-teal); background-color:var(--bg-grain); color-scheme:dark; }
.bg--grain::before { background:url(./images/bg--ptn-grain.jpg) top left / 828px repeat var(--bg-grain); background-attachment:fixed; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes blur-in {
    from { color:transparent; filter:blur(1rem); }
    to { color:inherit; filter:blur(0); }
  }
  @keyframes scale-mask {
    from { mask-size: 3000% 3000%; }
    to { mask-size: 100% 100%; }
  }
  @keyframes pulse {
    from { transform: scale(0); opacity: 1; }
    to { transform: scale(2); opacity: 0; }
  }

  @supports (animation-timeline: view()) {
    .masked {
      animation: scale-mask linear both;
      animation-timeline: view();
      animation-range: exit;
    }
    .animate.animate--fade-in {
      animation-range: entry 0% entry 20rem;
    }
    .animate.animate--blur-in { 
      animation: blur-in linear forwards;
      animation-timeline: view();
      animation-range: cover 0% cover 15rem;
    }
    .animate.animate--fade-out {
      animation-range: exit 100% exit 20rem;
    }
  }
}

/* Intro */
.section--intro { padding: 2rem;
  .section-content { max-width:50rem; margin-inline:auto; }
}
.section-border { position:absolute; inset:0; z-index:1; pointer-events:none; }
.section-border + .section-content { position:relative; z-index:2; }

/* Stats */
.stat-item--center { text-align:center; }
.stat-item--box { --section-accent:var(--accent-red); display:grid; place-content:center; gap:.25rem; margin:0; padding:2rem; border:2px dashed var(--section-accent); border-radius:var(--border-radius-lg); }
.stat-item--box .stat-value { color:var(--section-accent); font-family:var(--font-default); font-size:clamp(3.5rem, 5vw + 1rem, 6rem); font-weight:200; line-height:1.1; letter-spacing:0; }
.stat-item--box .stat-label { font-size:clamp(0.9rem, 2vw + 0.5rem, 1.125rem); color:light-dark(var(--gray), #fff); font-family:var(--font-default); font-weight: 300; }

.bg--grain .stat-item--box { --section-accent:var(--accent-teal); }

/* Text block */
.block { padding:2rem; border-radius:var(--border-radius); background-color:#2a3032; }
.block > :last-child { margin-block-end:0; }
.image--bladder img,
.image--anatomy img,
.image--coating img { border-radius:var(--border-radius); }
.image--coating img { mask-image: linear-gradient(0deg, #000 0%, #fff 20%); mask-mode: luminance; mask-size: 100% 100%; }

/* Coating */
.section--coating-graphic { padding:clamp(2rem, 8vw, 4rem); position:relative; }
.section--coating-graphic::before { content:''; display:block; position:absolute; inset:0; z-index:-1;  }

/* Process steps */
.list--steps { counter-reset:step; }
.list--steps li { position:relative; counter-increment:step; margin:0; }
.list--steps li::before { content:counter(step); display:grid; place-items:center; width:2.25rem; aspect-ratio:1; margin:0 auto 1.5rem; border-radius:50%; background-color:var(--accent-red); color:white; font-size:1.325rem; font-weight:300; }
.list--steps img { max-width:80%; margin-inline:auto; border-radius:50%; }
.list--steps h3 { font-size:1.125rem; font-weight:300; margin-block:1rem .5rem; }
.list--steps p { color:var(--accent-teal); margin-inline:auto; }

.image--stack figure img:first-child { margin-block-end:1.5rem; }
.image--stack img { border-radius:var(--border-radius); }

/* Approach */
.section-image--approach { padding-block:clamp(3rem, 10vw, 7rem); }

/* Large stat */
.section--lg-stat { padding-block:calc(var(--section-padding)*2); display:grid; align-content:center; overflow-y: clip;
  &::after { content: ""; background: rgba(0, 0, 0, 0.25); left: 0; top: 0; width: 100%; height: 100%; position: absolute; z-index: -1; }
}
.section--lg-stat .section-image--bg { inset: unset; left: 0; bottom: 0; right: 0;
  img { object-position:center bottom; }
} 
.section--lg-stat .section-image--bg::after { content:''; display:block; position:absolute; inset:0; z-index:1; background:url('images/bg--lg-stat-overlay.webp') bottom center / contain no-repeat; }

.lg-stat { --lg-stat-size:clamp(3rem, 10vw, 10rem); display:grid; justify-items:center; margin:0; color: var(--accent-teal); font-weight:200; line-height:1; grid-gap:0.5rem; font-family:var(--font-default); }
.lg-stat-intro { font-size:max(1rem, calc(var(--lg-stat-size) * .085)); letter-spacing:.02em; }
.lg-stat-figure { font-size:var(--lg-stat-size); letter-spacing:-.02em; }
.lg-stat-unit { margin-inline-start:0.125em; }
.lg-stat-value { display:flex; font-variant-numeric:tabular-nums; justify-content:center; }
.lg-stat-digit { display:block; height:1em; overflow:hidden; }
.lg-stat-reel { display:block; }
.lg-stat-reel > span { display:block; height:1em; line-height:1; }
.lg-stat-label { max-width:19ch; margin-block-start:calc(var(--lg-stat-size) * .02); font-size:calc(var(--lg-stat-size) * .22); font-weight:200; line-height:1.1; text-wrap:balance; }

.image--anatomy { display: none; /* hide on mobile */ }
.section-content {
    .stages { display: flex; flex-flow: column; list-style-type: none; }
  }

/* md */
@media only screen and (min-width: 48em) {
  .header-mark, .header-mark svg { --mark-shield:#fff; }

  .page-header .page-image { position:relative;
    canvas { position: fixed; display:block; inset:0; width:100%; height:100%; object-fit:cover; z-index:2; pointer-events: none;}
    img { height: 100%; width: 100%; object-position: center; object-fit: cover;
      &.masked { mask-image: url('./images/mask-arc.svg'); mask-mode: alpha; mask-position: center bottom; mask-size: 1200% 1200%; mask-repeat: no-repeat; }
    }
  }

  .section--intro { padding:calc(var(--section-margin)*1.25) max(10vw,5rem); }

  .image--coating img { position: sticky; top: 100px; }

  .lg-stat-figure { display:flex; align-items:flex-end; justify-content:center; }

  @media (prefers-reduced-motion: no-preference) {
    @keyframes scrub-down-slow { 
      from { transform:translateY(-2rem); }
      to { transform:translateY(2rem); }    
    }
    @keyframes scrub-down-medium { 
      from { transform:translateY(-5rem); }
      to { transform:translateY(5rem); }
    }
    @keyframes scrub-down-fast { 
      from { transform:translateY(-10rem); }
      to { transform:translateY(10rem); }
    }
    @keyframes scrub-up-slow { 
      from { transform:translateY(2rem); }
      to { transform:translateY(-2rem); }    
    }
    @keyframes scrub-up-medium { 
      from { transform:translateY(5rem); }
      to { transform:translateY(-5rem); }
    }
    @keyframes scrub-up-fast { 
      from { transform:translateY(10rem); }
      to { transform:translateY(-10rem); }
    }
    @supports (animation-timeline: view()) {
      .animate--scrub-up {
        animation-range: cover;
        transform:translateY(5rem);
        animation-name: scrub-up-medium;
      }
      .animate--scrub-down {
        animation-range: cover;
        transform:translateY(-5rem);
        animation-name: scrub-down-medium;
      }
      .section-border--cells span { 
        animation-timeline: view();
        animation-range: cover;
        animation-timing-function: linear;
        animation-fill-mode: forwards;
      }
      .section-border--cells span.layer-3 { 
        animation-name: scrub-down-slow;
      }
      .section-border--cells span.layer-2 { 
        animation-name: scrub-down-medium;
      }
      .section-border--cells span.layer-1 { 
        animation-name: scrub-down-fast;
      }
    }
  }
}

/* ml */
@media only screen and (min-width: 60em) {
  .page-header.page-header--screen {
  &.bg--dark:has(.masked) { background-color: transparent; }
    .page-image { max-height: 100vh;
      canvas { position: fixed; display:block; inset:0; width:100%; height:100%; object-fit:cover; z-index:2; pointer-events: none;}
      img { max-height: unset; }
    }
  }

  .page-header--screen::after { content: ""; width: 100vw; height: 100%; aspect-ratio: inherit; background-image: radial-gradient(closest-side, rgba(0, 0, 0, 90) 20%, rgba(0, 0, 0, 0) 100%); }

  /* Stages of catheter causing infection */
.stages-of-infection { position: relative;
  .image--anatomy { top: 0; padding-block: 7.5vh; display: flex; justify-content: center; display: flex; flex-flow: column;
    .diagram { max-height: 85vh;
      &.human-body { aspect-ratio: 2 / 5; position: relative; align-self: center;
        .bladder-location { position: absolute; box-shadow: var(--accent-red) 0 0 20px; border: 3px dashed var(--accent-red); border-radius: 50%; aspect-ratio: 1; height: auto; width: 20%; background: url('./images/bladder.png') center center / 70% auto no-repeat; opacity: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); }
        img { object-fit: contain; }
        .organ-hotspots {
          span { position: absolute; width: 10%; height: auto; aspect-ratio: 1; border-radius: 50%; border: 3px dashed var(--accent-red); background: radial-gradient(rgba(230, 100, 91, 1) 0%, rgba(230, 100, 91, 0) 100%); transform: translate(-50%, -50%); opacity: 0;
            &.location-heart { top: 25%; left: 56%; }
            &.location-knee { top: 72%; left: 66%; }
            &.location-brain { top: 4%; left: 50%; }
            &.location-arm { top: 34%; left: 19%; }
            &.location-leg { top: 60%; left: 36%; }
            &.location-bladder { top: 50%; left: 50%; }
            &.location-hip { top: 47%; left: 67%; }
            &.location-stomach { top: 37%; left: 50%; }
            &::after { content: ""; animation: pulse 2s infinite forwards; width: 100%; height: 100%; display: block; background-color: #b02a1c; border-radius: 50%; }
            &:nth-child(1)::after { animation-delay: 0.1s; }
            &:nth-child(2)::after { animation-delay: 0.2s; }
            &:nth-child(3)::after { animation-delay: 0.3s; }
            &:nth-child(4)::after { animation-delay: 0.4s; }
            &:nth-child(5)::after { animation-delay: 0.5s; }
            &:nth-child(6)::after { animation-delay: 0.6s; }
            &:nth-child(7)::after { animation-delay: 0.7s; }
            &:nth-child(8)::after { animation-delay: 0.8s; }
          }
        }
      }
      &.bladder-diagram { position: absolute; top: 50%; transform: translateY(-50%) scale(0.8); clip-path: circle(100% at 50% 50%); transform-origin: 50% 70%; opacity: 0; transform-box: fill-box;
        .label-catheter,
        .label-bladder,
        .fungi.normal,
        .fungi.extra ellipse,
        .fungi.extra circle,
        .bacteria,
        .balloon,
        .catheter { opacity: 0; }
      }
    }
  }
  .section-content {
    .stages { display: flex; flex-flow: column; list-style-type: none; padding: 0;
      li { height: 100vh; align-content: center; }
    }
  }
}

  .block { padding:3rem; }
  .block--overlap { position:relative; z-index:1; margin-inline-start:-6rem; }

  .list--steps li:not(:last-child)::after { content:''; display:block; position:absolute; right:calc(var(--grid-gap-lg)/-2); top:calc(2.5rem + 1.5rem); width:2px; height:calc(100% - (2.5rem + 1.5rem)); border-right:1px dashed white; }

  /* Gallery */
  .list--gallery figure { max-height:30vw; width:100%; 
    img { height:100%; width:100%; object-fit:cover; }
  }
}

/* lg */
@media only screen and (min-width: 80em) {
}

/* xl */
@media only screen and (min-width: 100em) {
  .stages-of-infection .stages p:not(.section-title) { font-size:clamp(1.125rem, .9vw + .25rem, 1.75rem); }
}

@media only screen and (min-width: 120em) {
}

@media only screen and (min-width: 135em) {
  .page-secondary.full-width .section--screen { --gutter-width: 0; --gutter-offset: 0; }
}