/* CMYKER hero rotation — 5-second gallery with a contained glitch transition. */
.hero-visual .hero-photo {
  isolation: isolate;
}

.hero-visual .hero-photo > img {
  position: relative;
  z-index: 1;
  display: block;
  transition: opacity .34s ease, filter .34s ease, transform .34s ease;
  will-change: opacity, filter, transform;
}

.hero-glitch-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(255,255,255,.08) 8px 9px),
    linear-gradient(90deg, rgba(0,190,255,.2), transparent 29%, rgba(255,24,170,.18) 72%, transparent);
  mix-blend-mode: screen;
}

.hero-glitch-layer::before,
.hero-glitch-layer::after {
  content: '';
  position: absolute;
  left: -6%;
  width: 112%;
  height: 9%;
  opacity: 0;
}

.hero-glitch-layer::before {
  top: 28%;
  background: rgba(0,202,255,.58);
}

.hero-glitch-layer::after {
  top: 63%;
  background: rgba(255,28,177,.52);
}

.hero-photo.is-glitching > img {
  animation: cmykerHeroImageGlitch .72s steps(2, end) both;
}

.hero-photo.is-glitching .hero-glitch-layer {
  animation: cmykerHeroScan .72s steps(2, end) both;
}

.hero-photo.is-glitching .hero-glitch-layer::before {
  animation: cmykerHeroSliceLeft .72s steps(2, end) both;
}

.hero-photo.is-glitching .hero-glitch-layer::after {
  animation: cmykerHeroSliceRight .72s steps(2, end) both;
}

.hero-rotation-label {
  position: absolute;
  left: 50%;
  bottom: 7.5%;
  z-index: 6;
  width: min(78%, 390px);
  transform: translateX(-50%);
  padding: 8px 13px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  background: rgba(4,5,7,.68);
  color: rgba(255,255,255,.9);
  box-shadow: 0 8px 26px rgba(0,0,0,.28);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  font: 700 clamp(9px, .78vw, 12px)/1.2 Arial, sans-serif;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

.hero-photo.is-glitching .hero-rotation-label {
  opacity: .2;
  transform: translateX(-50%) translateY(5px);
}

@keyframes cmykerHeroImageGlitch {
  0%, 100% { opacity: 1; filter: none; transform: translate3d(0,0,0) scale(1); }
  18% { opacity: .78; filter: contrast(1.3) saturate(1.7) hue-rotate(12deg); transform: translate3d(-5px,1px,0) scale(1.018); }
  36% { opacity: .28; filter: contrast(1.6) saturate(2.1); transform: translate3d(6px,-2px,0) scale(1.025); }
  58% { opacity: .62; filter: contrast(1.25) saturate(1.55) hue-rotate(-12deg); transform: translate3d(-3px,2px,0) scale(1.014); }
  78% { opacity: .9; filter: contrast(1.12) saturate(1.2); transform: translate3d(2px,0,0) scale(1.006); }
}

@keyframes cmykerHeroScan {
  0%, 100% { opacity: 0; transform: translateX(0); }
  18% { opacity: .8; transform: translateX(-4px); }
  42% { opacity: .36; transform: translateX(6px); }
  66% { opacity: .7; transform: translateX(-2px); }
}

@keyframes cmykerHeroSliceLeft {
  0%, 100% { opacity: 0; transform: translateX(0); }
  22%, 54% { opacity: .45; transform: translateX(-8%); }
}

@keyframes cmykerHeroSliceRight {
  0%, 100% { opacity: 0; transform: translateX(0); }
  36%, 68% { opacity: .42; transform: translateX(9%); }
}

@media (max-width: 760px) {
  .hero-rotation-label {
    bottom: 6%;
    width: 82%;
    padding: 7px 10px;
    font-size: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-photo.is-glitching > img,
  .hero-photo.is-glitching .hero-glitch-layer,
  .hero-photo.is-glitching .hero-glitch-layer::before,
  .hero-photo.is-glitching .hero-glitch-layer::after {
    animation: none;
  }

  .hero-visual .hero-photo > img {
    transition: opacity .25s ease;
  }
}

/* Wide desktop composition approved from the 2026-09-01 Photoshop reference. */
@media (min-width: 1500px) {
  .hero-section {
    padding-top: 58px;
    padding-bottom: 54px;
  }

  .hero-layout {
    grid-template-columns: 1.02fr .98fr;
    gap: 10px;
  }

  .hero-visual {
    min-height: 840px;
  }

  .hero-photo {
    width: min(142%, 810px);
  }

  .hero-orbit {
    width: min(148%, 846px);
  }

  .hero-visual .pixel-ticker {
    left: 50%;
    right: auto;
    width: min(126%, 760px);
    transform: translateX(-50%);
  }
}

/* Mobile: keep every rotating slide inside one centered circular portal. */
@media (max-width: 760px) {
  .hero-visual {
    width: 100%;
    justify-items: center;
  }

  .hero-visual .hero-photo {
    position: relative !important;
    place-self: center !important;
    width: min(calc(100vw - 32px), 390px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    margin-inline: auto !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    clip-path: circle(50% at 50% 50%);
    contain: layout paint;
  }

  .hero-visual .hero-photo > img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
  }

  .hero-visual .hero-orbit {
    inset: auto !important;
    place-self: center !important;
    width: min(calc(100vw - 14px), 408px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
  }

  .hero-glitch-layer {
    border-radius: 50% !important;
    clip-path: circle(50% at 50% 50%);
  }
}

/* Center the mobile portal against the viewport, not the inset content column. */
@media (max-width: 760px) {
  .hero-visual {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
  }
}

/* Mobile: one centered circular stage, then two independent ticker rows. */
@media (max-width: 760px) {
  .hero-visual {
    --hero-photo-size: min(calc(100vw - 32px), 390px);
    --hero-orbit-size: min(calc(100vw - 14px), 408px);
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    justify-items: center;
    align-items: start;
    gap: 12px !important;
    overflow: visible;
  }

  .hero-visual .hero-photo {
    position: relative !important;
    grid-column: 1;
    grid-row: 1;
    place-self: start center !important;
    width: var(--hero-photo-size) !important;
    height: var(--hero-photo-size) !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 0 44px !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    clip-path: circle(50% at 50% 50%);
    contain: layout paint;
    animation: none !important;
    transform: none !important;
  }

  .hero-visual .hero-photo > img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
  }

  .hero-visual .hero-orbit {
    position: absolute !important;
    inset: auto !important;
    top: -9px !important;
    left: max(7px, calc(50% - 204px)) !important;
    right: auto !important;
    bottom: auto !important;
    place-self: auto !important;
    width: var(--hero-orbit-size) !important;
    height: var(--hero-orbit-size) !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    transform-origin: 50% 50%;
  }

  .hero-visual .pixel-ticker {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    grid-column: 1;
    width: min(calc(100vw - 24px), 408px) !important;
    margin: 0 !important;
    justify-self: center;
    transform: none !important;
  }

  .hero-visual .pixel-ticker-top { grid-row: 2; }
  .hero-visual .pixel-ticker-bottom { grid-row: 3; }

  .hero-glitch-layer {
    border-radius: 50% !important;
    clip-path: circle(50% at 50% 50%);
  }
}