/* USPEH88 | HERO
   One selector per block. Section content is in index.html.
   Responsive rules follow the original cascade order. */

.hero {
  min-height: 100svh;
  position: relative;
  padding: 150px var(--pad) 65px;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(420px,.92fr);
  align-items: center;
  overflow: hidden;
}

.hero:before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 75% 52%,rgba(46,141,137,.12),transparent 30%),radial-gradient(ellipse at 89% 84%,rgba(113,45,61,.13),transparent 31%);
  pointer-events: none;
}

.hero-copy {
  position: relative;
  z-index: 2;
}

.eyebrow {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #a8adab;
  display: flex;
  align-items: center;
  gap: 12px;
}

.eyebrow:before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--teal);
}

h1 {
  font-size: clamp(62px,8.2vw,126px);
  line-height: .9;
  letter-spacing: -.065em;
  font-weight: 400;
  margin: 27px 0 35px;
  max-width: 850px;
}

h1 span {
  display: block;
  color: #858b89;
}

.lead {
  color: #aeb2b0;
  font-size: clamp(16px,1.35vw,20px);
  line-height: 1.65;
  max-width: 535px;
}

.hero-actions {
  display: flex;
  gap: 28px;
  align-items: center;
  margin-top: 44px;
}

.button {
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--ink);
  color: #0a0c0d;
  font-size: 13px;
  font-weight: 600;
}

.text-link {
  font-size: 13px;
  border-bottom: 1px solid #777;
  padding-bottom: 5px;
}

.scroll-note {
  position: absolute;
  bottom: 35px;
  left: var(--pad);
  font-size: 9px;
  letter-spacing: .2em;
  color: #777;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

.scroll-note:after {
  content: "";
  display: inline-block;
  height: 48px;
  width: 1px;
  background: #555;
  margin-top: 13px;
}

.cube-stage {
  height: min(66vw,690px);
  min-height: 490px;
  display: grid;
  place-items: center;
  perspective: 1100px;
  position: relative;
  isolation: isolate;
}

.energy-system {
  position: absolute;
  width: min(47vw,620px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  filter: drop-shadow(0 0 24px rgba(46,141,137,.18));
}

.energy-system:before {
  content: "";
  position: absolute;
  inset: 25%;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(46,141,137,.2),transparent 67%);
  filter: blur(12px);
}

.orbit {
  position: absolute;
  width: 100%;
  height: 42%;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.09);
  transform-style: preserve-3d;
}

.orbit:before {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.orbit:after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.orbit:before {
  inset: -4px;
  border-top: 2px solid var(--ring);
  border-right: 1px solid transparent;
  border-bottom: 2px solid var(--ring);
  filter: drop-shadow(0 0 9px var(--ring));
}

.orbit:after {
  width: 7px;
  height: 7px;
  background: #fff;
  top: 11%;
  left: 14%;
  box-shadow: 0 0 14px 5px var(--ring);
}

.orbit-a {
  --ring: #3fb7b0;
  transform: rotate(23deg);
  animation: orbitA 7s linear infinite;
}

.orbit-b {
  --ring: #8b3e54;
  transform: rotate(118deg) scale(.91);
  animation: orbitB 9s linear infinite reverse;
}

.orbit-c {
  --ring: #d2844e;
  transform: rotate(-43deg) scale(.79);
  animation: orbitC 11s linear infinite;
}

.orbit-d {
  --ring: #67466e;
  transform: rotateX(67deg) rotateZ(7deg) scale(1.08);
  animation: orbitD 13s linear infinite;
}

.particles {
  position: absolute;
  inset: 3%;
  border-radius: 50%;
  background-image: radial-gradient(circle at 12% 38%,#fff 0 1px,transparent 2px),radial-gradient(circle at 81% 22%,#46c4bd 0 1.5px,transparent 2.5px),radial-gradient(circle at 90% 70%,#b95a72 0 1px,transparent 2px),radial-gradient(circle at 26% 82%,#dc985c 0 1.5px,transparent 2.5px),radial-gradient(circle at 58% 4%,#fff 0 1px,transparent 2px);
  animation: spark 8s ease-in-out infinite;
}

.cube-wrap {
  width: clamp(185px,21vw,305px);
  aspect-ratio: 1;
  transform-style: preserve-3d;
  animation: turn 24s linear infinite;
  will-change: transform;
  z-index: 2;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
}

.face {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,.44);
  background: linear-gradient(145deg,rgba(40,67,72,.7),rgba(8,10,11,.62) 53%,rgba(113,45,61,.4));
  backdrop-filter: blur(7px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(20px,2.1vw,31px);
  box-shadow: inset 0 0 65px rgba(255,255,255,.04),0 0 30px rgba(46,141,137,.08);
}

.face small {
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.54);
}

.face strong {
  font-size: clamp(19px,2vw,29px);
  line-height: 1.05;
  letter-spacing: -.045em;
  font-weight: 400;
  max-width: 85%;
}

.face b {
  font-size: 11px;
  font-weight: 400;
  color: rgba(255,255,255,.38);
}

.front {
  transform: translateZ(clamp(92.5px,10.5vw,152.5px));
}

.back {
  transform: rotateY(180deg) translateZ(clamp(92.5px,10.5vw,152.5px));
}

.right {
  transform: rotateY(90deg) translateZ(clamp(92.5px,10.5vw,152.5px));
}

.left {
  transform: rotateY(-90deg) translateZ(clamp(92.5px,10.5vw,152.5px));
}

.top {
  transform: rotateX(90deg) translateZ(clamp(92.5px,10.5vw,152.5px));
}

.bottom {
  transform: rotateX(-90deg) translateZ(clamp(92.5px,10.5vw,152.5px));
}

@keyframes turn {
to {
  transform: rotateX(360deg) rotateY(720deg);
}
}

@keyframes orbitA {
to {
  transform: rotate(383deg);
}
}

@keyframes orbitB {
to {
  transform: rotate(478deg) scale(.91);
}
}

@keyframes orbitC {
to {
  transform: rotate(317deg) scale(.79);
}
}

@keyframes orbitD {
to {
  transform: rotateX(67deg) rotateZ(367deg) scale(1.08);
}
}

@keyframes spark {
50% {
  opacity: .42;
  transform: scale(1.04) rotate(8deg);
}
}

.motion-cluster {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  animation: clusterFloat 7s cubic-bezier(.45,0,.2,1) infinite;
  will-change: transform;
}

.motion-cluster .energy-system {
  width: min(51vw,690px);
}

.motion-cluster .cube-wrap {
  width: clamp(240px,23.5vw,340px);
}

.motion-cluster .front {
  transform: translateZ(clamp(120px,11.75vw,170px));
}

.motion-cluster .back {
  transform: rotateY(180deg) translateZ(clamp(120px,11.75vw,170px));
}

.motion-cluster .right {
  transform: rotateY(90deg) translateZ(clamp(120px,11.75vw,170px));
}

.motion-cluster .left {
  transform: rotateY(-90deg) translateZ(clamp(120px,11.75vw,170px));
}

.motion-cluster .top {
  transform: rotateX(90deg) translateZ(clamp(120px,11.75vw,170px));
}

.motion-cluster .bottom {
  transform: rotateX(-90deg) translateZ(clamp(120px,11.75vw,170px));
}

@keyframes clusterFloat {
0%,100% {
  transform: translate3d(-8px,12px,0) rotate(-1deg);
}
35% {
  transform: translate3d(16px,-19px,0) rotate(1.2deg);
}
68% {
  transform: translate3d(-13px,-5px,0) rotate(-.6deg);
}
}

.cube-stage:before {
  content: "";
  position: absolute;
  inset: -8% -6%;
  z-index: 0;
  background-image: linear-gradient(90deg,#07090a 0%,rgba(7,9,10,.45) 17%,rgba(7,9,10,.06) 47%,rgba(7,9,10,.28) 82%,#07090a 100%),linear-gradient(0deg,#07090a 0%,transparent 19%,transparent 76%,#07090a 100%),url('../assets/uspeh88-cosmos.jpeg');
  background-position: center;
  background-size: cover;
  opacity: .76;
  filter: saturate(.72) contrast(1.08);
  -webkit-mask-image: radial-gradient(ellipse 69% 64% at 54% 51%,#000 46%,transparent 100%);
  mask-image: radial-gradient(ellipse 69% 64% at 54% 51%,#000 46%,transparent 100%);
  pointer-events: none;
}

.cosmic-dust {
  position: absolute;
  inset: 4%;
  z-index: 1;
  width: 92%;
  height: 92%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .82;
}

.motion-cluster .cube-wrap {
  z-index: 2;
  filter: drop-shadow(0 34px 44px rgba(0,0,0,.48));
}

.motion-cluster .face {
  background: linear-gradient(145deg,rgba(34,52,58,.76),rgba(8,10,11,.58) 50%,rgba(82,40,57,.47));
  box-shadow: inset 0 0 65px rgba(255,255,255,.045),0 0 32px rgba(96,105,119,.11);
}

@media(max-width:800px) {
  .hero {
    padding-top: 115px;
    grid-template-columns: 1fr;
    align-content: start;
  }
}

@media(max-width:800px) {
  .hero h1 {
    font-size: clamp(61px,18vw,92px);
    margin-top: 20px;
  }
}

@media(max-width:800px) {
  .hero-copy {
    z-index: 3;
  }
}

@media(max-width:800px) {
  .cube-stage {
    height: 460px;
    min-height: 0;
    margin-top: -18px;
  }
}

@media(max-width:800px) {
  .energy-system {
    width: 390px;
    max-width: 108vw;
  }
}

@media(max-width:800px) {
  .cube-wrap {
    width: 185px;
  }
}

@media(max-width:800px) {
  .face {
    padding: 19px;
  }
}

@media(max-width:800px) {
  .face strong {
    font-size: 20px;
  }
}

@media(max-width:800px) {
  .scroll-note {
    display: none;
  }
}

@media(max-width:800px) {
  .front {
    transform: translateZ(92.5px);
  }
}

@media(max-width:800px) {
  .back {
    transform: rotateY(180deg) translateZ(92.5px);
  }
}

@media(max-width:800px) {
  .right {
    transform: rotateY(90deg) translateZ(92.5px);
  }
}

@media(max-width:800px) {
  .left {
    transform: rotateY(-90deg) translateZ(92.5px);
  }
}

@media(max-width:800px) {
  .top {
    transform: rotateX(90deg) translateZ(92.5px);
  }
}

@media(max-width:800px) {
  .bottom {
    transform: rotateX(-90deg) translateZ(92.5px);
  }
}

@media(max-width:800px) {
  .motion-cluster .energy-system {
    width: 440px;
    max-width: 118vw;
  }
}

@media(max-width:800px) {
  .motion-cluster .cube-wrap {
    width: 225px;
  }
}

@media(max-width:800px) {
  .motion-cluster .front {
    transform: translateZ(112.5px);
  }
}

@media(max-width:800px) {
  .motion-cluster .back {
    transform: rotateY(180deg) translateZ(112.5px);
  }
}

@media(max-width:800px) {
  .motion-cluster .right {
    transform: rotateY(90deg) translateZ(112.5px);
  }
}

@media(max-width:800px) {
  .motion-cluster .left {
    transform: rotateY(-90deg) translateZ(112.5px);
  }
}

@media(max-width:800px) {
  .motion-cluster .top {
    transform: rotateX(90deg) translateZ(112.5px);
  }
}

@media(max-width:800px) {
  .motion-cluster .bottom {
    transform: rotateX(-90deg) translateZ(112.5px);
  }
}

@media(max-width:800px) {
  .cube-stage:before {
    inset: -8vw -14vw;
    background-position: center 46%;
    opacity: .82;
    -webkit-mask-image: radial-gradient(ellipse 74% 68% at 50% 50%,#000 48%,transparent 100%);
    mask-image: radial-gradient(ellipse 74% 68% at 50% 50%,#000 48%,transparent 100%);
  }
}

@media(max-width:800px) {
  .cosmic-dust {
    inset: 0;
    width: 100%;
    height: 100%;
  }
}

@media(prefers-reduced-motion:reduce) {
  .cube-wrap {
    animation: none;
  }
}

@media(prefers-reduced-motion:reduce) {
  .orbit {
    animation: none;
  }
}

@media(prefers-reduced-motion:reduce) {
  .particles {
    animation: none;
  }
}

@media(prefers-reduced-motion:reduce) {
  .motion-cluster {
    animation: none;
  }
}

@media(prefers-reduced-motion:reduce) {
  .cube-wrap {
    transform: rotateX(-16deg) rotateY(32deg);
  }
}

.cube-wrap {
  animation-name: turnStable;
  animation-duration: 31s;
  animation-timing-function: cubic-bezier(.72,0,.28,1);
}

.face {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-color: rgba(255,255,255,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15),inset 0 0 65px rgba(255,255,255,.04),0 0 30px rgba(46,141,137,.08);
}

@keyframes turnStable {
0%,12% {
  transform: rotateX(-18deg) rotateY(32deg);
}
17%,27% {
  transform: rotateX(-18deg) rotateY(-58deg);
}
32%,42% {
  transform: rotateX(-18deg) rotateY(-148deg);
}
47%,57% {
  transform: rotateX(-18deg) rotateY(-238deg);
}
62%,72% {
  transform: rotateX(-72deg) rotateY(-328deg);
}
77%,87% {
  transform: rotateX(62deg) rotateY(-328deg);
}
92%,100% {
  transform: rotateX(-18deg) rotateY(-328deg);
}
}

@media(prefers-reduced-motion:reduce) {
  .cube-wrap {
    animation: none;
    transform: rotateX(-18deg) rotateY(32deg);
  }
}

.motion-cluster {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.motion-cluster .cube-wrap {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.motion-cluster .cube {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.motion-cluster .cube-wrap {
  filter: none;
}

.motion-cluster .face {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: linear-gradient(145deg,rgba(38,57,63,.92),rgba(8,10,11,.88) 50%,rgba(83,39,57,.82));
}

.cube-wrap {
  animation-duration: 22s;
}

@media(prefers-reduced-motion:reduce) {
  .cube-wrap {
    animation: none;
  }
}

.cube-wrap {
  animation-name: turnSequence;
}

.face.bottom small {
  font-size: 0;
}

.face.bottom small:after {
  content: "06 / USPEH88";
  font-size: 11px;
}

@keyframes turnSequence {
0%,12% {
  transform: rotateX(-18deg) rotateY(32deg);
}
16%,28% {
  transform: rotateX(-18deg) rotateY(-58deg);
}
32%,44% {
  transform: rotateX(-72deg) rotateY(-20deg);
}
48%,60% {
  transform: rotateX(-18deg) rotateY(-148deg);
}
64%,76% {
  transform: rotateX(-18deg) rotateY(-238deg);
}
80%,92% {
  transform: rotateX(62deg) rotateY(-300deg);
}
100% {
  transform: rotateX(-18deg) rotateY(-328deg);
}
}

@media(prefers-reduced-motion:reduce) {
  .cube-wrap {
    animation: none;
  }
}

.eyebrow {
  font-size: 12px;
  letter-spacing: .2em;
  color: #9bacaf;
}

.hero {
  min-height: 920px;
  min-height: max(850px,100svh);
  padding-top: 160px;
  padding-bottom: 140px;
  grid-template-columns: 1.05fr 1fr;
  background: #06090b;
}

.hero:before {
  background: linear-gradient(110deg,#06090b 8%,transparent 65%),url('../assets/uspeh88-cosmos.jpeg') right center/65% auto no-repeat;
  opacity: .35;
}

.hero h1 {
  font-size: clamp(80px,9.5vw,156px);
  line-height: .94;
  letter-spacing: -.075em;
  margin: 32px 0;
}

.hero h1 span {
  display: inline;
  color: #b8ded9;
  background: linear-gradient(110deg,#d1eeeb,#78bdbb 65%,#7393ab);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lead {
  max-width: 450px;
  font-size: 18px;
  line-height: 1.75;
}

.hero-actions {
  gap: 24px;
  flex-wrap: wrap;
}

.button {
  padding: 18px 26px;
  font-size: 14px;
  background: #e9eeec;
  transition: transform .25s,background .25s;
}

.button:hover {
  transform: translateY(-3px);
  background: white;
}

.text-link {
  font-size: 14px;
}

.scroll-note {
  writing-mode: initial;
  font-size: 12px;
  bottom: 45px;
}

.scroll-note:after {
  height: 1px;
  width: 72px;
  margin: 0 0 4px 20px;
}

.cube-stage {
  --edge: clamp(240px,23vw,345px);
  height: 660px;
  min-height: 0;
  perspective: 1350px;
  isolation: auto;
  overflow: visible;
}

.cube-stage:before {
  opacity: .35;
}

.motion-cluster {
  animation: none;
  transform-style: preserve-3d;
  will-change: auto;
}

.motion-cluster .cube-wrap {
  width: var(--edge);
  height: var(--edge);
  animation: none;
  transform: rotateX(-14deg) rotateY(-24deg);
  transform-style: preserve-3d;
  filter: none;
  z-index: auto;
  cursor: grab;
  touch-action: pan-y;
}

.motion-cluster .cube {
  transform-style: preserve-3d;
}

.motion-cluster .face {
  padding: 30px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: linear-gradient(140deg,#314b59,#101b22 56%,#442b3a);
  border: 1px solid #a6c1c970;
  box-shadow: inset 0 0 50px #d7e9e510,inset 0 1px 0 #e4f7f860;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.motion-cluster .face:after {
  content: '';
  position: absolute;
  inset: 9px;
  border: 1px solid #b4d3d315;
  pointer-events: none;
}

.motion-cluster .face small {
  font-size: 12px;
  letter-spacing: .14em;
  color: #a9c9cf;
}

.motion-cluster .face strong {
  font-size: clamp(25px,2.65vw,40px);
  line-height: 1.1;
  color: #e4efed;
  max-width: 100%;
}

.motion-cluster .face b {
  font-size: 12px;
  letter-spacing: .13em;
  color: #b9cbcc;
}

.face.bottom small:after {
  display: none;
}

.motion-cluster .front {
  transform: translateZ(calc(var(--edge)/2));
}

.motion-cluster .right {
  transform: rotateY(90deg) translateZ(calc(var(--edge)/2));
  background: linear-gradient(130deg,#21444b,#0a171e 65%,#354253);
}

.motion-cluster .top {
  transform: rotateX(90deg) translateZ(calc(var(--edge)/2));
  background: linear-gradient(135deg,#46656c,#233139 60%,#50333f);
}

.motion-cluster .back {
  transform: rotateY(180deg) translateZ(calc(var(--edge)/2));
}

.motion-cluster .left {
  transform: rotateY(-90deg) translateZ(calc(var(--edge)/2));
}

.motion-cluster .bottom {
  transform: rotateX(-90deg) translateZ(calc(var(--edge)/2));
}

.cube-controls {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  z-index: 5;
}

.cube-controls button {
  border: 1px solid #ffffff26;
  background: #0e191fc9;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  color: #c0d7d8;
  font-size: 16px;
  cursor: pointer;
}

.cube-controls span {
  min-width: 110px;
  text-align: center;
  color: #aac0c4;
  font-size: 12px;
  letter-spacing: .1em;
}

.cube-controls button:hover {
  background: #254047;
}

.cosmic-dust {
  opacity: .5;
}

@media(min-width:1600px) {
  .hero {
    padding-left: max(var(--pad),calc((100vw - 1500px)/2));
    padding-right: max(var(--pad),calc((100vw - 1500px)/2));
  }
}

@media(max-width:800px) {
  .hero {
    min-height: auto;
    grid-template-columns: 1fr;
    padding-top: 120px;
    padding-bottom: 60px;
  }
}

@media(max-width:800px) {
  .hero h1 {
    font-size: clamp(70px,17vw,110px);
    max-width: 600px;
  }
}

@media(max-width:800px) {
  .hero:before {
    background-size: auto 75%;
    background-position: center bottom;
  }
}

@media(max-width:800px) {
  .lead {
    font-size: 17px;
    max-width: 430px;
  }
}

@media(max-width:800px) {
  .hero-actions {
    gap: 20px;
    margin-top: 30px;
  }
}

@media(max-width:800px) {
  .button {
    font-size: 13px;
    padding: 16px 21px;
  }
}

@media(max-width:800px) {
  .text-link {
    font-size: 13px;
  }
}

@media(max-width:800px) {
  .cube-stage {
    --edge: min(57vw,270px);
    height: 480px;
    margin: 25px -10px 0;
    perspective: 1000px;
  }
}

@media(max-width:800px) {
  .motion-cluster .face {
    padding: 22px;
  }
}

@media(max-width:800px) {
  .motion-cluster .face strong {
    font-size: clamp(22px,6.1vw,30px);
  }
}

@media(max-width:800px) {
  .motion-cluster .face small {
    font-size: 12px;
  }
}

@media(max-width:800px) {
  .cube-controls {
    bottom: 0;
  }
}

.cube-controls {
  display: none!important;
}

.motion-cluster .cube-wrap {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}