/* OA interaction polish: reference-led square cursor, persistent pixel trail, pixel eye, and wordmark signal aperture. */

:root {
  --oa-eye-acid: #d7ff00;
  --oa-eye-blue: #2447ff;
  --oa-eye-paper: #f2f1ed;
  --oa-eye-ink: #121212;
  --oa-cursor-pixel-size: 12px;
}

.oa-pixel-eye {
  display: none;
  pointer-events: none;
}

.oa-cursor-pixel-trail {
  position: fixed;
  inset: 0;
  z-index: 199;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  image-rendering: pixelated;
  mix-blend-mode: normal;
  contain: strict;
}

#cursor.is-oa-cursor-blocked {
  opacity: 0 !important;
  visibility: hidden !important;
}

@media (hover: hover) and (pointer: fine) {
  html.oa-pixel-cursor-ready body,
  html.oa-pixel-cursor-ready body * {
    cursor: none !important;
  }

  html.oa-pixel-cursor-ready :is(input:not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, [contenteditable="true"]) {
    cursor: text !important;
  }

  html.oa-pixel-cursor-ready :is(select, iframe) {
    cursor: auto !important;
  }

  #cursor.is-pixel-eye:not([data-oa-cursor]):not(.is-eye-leaving) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  #cursor.is-pixel-eye:is([data-oa-cursor="square"], [data-oa-cursor="hover"], [data-oa-cursor="eye"], .is-eye-leaving) {
    display: block !important;
    width: var(--oa-cursor-pixel-size) !important;
    height: var(--oa-cursor-pixel-size) !important;
    margin: -6px 0 0 -6px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: var(--oa-cursor-color, var(--oa-eye-blue)) !important;
    background: transparent !important;
    -webkit-mask: none !important;
    mask: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    overflow: visible !important;
    transition: none !important;
    pointer-events: none !important;
    z-index: 202 !important;
    --oa-cursor-color: var(--oa-eye-blue);
    --oa-cursor-detail: var(--oa-eye-acid);
    --oa-eye-glint: var(--oa-cursor-detail);
  }

  #cursor.is-pixel-eye[data-oa-tone="acid"] {
    --oa-cursor-color: var(--oa-eye-acid);
    --oa-cursor-detail: var(--oa-eye-ink);
  }

  #cursor.is-pixel-eye[data-oa-tone="ink"] {
    --oa-cursor-color: var(--oa-eye-ink);
    --oa-cursor-detail: var(--oa-eye-acid);
  }

  #cursor.is-pixel-eye[data-oa-tone="blue"] {
    --oa-cursor-color: var(--oa-eye-blue);
    --oa-cursor-detail: var(--oa-eye-acid);
  }

  #cursor.is-pixel-eye:is([data-oa-cursor="square"], [data-oa-cursor="hover"], [data-oa-cursor="eye"], .is-eye-leaving)::after {
    display: none !important;
    content: none !important;
  }

  #cursor.is-pixel-eye:is([data-oa-cursor="square"], [data-oa-cursor="hover"], [data-oa-cursor="eye"], .is-eye-leaving)::before {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    display: block !important;
    width: var(--oa-square-width, var(--oa-cursor-pixel-size)) !important;
    height: var(--oa-square-height, var(--oa-cursor-pixel-size)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    content: "" !important;
    opacity: 0;
    background: currentColor !important;
    transform: translate3d(0, 0, 0) scale(1);
    transform-origin: center;
    pointer-events: none;
  }

  #cursor.is-pixel-eye:is([data-oa-cursor="square"], [data-oa-cursor="hover"])::before {
    opacity: 1;
    transform: translate3d(
      calc(var(--oa-square-local-x, 0px) + var(--oa-square-offset-x, 0px)),
      calc(var(--oa-square-local-y, 0px) + var(--oa-square-offset-y, 0px)),
      0
    );
  }

  /* The OA remains the solid identity anchor. On its hit area, the cursor
     itself opens into the same one-pixel hairline used by text rollovers. */
  html.oa-pixel-cursor-ready body:has(.oa-home-mark:hover)
  #cursor.is-pixel-eye[data-oa-cursor="square"]::before {
    background: transparent !important;
    box-shadow: inset 0 0 0 1px var(--oa-eye-ink) !important;
  }

  /* Once the 12px seed exists, it becomes the pointer itself and morphs into
     the text outline. Hiding the base square only after that handoff prevents
     both a doubled cursor and a blank frame. */
  #cursor.is-pixel-eye[data-oa-cursor="hover"][data-oa-hover-active="true"]::before {
    opacity: 0;
  }

  #cursor.is-pixel-eye:is([data-oa-cursor="square"], [data-oa-cursor="hover"], [data-oa-cursor="eye"], .is-eye-leaving) > span {
    display: none !important;
    opacity: 0 !important;
  }

  .oa-pixel-hover-fill {
    position: fixed;
    z-index: 201;
    display: block;
    min-width: var(--oa-cursor-pixel-size);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--oa-eye-blue);
    background: currentColor;
    box-shadow: none;
    pointer-events: none;
    image-rendering: pixelated;
    transition:
      left .18s cubic-bezier(.22, 1, .36, 1),
      top .18s cubic-bezier(.22, 1, .36, 1),
      width .18s cubic-bezier(.22, 1, .36, 1),
      height .18s cubic-bezier(.22, 1, .36, 1),
      opacity .12s linear;
    will-change: left, top, width, height;
  }

  .oa-pixel-hover-fill[data-oa-hover-tone="acid"] {
    color: var(--oa-eye-acid);
  }

  .oa-pixel-hover-fill[data-oa-hover-tone="ink"] {
    color: var(--oa-eye-ink);
  }

  .oa-pixel-hover-fill[data-oa-hover-tone="blue"] {
    color: var(--oa-eye-blue);
  }

  /* TOP lives above normal page content. Its cursor frame alone joins that
     utility layer, while the native border hands off to the moving outline. */
  .oa-pixel-hover-fill[data-oa-hover-layer="utility"] {
    z-index: 8501;
  }

  .oa-to-top:is(.is-oa-pixel-hover-active, .is-oa-pixel-hover-releasing) {
    border-color: transparent;
  }

  .oa-pixel-hover-fill[data-oa-hover-mode="outline"] {
    background: transparent;
    box-shadow: inset 0 0 0 1px currentColor;
  }

  /* The solid cursor becomes a hollow pixel before its geometry expands, so
     the rollover handoff never covers the letter beneath the pointer. */
  .oa-pixel-hover-fill[data-oa-hover-mode="seed"] {
    background: transparent;
    box-shadow: inset 0 0 0 1px currentColor;
  }

  /* The active-page signal remains the menu's resting state. While the
     pointer outline is engaged, hide that second rule so only one cursor
     language is visible. */
  html.oa-pixel-nav-morph .bar-nav-signal {
    opacity: 0 !important;
  }

  /* A textless action keeps the 12px cursor square instead of creating a
     second, ambiguous mark. */
  .oa-pixel-hover-fill[data-oa-hover-mode="none"] {
    display: none;
  }

  .oa-pixel-hover-surface.is-oa-pixel-hover-releasing + .oa-pixel-hover-fill,
  .oa-pixel-hover-fill[data-oa-hover-mode="seed"] {
    transition-duration: .14s;
  }

  /* Full-page and accordion wipes suspend the custom art. Restore the native
     pointer during that interval so its location is never lost. */
  html.oa-pixel-cursor-ready:is(.is-page-transitioning, .oa-work-route-pending) body,
  html.oa-pixel-cursor-ready:is(.is-page-transitioning, .oa-work-route-pending) body *,
  html.oa-pixel-cursor-ready body:is(.is-leaving, .is-entering, .oa-work-route-running),
  html.oa-pixel-cursor-ready body:is(.is-leaving, .is-entering, .oa-work-route-running) *,
  html.oa-pixel-cursor-ready:has(.oa-accordion.is-active) body,
  html.oa-pixel-cursor-ready:has(.oa-accordion.is-active) body * {
    cursor: auto !important;
  }

  /* The hairline owns row feedback; keep the measured title from sliding out
     of its measured outline while the pointer is active. */
  html.oa-pixel-cursor-ready .row:is(:hover, .is-hovered) .row-title.oa-pixel-hover-surface {
    transform: none !important;
  }

  .oa-pixel-eye {
    position: absolute;
    top: 0;
    left: 0;
    width: 66px;
    height: 42px;
    overflow: visible;
    color: inherit;
    image-rendering: pixelated;
    shape-rendering: crispEdges;
    filter: none !important;
    transform-origin: center;
  }

  #cursor:is([data-oa-cursor="eye"], .is-eye-leaving) .oa-pixel-eye {
    display: block;
    transform: translate3d(var(--oa-eye-local-x, 16px), var(--oa-eye-local-y, 12px), 0);
    will-change: transform;
  }

  #cursor.is-eye-entering .oa-pixel-eye {
    animation: oa-pixel-eye-arrive .28s cubic-bezier(.22, 1, .36, 1) both;
  }

  #cursor.is-eye-entering::before {
    animation: oa-pixel-eye-seed-out .22s ease-out both;
  }

  #cursor.is-eye-leaving .oa-pixel-eye {
    animation: oa-pixel-eye-depart .24s cubic-bezier(.55, 0, .78, 0) both;
  }

  #cursor.is-eye-leaving::before {
    animation: oa-pixel-eye-seed-in .24s ease-out both;
  }

  .oa-pixel-eye .eye-lid,
  .oa-pixel-eye .eye-lower,
  .oa-pixel-eye .eye-pupil {
    fill: currentColor;
  }

  .oa-pixel-eye .eye-sclera {
    fill: #fff;
  }

  .oa-pixel-eye .eye-glint {
    fill: var(--oa-eye-glint, var(--oa-eye-paper));
  }

  .oa-pixel-eye .eye-pupil-group {
    transform: translate(var(--oa-pixel-eye-x, 0px), var(--oa-pixel-eye-y, 0px));
    transform-box: fill-box;
    transform-origin: center;
  }

  .oa-pixel-eye .eye-frame-half,
  .oa-pixel-eye .eye-frame-closed {
    opacity: 0;
  }

  #cursor[data-oa-cursor="eye"].is-blinking .eye-frame-open {
    animation: oa-pixel-eye-open .2s steps(1, end) both;
  }

  #cursor[data-oa-cursor="eye"].is-blinking .eye-frame-half {
    animation: oa-pixel-eye-half .2s steps(1, end) both;
  }

  #cursor[data-oa-cursor="eye"].is-blinking .eye-frame-closed {
    animation: oa-pixel-eye-closed .2s steps(1, end) both;
  }

}

@keyframes oa-pixel-eye-arrive {
  0% {
    opacity: 0;
    transform: translate3d(-28px, -16px, 0) scale(.15);
  }
  38% { opacity: 1; }
  100% {
    opacity: 1;
    transform: translate3d(var(--oa-eye-local-x, 16px), var(--oa-eye-local-y, 12px), 0) scale(1);
  }
}

@keyframes oa-pixel-eye-depart {
  0% {
    opacity: 1;
    transform: translate3d(var(--oa-eye-local-x, 16px), var(--oa-eye-local-y, 12px), 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(-28px, -16px, 0) scale(.15);
  }
}

@keyframes oa-pixel-eye-seed-out {
  0% {
    opacity: 1;
    background-color: currentColor;
    transform: translate3d(var(--oa-square-local-x, 0), var(--oa-square-local-y, 0), 0) scale(1);
  }
  100% {
    opacity: 0;
    background-color: currentColor;
    transform: translate3d(calc(var(--oa-square-local-x, 0px) + 8px), calc(var(--oa-square-local-y, 0px) + 6px), 0) scale(1.7);
  }
}

@keyframes oa-pixel-eye-seed-in {
  0% {
    opacity: 0;
    background-color: currentColor;
    transform: translate3d(calc(var(--oa-square-local-x, 0px) + 8px), calc(var(--oa-square-local-y, 0px) + 6px), 0) scale(1.7);
  }
  100% {
    opacity: 1;
    background-color: currentColor;
    transform: translate3d(var(--oa-square-local-x, 0), var(--oa-square-local-y, 0), 0) scale(1);
  }
}

@keyframes oa-pixel-eye-open {
  0%, 18%, 82%, 100% { opacity: 1; }
  19%, 81% { opacity: 0; }
}

@keyframes oa-pixel-eye-half {
  0%, 17%, 36%, 64%, 83%, 100% { opacity: 0; }
  18%, 35%, 65%, 82% { opacity: 1; }
}

@keyframes oa-pixel-eye-closed {
  0%, 35%, 65%, 100% { opacity: 0; }
  36%, 64% { opacity: 1; }
}

/* The real wordmark stays solid. Only a narrow production-frame signal scans through it. */
html .identity-news .hero-logo .oa-wordmark-signal-host {
  position: relative !important;
  display: inline-block !important;
  isolation: isolate;
}

html .identity-news .hero-logo .oa-wordmark-signal-host > img {
  position: relative;
  z-index: 1;
}

html .identity-news .hero-logo .oa-wordmark-signal-host > .oa-wordmark-signal {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block !important;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(90deg, rgba(36, 71, 255, .16), rgba(215, 255, 0, .1)),
    url("/work/reggaeton-title-sequence-signal.jpg") 50% 46% / cover no-repeat;
  -webkit-mask: url("/work/logo-master.svg?v=2") left center / 100% 100% no-repeat;
  mask: url("/work/logo-master.svg?v=2") left center / 100% 100% no-repeat;
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
  filter: saturate(.92) contrast(1.08);
  will-change: clip-path, opacity;
}

html .identity-news .hero-logo .oa-wordmark-signal-host.is-signal-active > .oa-wordmark-signal {
  animation: oa-logo-signal-scan 1.35s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes oa-logo-signal-scan {
  0% {
    opacity: 0;
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
  }
  8% { opacity: 1; }
  14% {
    -webkit-clip-path: inset(0 78% 0 0);
    clip-path: inset(0 78% 0 0);
  }
  78% {
    opacity: 1;
    -webkit-clip-path: inset(0 0 0 78%);
    clip-path: inset(0 0 0 78%);
  }
  100% {
    opacity: 0;
    -webkit-clip-path: inset(0 0 0 100%);
    clip-path: inset(0 0 0 100%);
  }
}

@media (pointer: coarse), (hover: none) {
  html.oa-pixel-cursor-ready body,
  html.oa-pixel-cursor-ready body * {
    cursor: auto !important;
  }

  html.oa-pixel-cursor-ready :is(input:not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, [contenteditable="true"]) {
    cursor: text !important;
  }

  body,
  a,
  button,
  .row {
    cursor: auto !important;
  }

  .cursor {
    display: none !important;
  }

  .oa-cursor-pixel-trail,
  .oa-pixel-hover-fill {
    display: none !important;
  }

}

@media (prefers-reduced-motion: reduce), (forced-colors: active), print {
  html.oa-pixel-cursor-ready body,
  html.oa-pixel-cursor-ready body * {
    cursor: auto !important;
  }

  html.oa-pixel-cursor-ready :is(input:not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, [contenteditable="true"]) {
    cursor: text !important;
  }

  body,
  a,
  button,
  .row {
    cursor: auto !important;
  }

  .cursor {
    display: none !important;
  }

  .oa-cursor-pixel-trail,
  .oa-pixel-hover-fill {
    display: none !important;
  }

  html .identity-news .hero-logo .oa-wordmark-signal-host > .oa-wordmark-signal {
    display: none !important;
    animation: none !important;
  }
}