.hconv-play {
  position: relative;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--hconv-reduced) center / contain no-repeat, #020303;
}

.hconv-play video {
  position: absolute;
  z-index: -4;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  background: #000;
  filter: contrast(1.06) saturate(.94);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.hconv-play video::-webkit-media-controls,
.hconv-play video::-webkit-media-controls-enclosure,
.hconv-play video::-webkit-media-controls-panel,
.hconv-play video::-webkit-media-controls-overlay-play-button,
.hconv-play video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
  opacity: 0;
}

.hconv-play[data-playback="fallback"] video { opacity: 0; }

.hconv-powerfield {
  position: absolute;
  z-index: -3;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  opacity: 0;
  background: #000;
  pointer-events: none;
}

.hconv-powerfield__visual {
  position: relative;
  width: min(100vw, 177.7778dvh);
  height: min(100dvh, 56.25vw);
  overflow: hidden;
  background: #000;
}

.hconv-powerfield__base,
.hconv-powerfield__trace {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hconv-powerfield__base {
  filter: brightness(.72) contrast(1.15) saturate(.72);
}

.hconv-powerfield__trace {
  opacity: .15;
  mix-blend-mode: screen;
  filter: grayscale(1) contrast(3.2) brightness(.62);
}

.hconv-powerfield__visual::after {
  content: "";
  position: absolute;
  inset: -35% 0;
  background: linear-gradient(transparent 42%, rgb(226 255 207 / .15) 49.5%, rgb(226 255 207 / .3) 50%, transparent 50.8%);
  transform: translateY(-34%);
  animation: hconv-scan 5.4s cubic-bezier(.23, 1, .32, 1) infinite;
}

.hconv-powerfield__rotor {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scaleY(var(--squash));
  transform-origin: center;
  opacity: .9;
  mix-blend-mode: screen;
}

.hconv-powerfield__rotor::before,
.hconv-powerfield__rotor::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url('/assets/video/grok/power-core-conversion/rotor-field.svg') center / contain no-repeat;
  transform-origin: center;
}

.hconv-powerfield__rotor::before {
  animation: hconv-rotor-forward 2.4s linear infinite;
  animation-delay: var(--delay);
}

.hconv-powerfield__rotor::after {
  inset: 17%;
  opacity: .62;
  animation: hconv-rotor-reverse 1.65s linear infinite;
  animation-delay: calc(var(--delay) * -1);
}

.hconv-powerfield-showcase .hconv-powerfield {
  opacity: 1;
}

.hconv-powerfield-showcase {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #000;
}

.hconv-powerfield-showcase__copy {
  position: absolute;
  z-index: 2;
  left: max(36px, calc((100vw - 1320px) / 2));
  bottom: 42px;
  color: #f4f6f1;
  text-shadow: 0 10px 40px #000;
}

.hconv-powerfield-showcase__copy p {
  margin: 0 0 10px;
  color: var(--hp-accent);
  font: 500 9px/1.3 "DM Mono", monospace;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.hconv-powerfield-showcase__copy h2 {
  max-width: 9ch;
  margin: 0;
  font: 500 clamp(42px, 5.5vw, 88px)/.86 "Space Grotesk", sans-serif;
  letter-spacing: -.07em;
  text-transform: uppercase;
}

.hconv-play__blackout {
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: 0;
  background: #000;
  transition: opacity 680ms cubic-bezier(.2, .75, .25, 1);
  pointer-events: none;
}

.hconv-play[data-transition-mode="black-copy"][data-transition-state="blackout"] .hconv-play__blackout {
  opacity: 1;
}

.hconv-play__resolve {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: min(1160px, calc(100vw - 72px));
  opacity: 0;
  transform: translate(-50%, calc(-50% + 22px));
  text-align: center;
  transition: opacity 620ms cubic-bezier(.23, 1, .32, 1), transform 760ms cubic-bezier(.23, 1, .32, 1);
  pointer-events: none;
}

.hconv-play__resolve p {
  margin: 0 0 18px;
  color: var(--hp-accent);
  font: 500 10px/1.3 "DM Mono", monospace;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.hconv-play__resolve h2 {
  max-width: 11ch;
  margin: 0 auto;
  color: #f4f6f1;
  font: 500 clamp(58px, 8.8vw, 142px)/.82 "Space Grotesk", sans-serif;
  letter-spacing: -.078em;
  text-transform: uppercase;
  text-wrap: balance;
}

.hconv-play[data-resolution-state="copy"] .hconv-play__resolve {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.hconv-play[data-resolution-state="copy"] .hconv-play__disclosure {
  opacity: 0;
}

.hconv-play[data-transition-state="blackout"] .hconv-play__disclosure {
  opacity: 0;
}

@keyframes hconv-rotor-forward { to { transform: rotate(360deg); } }
@keyframes hconv-rotor-reverse { to { transform: rotate(-360deg); } }
@keyframes hconv-scan { 0%, 18% { transform: translateY(-34%); opacity: 0; } 32% { opacity: .9; } 72% { opacity: .35; } 100% { transform: translateY(34%); opacity: 0; } }

.hconv-play__scrim {
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    radial-gradient(ellipse 68% 48% at 50% 52%, rgb(1 2 2 / .05), rgb(1 2 2 / .7)),
    linear-gradient(0deg, rgb(1 2 2 / .58), transparent 34%, rgb(1 2 2 / .3));
  pointer-events: none;
}

.hconv-play__copy {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100vw - 72px));
  text-align: center;
  text-shadow: 0 10px 42px rgb(0 0 0 / .58);
  transition: opacity 420ms cubic-bezier(.23, 1, .32, 1), transform 520ms cubic-bezier(.23, 1, .32, 1);
}

.hconv-play__copy p,
.hconv-play__endpoint,
.hconv-play__disclosure {
  margin: 0;
  color: var(--hp-accent);
  font: 500 10px/1.3 "DM Mono", monospace;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.hconv-play__copy h2 {
  max-width: 1040px;
  margin: 18px auto 0;
  color: #f4f6f1;
  font: 500 clamp(54px, 8vw, 128px)/.84 "Space Grotesk", sans-serif;
  letter-spacing: -.074em;
  text-transform: uppercase;
  text-wrap: balance;
}

.hconv-play__endpoint {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 34px;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 360ms ease, transform 420ms cubic-bezier(.23, 1, .32, 1);
}

.hconv-play__disclosure {
  position: absolute;
  z-index: 2;
  right: 38px;
  bottom: 30px;
  max-width: 520px;
  color: rgb(255 255 255 / .58);
  font-size: 9px;
  text-align: right;
  transition: opacity 300ms ease;
}

.hconv-play[data-copy-state="clear"] .hconv-play__copy {
  opacity: 0;
  transform: translateY(-10px);
}

.hconv-play[data-copy-state="clear"] .hconv-play__endpoint {
  opacity: 1;
  transform: translate(-50%, 0);
}

.hconv-play[data-playback="loading"] .hconv-play__copy { opacity: .78; }

.hc-statement[data-highlight] {
  min-height: 180svh;
  display: block;
  background: #0b0e0c;
  color: #f1f4ef;
}

.hc-statement__sticky {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: grid;
  align-items: center;
}

.hc-statement[data-highlight] [data-highlight-word] {
  color: inherit;
  opacity: .14;
  transition: opacity 80ms linear;
}

@media (max-width: 720px) {
  .hconv-play { min-height: 100svh; }
  .hconv-play__copy { width: calc(100vw - 36px); }
  .hconv-play__copy h2 { font-size: 14.6vw; line-height: .88; }
  .hconv-play__endpoint { left: 18px; right: 18px; bottom: 22px; text-align: left; transform: translateY(8px); }
  .hconv-play[data-copy-state="clear"] .hconv-play__endpoint { transform: none; }
  .hconv-play__disclosure { right: 18px; bottom: max(18px, env(safe-area-inset-bottom)); max-width: 270px; }
  .hconv-play[data-endpoint] .hconv-play__disclosure { display: none; }
  .hconv-powerfield__visual { width: min(100vw, 177.7778svh); height: min(100svh, 56.25vw); }
  .hconv-powerfield-showcase__copy { left: 18px; right: 18px; bottom: 24px; }
  .hconv-powerfield-showcase__copy h2 { font-size: 12vw; }
  .hconv-play__resolve { width: calc(100vw - 36px); }
  .hconv-play__resolve h2 { font-size: 14.8vw; line-height: .86; }
}

@media (prefers-reduced-motion: reduce) {
  .hconv-powerfield__visual::after,
  .hconv-powerfield__rotor::before,
  .hconv-powerfield__rotor::after { animation: none; }

  .hconv-play[data-transition-mode="black-copy"] .hconv-play__blackout,
  .hconv-play[data-transition-mode="black-copy"] .hconv-play__resolve {
    opacity: 1;
  }

  .hconv-play[data-transition-mode="black-copy"] .hconv-play__resolve { transform: translate(-50%, -50%); }
  .hconv-play[data-transition-mode="black-copy"] .hconv-play__copy,
  .hconv-play[data-transition-mode="black-copy"] .hconv-play__disclosure { display: none; }

  .hc-statement[data-highlight] {
    min-height: auto;
    padding: 120px 0;
  }

  .hc-statement__sticky {
    position: relative;
    min-height: auto;
  }

  .hc-statement[data-highlight] [data-highlight-word] {
    opacity: 1 !important;
    transition: none;
  }

  .hconv-play {
    background:
      linear-gradient(0deg, rgb(1 2 2 / .62), rgb(1 2 2 / .18)),
      var(--hconv-reduced) center / contain no-repeat,
      #000;
  }
  body[data-power] .hconv-play video { display: none; }
  .hconv-play__copy,
  .hconv-play__endpoint,
  .hconv-play__resolve,
  .hconv-play__blackout { transition: none; }
  .hconv-play[data-endpoint] .hconv-play__copy { display: none; }
  .hconv-play[data-endpoint] .hconv-play__endpoint { opacity: 1; transform: translate(-50%, 0); }
}

@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .hconv-play[data-endpoint] .hconv-play__endpoint { transform: none; }
}