.ds-hero{
  --ds-hero-pad:  clamp(20px, 3.472vw, 50px);
  --ds-hero-gap:  clamp(8px, 0.972vw, 14px);
  --ds-hero-rule: 3px;
  --ds-hero-lines: 4;

  --ds-hero-above: 285fr;
  --ds-hero-below: 420fr;

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

  display: grid;
  grid-template-rows: var(--ds-hero-above) auto var(--ds-hero-below);
  justify-items: center;

  padding-inline: var(--ds-hero-pad);
}

.ds-hero__center{
  grid-row: 2;
  display: grid;
  justify-items: center;
  gap: clamp(.5rem, 1.06vw, 1rem);
  text-align: center;
}

.ds-hero__logo{
  display: block;
  width: clamp(26px, 2.778vw, 40px);
  height: auto;
}

.ds-hero__brand{
  display: block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ds-hero__brand .ds-hero__logo{
  position: relative;
  z-index: 3;
  transform: translateY(var(--ds-logo-lift, 0%)) rotate(var(--ds-logo-rot, 0deg));
  transition: transform var(--ds-dur-base, .4s) var(--ds-ease-out);
}

.ds-hero__brand:hover{ --ds-logo-lift: -5%; }

.ds-hero__brand.is-fallen{ cursor: default; }

.ds-hero__brand.is-fallen .ds-hero__logo{
  transition: none;
  animation: ds-logo-fall var(--ds-dur-fall, .8s) var(--ds-ease-in) forwards;
}
@keyframes ds-logo-fall{
  0%  { transform: translateY(var(--ds-logo-lift, 0%)) rotate(var(--ds-logo-rot, 0deg)); opacity: 1; }
  100%{ transform: translateY(90vh) rotate(calc(var(--ds-logo-rot, 0deg) * 2.5)); opacity: 0; }
}

.ds-hero__brand.is-back .ds-hero__logo{
  animation: ds-logo-back var(--ds-dur-base, .4s) ease both;
}
@keyframes ds-logo-back{
  from{ opacity: 0; }
  to  { opacity: 1; }
}

.ds-hero__eyebrow{
  margin: 0;
  font-family: var(--ds-font-alt);
  font-size: var(--guide-fs-small);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: .06em;
  color: var(--ds-text-color);
}

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

.ds-hero__note{
  position: absolute;
  left: var(--ds-hero-pad);
  bottom: var(--ds-hero-pad);
  max-width: calc(100% - 2 * var(--ds-hero-pad));

  display: flex;
  align-items: stretch;
  gap: var(--ds-hero-gap);

  font-size: var(--guide-fs-small);
  line-height: 1.4;
}

.ds-hero__bomb{
  position: relative;
  flex: 0 0 auto;
  align-self: stretch;
  width: calc(var(--ds-hero-lines) * 1.4em);
  border: var(--ds-hero-rule) solid currentColor;

  display: grid;
  place-items: center;

  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border-radius: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ds-hero__bomb:focus-visible{
  outline: 2px solid var(--ds-paper, #F0F0F0);
  outline-offset: 3px;
}

.ds-hero__bomb-icon{
  display: block;
  width: 3.2em;
  height: 3.2em;
  transition: transform .25s var(--ds-ease-out);
}
@media (hover: hover){
  .ds-hero__bomb:hover .ds-hero__bomb-icon{ transform: scale(1.14); }
}
.ds-hero__bomb:active .ds-hero__bomb-icon{ transform: scale(1.04); }

.ds-hero__boom{
  position: absolute;
  z-index: 3;
  left: var(--boom-x);
  top: var(--boom-y);
  width: var(--boom-s);
  height: var(--boom-s);
  translate: -50% -50%;
  pointer-events: none;

  background-image: var(--boom-src);
  background-size: 1200% 100%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  animation: ds-hero-boom 1.2s steps(12, jump-none) forwards;
}
@keyframes ds-hero-boom{
  from{ background-position: 0% 0; }
  to  { background-position: 100% 0; }
}

.ds-hero__note.is-boom .ds-hero__bomb{
  pointer-events: none;
  animation: ds-hero-pop .18s steps(3) .12s forwards;
}
@keyframes ds-hero-pop{
  from{ opacity: 1; }
  to  { opacity: 0; transform: scale(1.25); }
}

.ds-hero__note.is-boom .ds-hero__claim{
  animation: ds-hero-burn .5s steps(10) .2s forwards;
}
@keyframes ds-hero-burn{
  from{ clip-path: inset(-.5em 0 -.5em 0); }
  to  { clip-path: inset(-.5em 0 -.5em 100%); }
}

.ds-hero__note.is-gone .ds-hero__bomb,
.ds-hero__note.is-gone .ds-hero__claim{ visibility: hidden; }

.ds-hero__note.is-back{
  animation: ds-hero-back var(--ds-dur-base, .4s) ease both;
}
@keyframes ds-hero-back{
  from{ opacity: 0; }
  to  { opacity: 1; }
}

.ds-hero__claim{
  -webkit-text-stroke: .03em currentColor;
}

.ds-hero__claim{
  margin: 0;
  width: min(28em, 100%);
  font-family: var(--ds-font-alt);
  font-size: inherit;
  line-height: inherit;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ds-text-color);
}

@media (max-height: 560px){
  .ds-hero__note{ display: none; }
}

@media (max-width: 700px) and (min-height: 561px){
  .ds-hero{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 72px;
  }
  .ds-hero__center{ margin-block: auto; }
  .ds-hero__note{
    position: relative;
    left: auto;
    bottom: auto;
    flex: none;
    align-self: stretch;
    max-width: none;
    margin-bottom: calc(var(--ds-sec-cut, 0px) + var(--ds-hero-pad));
    position: relative;
    z-index: 1;
    flex-direction: row;
    align-items: flex-start;
    font-size: .8125rem;
  }
  .ds-hero__claim{
    flex: 1 1 auto;
    width: auto;
    -webkit-text-stroke: .02em currentColor;
  }
  .ds-hero__bomb{
    align-self: flex-start;
    width: 4.4em;
    height: 4.4em;
  }
  .ds-hero__bomb-icon{ width: 2.6em; height: 2.6em; }
}

@media (pointer: coarse) and (min-width: 721px){
  .ds-hero__note{
    bottom: calc(var(--ds-sec-cut, 0px) + env(safe-area-inset-bottom, 0px)
                 + var(--ds-hero-pad) + 3rem);
  }
}

@media (min-width: 721px) and (orientation: portrait){
  .ds-hero .ds-title{ --ds-title-size: 5.75vw; }
  .ds-hero__eyebrow{ font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce){
  .ds-hero__brand .ds-hero__logo{ transition: none; transform: none; }
  .ds-hero__brand.is-fallen .ds-hero__logo{ animation: none; opacity: 0; }
  .ds-hero__brand.is-back .ds-hero__logo{ animation: none; }
  .ds-hero__bomb-icon{ transition: none; }
  .ds-hero__bomb:hover .ds-hero__bomb-icon,
  .ds-hero__bomb:active .ds-hero__bomb-icon{ transform: none; }
  .ds-hero__note.is-boom .ds-hero__bomb,
  .ds-hero__note.is-boom .ds-hero__claim{ animation: ds-hero-fade .3s ease forwards; }
  .ds-hero__note.is-back{ animation: none; }
}
@keyframes ds-hero-fade{
  to{ opacity: 0; }
}