:root {
  --rayzo-accent: var(--spotlight, #e8a33d);
  --rayzo-ink: var(--wall, #16151a);
  --rayzo-glow: rgba(232, 163, 61, .42);
  --rayzo-cyan: #77d5d2;
  --rayzo-ease: cubic-bezier(.16, .84, .44, 1);
  --rayzo-spring: cubic-bezier(.2, .8, .2, 1.12);
}

html { scroll-behavior: smooth; }
body { position: relative; isolation: isolate; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .48;
  background:
    radial-gradient(42rem 28rem at 8% -8%, rgba(232,163,61,.13), transparent 72%),
    radial-gradient(36rem 24rem at 100% 38%, rgba(119,213,210,.07), transparent 74%),
    linear-gradient(115deg, transparent 0 48%, rgba(255,255,255,.018) 48.1% 48.22%, transparent 48.32% 100%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

/* Shared 3D stage */
.rayzo-3d-stage,
.rayzo-detail-stage {
  position: absolute;
  pointer-events: none;
  transform-style: preserve-3d;
  perspective: 1200px;
  z-index: 0;
  opacity: .92;
}
.rayzo-3d-stage { inset: 5% -3% 3% 48%; }
.rayzo-detail-stage { inset: -10% -12% -12% 40%; opacity: .68; }
.rayzo-3d-stage::before,
.rayzo-detail-stage::before {
  content: "";
  position: absolute;
  inset: 13% 5% 5% 16%;
  border: 1px solid rgba(232,163,61,.14);
  border-radius: 50%;
  transform: rotateX(68deg) rotateZ(-16deg) translateZ(-80px);
  box-shadow: 0 0 70px rgba(232,163,61,.08), inset 0 0 70px rgba(232,163,61,.05);
}
.rayzo-3d-stage::after,
.rayzo-detail-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 60% 48%, rgba(232,163,61,.18), transparent 36%), radial-gradient(ellipse at 74% 62%, rgba(119,213,210,.12), transparent 28%);
  filter: blur(18px);
}
.rayzo-orb {
  position: absolute;
  width: clamp(68px, 10vw, 148px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 24%, #fff3c9 0 4%, var(--rayzo-accent) 13%, #bd5d2c 38%, #20171c 72%, #09090b 100%);
  box-shadow: inset -18px -20px 36px rgba(0,0,0,.46), inset 12px 10px 18px rgba(255,255,255,.2), 0 28px 70px rgba(0,0,0,.42), 0 0 38px var(--rayzo-glow);
  transform: translateZ(90px);
  animation: rayzo-float 7.5s var(--rayzo-ease) infinite alternate;
}
.rayzo-orb::after {
  content: "";
  position: absolute;
  inset: 14%;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 50%;
  transform: rotate(-24deg) scaleY(.28);
}
.rayzo-orb.orb-a { top: 9%; right: 12%; }
.rayzo-orb.orb-b { width: clamp(34px, 5vw, 78px); left: 12%; bottom: 16%; opacity: .78; animation-delay: -2.7s; animation-duration: 6.2s; transform: translateZ(160px); }
.rayzo-ring {
  position: absolute;
  width: clamp(180px, 26vw, 390px);
  aspect-ratio: 1;
  right: -2%;
  top: 18%;
  border-radius: 50%;
  border: 1px solid rgba(232,163,61,.38);
  box-shadow: 0 0 0 10px rgba(232,163,61,.035), 0 0 0 22px rgba(232,163,61,.025), 0 0 50px rgba(232,163,61,.16);
  transform: rotateX(68deg) rotateZ(-17deg) translateZ(32px);
  animation: rayzo-ring-spin 18s linear infinite;
}
.rayzo-ring::before,
.rayzo-ring::after {
  content: "";
  position: absolute;
  inset: 14%;
  border: 1px dashed rgba(119,213,210,.24);
  border-radius: inherit;
}
.rayzo-ring::after { inset: 31%; border-style: solid; border-color: rgba(255,255,255,.2); }
.rayzo-cube {
  position: absolute;
  width: clamp(52px, 7vw, 96px);
  aspect-ratio: 1;
  right: 34%;
  bottom: 9%;
  transform-style: preserve-3d;
  transform: rotateX(-24deg) rotateY(32deg) rotateZ(11deg) translateZ(130px);
  animation: rayzo-cube-drift 9s ease-in-out infinite alternate;
}
.rayzo-cube i { position: absolute; inset: 0; border: 1px solid rgba(232,163,61,.48); background: linear-gradient(135deg, rgba(232,163,61,.22), rgba(119,213,210,.04)); box-shadow: inset 0 0 24px rgba(232,163,61,.12); }
.rayzo-cube i:nth-child(1) { transform: translateZ(48px); }
.rayzo-cube i:nth-child(2) { transform: rotateY(90deg) translateZ(48px); }
.rayzo-cube i:nth-child(3) { transform: rotateX(90deg) translateZ(48px); }
.rayzo-grid-plane {
  position: absolute;
  left: 4%;
  right: -12%;
  bottom: 3%;
  height: 34%;
  opacity: .38;
  transform: rotateX(68deg) rotateZ(-10deg) translateZ(-40px);
  background-image: linear-gradient(rgba(232,163,61,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(232,163,61,.18) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to top, rgba(0,0,0,.95), transparent);
}

/* Landing-page composition */
.hero { isolation: isolate; overflow: clip; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background: linear-gradient(90deg, transparent 0 20%, rgba(255,255,255,.05) 20.1% 20.2%, transparent 20.3% 100%);
  mask-image: linear-gradient(to right, #000, transparent 72%);
}
.hero-copy, .hero-wall { position: relative; z-index: 2; }
.hero-copy { transform: translate3d(var(--rayzo-copy-x, 0px), var(--rayzo-copy-y, 0px), 0); transition: transform 700ms var(--rayzo-ease); }
.hero-wall { transform: translate3d(var(--rayzo-wall-x, 0px), var(--rayzo-wall-y, 0px), 0); transition: transform 800ms var(--rayzo-ease); }
.hero .spot-glow { filter: blur(4px); transform: translate3d(calc(var(--rayzo-wall-x, 0px) * -.55), calc(var(--rayzo-wall-y, 0px) * -.55), 0); transition: transform 800ms var(--rayzo-ease); }
.hero .frame { box-shadow: 0 22px 70px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.05); }

/* Shared hover depth and scroll reveals */
.tile, .card, .art, .legal-card, .contact-box, .rayzo-plus-card {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 420ms var(--rayzo-ease), border-color 240ms ease, box-shadow 420ms var(--rayzo-ease), opacity 650ms var(--rayzo-ease);
}
.tile:hover, .card:hover, .art:hover, .legal-card:hover, .contact-box:hover, .rayzo-plus-card:hover {
  border-color: rgba(232,163,61,.42);
  box-shadow: 0 24px 70px rgba(0,0,0,.28), 0 0 32px rgba(232,163,61,.07);
}
.rayzo-reveal { opacity: 0; transform: translate3d(0, 28px, 0) scale(.985); }
.rayzo-reveal.rayzo-is-visible { opacity: 1; transform: translate3d(0,0,0) scale(1); }
.rayzo-reveal:nth-child(2) { transition-delay: 70ms; }
.rayzo-reveal:nth-child(3) { transition-delay: 140ms; }
.rayzo-reveal:nth-child(4) { transition-delay: 210ms; }

/* Detail-page hero polish */
.wrap, .page-shell { position: relative; z-index: 1; }
.hero .art { position: relative; z-index: 2; overflow: hidden; }
.hero .art::before {
  content: "";
  position: absolute;
  inset: 10px;
  pointer-events: none;
  border: 1px solid rgba(232,163,61,.22);
  border-radius: 17px;
  transform: translateZ(22px);
}
.hero .art img { position: relative; z-index: 1; transition: transform 850ms var(--rayzo-ease), filter 850ms var(--rayzo-ease); }
.hero .art:hover img { transform: translate3d(0,-8px,30px) scale(1.025); filter: drop-shadow(0 38px 56px #000) saturate(1.08); }

@keyframes rayzo-float { from { transform: translate3d(-4px, 6px, 90px) rotate(-3deg); } to { transform: translate3d(14px, -18px, 138px) rotate(7deg); } }
@keyframes rayzo-ring-spin { from { transform: rotateX(68deg) rotateZ(-17deg) translateZ(32px) rotate(0deg); } to { transform: rotateX(68deg) rotateZ(-17deg) translateZ(32px) rotate(360deg); } }
@keyframes rayzo-cube-drift { from { transform: rotateX(-24deg) rotateY(32deg) rotateZ(11deg) translate3d(-10px, 12px, 130px); } to { transform: rotateX(28deg) rotateY(138deg) rotateZ(-8deg) translate3d(20px, -18px, 170px); } }

@media (max-width: 760px) {
  .rayzo-3d-stage { inset: 16% -14% 9% 30%; opacity: .55; transform: scale(.9); }
  .rayzo-detail-stage { inset: 2% -18% -12% 30%; opacity: .42; }
  .hero-copy { transform: none; }
  .hero-wall { transform: none; }
  .rayzo-grid-plane { display: none; }
  .rayzo-ring { right: 6%; top: 16%; }
  .rayzo-cube { right: 30%; bottom: 2%; }
}
@media (pointer: coarse) {
  .tile:hover, .card:hover, .art:hover, .legal-card:hover, .contact-box:hover, .rayzo-plus-card:hover { transform: none !important; }
  .hero .art:hover img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body::before, body::after { opacity: 0; }
  .rayzo-3d-stage, .rayzo-detail-stage, .rayzo-3d-stage *, .rayzo-detail-stage * { animation: none !important; }
  .hero-copy, .hero-wall, .hero .spot-glow, .tile, .card, .art, .legal-card, .contact-box, .rayzo-plus-card, .hero .art img { transition: none !important; transform: none !important; }
  .rayzo-reveal { opacity: 1 !important; transform: none !important; }
}