.ds-intro{
  --ds-intro-pad:      clamp(16px, 2.778vw, 40px);
  --ds-intro-gap:      clamp(20px, 2.778vw, 40px);
  --ds-intro-portrait: clamp(165px, 26.4vw, 380px);
  --ds-intro-measure:  clamp(260px, 60vw, 880px);
  --ds-intro-rule:     3px;

  --ds-intro-shift:    clamp(0px, 4.167vw, 60px);

  --ds-intro-caret-x:   18.571%;
  --ds-intro-caret-top: 37.807%;
  --ds-intro-caret-h:   11.457%;
  --ds-intro-caret-cap:   clamp(8px, 1.04vw, 15px);
  --ds-intro-caret-color: rgb(240 240 240 / .85);
  --ds-intro-scan:      16 118 213;

  --ds-tape1-w:  53.81%;
  --ds-tape1-x: -26.31%;
  --ds-tape1-y: -11%;
  --ds-tape1-rot: -35deg;
  --ds-tape2-w:  63.57%;
  --ds-tape2-x: -22.64%;
  --ds-tape2-y: -12%;
  --ds-tape2-rot:  27deg;

  position: absolute;
  inset: 0;
  z-index: 2;

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ds-intro-gap);
  padding-inline: var(--ds-intro-pad);
}

.ds-intro__text{
  display: grid;
  justify-items: start;
}

.ds-intro .ds-title{
  --ds-title-size: var(--guide-fs-title);
  --ds-title-leading: 1.2;
}

.ds-intro__note{
  display: flex;
  align-items: stretch;
  gap: clamp(10px, 1.389vw, 20px);
  width: 100%;
  max-width: var(--ds-intro-measure);
  margin-top: clamp(14px, 1.7vw, 24px);
}

.ds-intro__rule{
  flex: 0 0 auto;
  width: var(--ds-intro-rule);
  background: var(--ds-text-color);
}

.ds-intro__body{
  font-family: var(--ds-font-alt);
  font-size: var(--guide-fs-body);
  font-weight: 300;
  line-height: 1.4;
  color: var(--ds-text-color);
}
.ds-intro__body p{ margin: 0; }
.ds-intro__body p + p{ margin-top: .9em; }

.ds-intro .ds-action{
  margin-top: clamp(18px, 2.2vw, 32px);
}

.ds-spray{
  position: relative;
  display: inline-block;
}

.ds-spray img{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: 4.61em;
  height: auto;
  max-width: none;
  z-index: -1;
  pointer-events: none;
}

.ds-title[data-ds-ready] .ds-spray img{ opacity: 0; }

.ds-title--play .ds-spray img{
  animation: ds-spray-in .6s var(--ds-ease-out) var(--ds-title-start, .6s) both;
}

@keyframes ds-spray-in{
  from{ opacity: 0; transform: translate(-50%, -50%) scale(.85); }
  to  { opacity: 1; transform: translate(-50%, -50%); }
}

.ds-intro__media{
  position: relative;
  right: var(--ds-intro-shift);
  justify-self: end;
  line-height: 0;
}

.ds-intro__portrait{
  display: block;
  width: var(--ds-intro-portrait);
  height: auto;
}

.ds-intro__scan{
  position: absolute;
  left:  var(--ds-intro-caret-x);
  right: var(--ds-intro-caret-x);
  top: var(--ds-intro-caret-top);
  height: var(--ds-intro-caret-h);
}

.ds-intro__fill{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  background: rgb(var(--ds-intro-scan) / .30);
  transition: width .55s var(--ds-ease-out);
}
.ds-intro__scan:hover .ds-intro__fill{ width: 100%; }

.ds-intro__caret{
  position: absolute;
  top: 0;
  height: 100%;
  right: calc(var(--ds-intro-caret-cap) / -2);
  width: var(--ds-intro-caret-cap);
  overflow: visible;
  animation: ds-caret 1.2s infinite;
}

.ds-intro__caret path{
  fill: none;
  stroke: var(--ds-intro-caret-color);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}


@keyframes ds-caret{
  0%, 45%  { opacity: 1; }
  50%, 95% { opacity: 0; }
  100%     { opacity: 1; }
}

.ds-intro__tape{
  position: absolute;
  z-index: 2;
  height: auto;
  pointer-events: none;
}

.ds-intro__tape--1{
  width: var(--ds-tape1-w);
  left: var(--ds-tape1-x);
  bottom: var(--ds-tape1-y);
  transform: rotate(var(--ds-tape1-rot));
}

.ds-intro__tape--2{
  width: var(--ds-tape2-w);
  right: var(--ds-tape2-x);
  top: var(--ds-tape2-y);
  transform: rotate(var(--ds-tape2-rot));
}

.ds-intro__scan{ z-index: 3; }

@media (max-width: 900px){
  .ds-intro{
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    --ds-intro-shift: 0px;
  }
  .ds-intro__media{ justify-self: start; }
}

@media (max-width: 640px){
  .ds-intro{
    --ds-intro-portrait: clamp(96px, 28vw, 132px);
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title  media"
      "note   note"
      "action action";
    align-items: center;
    align-content: center;
    column-gap: 14px;
    row-gap: 0;
  }
  .ds-intro__text{ display: contents; }
  .ds-intro .ds-title{
    grid-area: title;
    justify-self: start;
    --ds-title-size: min(var(--guide-fs-title), 8.6vw);
  }
  :root:lang(en) .ds-intro .ds-title{
    --ds-title-size: min(var(--guide-fs-title), 7.9vw);
  }
  .ds-intro__note{
    grid-area: note;
    max-width: none;
    margin-top: 1.4rem;
  }
  .ds-intro .ds-action{
    grid-area: action;
    justify-self: start;
  }
  .ds-intro__media{
    display: block;
    grid-area: media;
    right: 0;
    justify-self: end;
    align-self: center;
  }
}

@media (min-width: 721px) and (orientation: portrait){
  .ds-intro{
    --ds-intro-portrait: min(33vw, 340px);
    --ds-intro-shift: 0px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title  title"
      "note   media"
      "action media";
    align-content: center;
    column-gap: 5vw;
    row-gap: 0;
    padding-inline: 6vw;
  }
  .ds-intro__text{ display: contents; }
  .ds-intro .ds-title{
    grid-area: title;
    --ds-title-size: 6.3vw;
    margin-bottom: 2.6rem;
  }
  .ds-intro__note{
    grid-area: note;
    align-self: end;
    max-width: none;
    margin-top: 0;
  }
  .ds-intro__body{ font-size: 1.125rem; }
  .ds-intro .ds-action{
    grid-area: action;
    align-self: start;
    margin-top: 1.8rem;
  }
  .ds-intro__media{
    grid-area: media;
    right: 0;
    justify-self: end;
    align-self: center;
  }
}

@media (prefers-reduced-motion: reduce){
  .ds-intro__caret{ animation: none; }
  .ds-intro__fill{ transition: none; }

  .ds-title[data-ds-ready] .ds-spray img{ opacity: 1; }
  .ds-title--play .ds-spray img{ animation: none; }
}