Modern CSS

.cube-scene {
  perspective: 600px;
  perspective-origin: 50% 50%;
}

.cube {
  transform-style: preserve-3d;
  animation: rotate3d 8s infinite linear;
}

.cube-face {
  position: absolute;
  width: 100px;
  height: 100px;
  backface-visibility: visible;
}

.front  { transform: translateZ(50px); }
.back   { transform: rotateY(180deg) translateZ(50px); }
.right  { transform: rotateY(90deg) translateZ(50px); }
.left   { transform: rotateY(-90deg) translateZ(50px); }
.top    { transform: rotateX(90deg) translateZ(50px); }
.bottom { transform: rotateX(-90deg) translateZ(50px); }

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

.globe {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    #4da6ff,
    #0066cc,
    #003366
  );
  box-shadow:
    inset -30px -30px 60px rgba(0,0,0,0.4),
    0 0 60px rgba(77,166,255,0.3);
  overflow: hidden;
  position: relative;
}

.globe-inner {
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,...");
  background-size: 200% 100%;
  animation: globe-rotate 20s linear infinite;
  border-radius: 50%;
}

.globe-atmosphere {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    transparent 60%,
    rgba(77,166,255,0.2) 100%
  );
}

@keyframes globe-rotate {
  to { background-position: -200% 0; }
}

.star-group {
  display: flex;
  flex-direction: row-reverse;
}

.star-group label:hover,
.star-group label:hover ~ label {
  color: #ffd700;
  transform: scale(1.2);
}

.star-group input:checked ~ label {
  color: #ffd700;
}

.rating-container:has(#star5:checked) {
  background: linear-gradient(135deg, #667eea, #764ba2);
  transform: scale(1.02);
}

.rating-container:has(#star1:checked) .feedback-1,
.rating-container:has(#star2:checked) .feedback-2,
.rating-container:has(#star5:checked) .feedback-5 {
  display: block;
}

.neon-text {
  font-size: 4rem;
  font-weight: 800;
  color: #fff;
  text-shadow:
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px #ff00de,
    0 0 40px #ff00de,
    0 0 80px #ff00de,
    0 0 120px #ff00de;
  animation: flicker 1.5s infinite alternate;
}

@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow:
      0 0 5px #fff,
      0 0 10px #fff,
      0 0 20px #ff00de,
      0 0 40px #ff00de,
      0 0 80px #ff00de;
  }
  20%, 24%, 55% {
    text-shadow: none;
  }
}

select {
  appearance: base-select;
}

select::picker(select) {
  background: #1a1a2e;
  border: 1px solid #333;
  border-radius: 12px;
  padding: 0.5rem;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

select option {
  padding: 0.75rem 1rem;
  border-radius: 8px;
}

select option:hover {
  background: linear-gradient(
    90deg, #667eea, #764ba2
  );
}

.radar {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #001a00;
  border: 2px solid #00ff00;
  position: relative;
  overflow: hidden;
}

.radar-sweep {
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(0,255,0,0.3) 30deg,
    transparent 60deg
  );
  animation: sweep 3s linear infinite;
}

.radar-blip {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #00ff00;
  border-radius: 50%;
  box-shadow: 0 0 10px #00ff00;
  animation: blip 3s ease-out infinite;
}

@keyframes sweep {
  to { transform: rotate(360deg); }
}

@keyframes blip {
  0%, 10% { opacity: 1; }
  100% { opacity: 0; }
}

.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1);
}

.glass-orb {
  position: absolute;
  border-radius: 50%;
  animation: orb-float 6s ease-in-out infinite;
}

.orb-1 { background: #ff006e; }
.orb-2 { background: #3a86ff; }
.orb-3 { background: #8338ec; }

.orbital-loader {
  position: relative;
  width: 150px;
  height: 150px;
}

.orbit {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  animation: orbit 3s linear infinite;
}

.orbit-1 { animation-duration: 3s; }
.orbit-2 { 
  inset: 20px; 
  animation-duration: 2s;
  animation-direction: reverse;
}
.orbit-3 { 
  inset: 40px; 
  animation-duration: 1.5s;
}

.electron {
  width: 12px;
  height: 12px;
  background: #3a86ff;
  border-radius: 50%;
  box-shadow: 0 0 20px #3a86ff;
}

.nucleus {
  position: absolute;
  inset: 60px;
  background: radial-gradient(#fff, #8338ec);
  border-radius: 50%;
  box-shadow: 0 0 30px #8338ec;
}

.squircle {
  corner-shape: squircle;
  border-radius: 30%;
}

.scoop {
  corner-shape: scoop;
  border-radius: 25px;
}

.notch {
  corner-shape: notch notch round round;
  border-radius: 20px;
}

.superellipse {
  corner-shape: superellipse(3);
  border-radius: 30%;
}

.mixed {
  corner-shape: scoop round notch bevel;
  border-radius: 30px;
}

.flower {
  corner-shape: scoop;
  border-radius: 50%;
}

.morphing-shape {
  background: linear-gradient(
    135deg, 
    #667eea, 
    #764ba2
  );
  animation: morph 8s ease-in-out infinite;
}

@keyframes morph {
  0%, 100% {
    clip-path: polygon(
      50% 0%, 100% 38%, 82% 100%,
      18% 100%, 0% 38%
    );
  }
  25% {
    clip-path: polygon(
      50% 0%, 100% 25%, 100% 75%,
      50% 100%, 0% 75%, 0% 25%
    );
  }
  50% {
    clip-path: circle(50% at 50% 50%);
  }
  75% {
    clip-path: polygon(
      20% 0%, 80% 0%, 100% 100%, 0% 100%
    );
  }
}

/* Scroll-driven choreography — Chromium / Safari;
   graceful float fallback where view() unsupported */

.scrollport {
  height: 260px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  mask-image: linear-gradient(
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
}

.panel {
  scroll-snap-align: center;
  scroll-snap-stop: always;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
}

@supports (animation-timeline: view()) {
  .panel {
    animation: reveal linear both;
    animation-timeline: view();
    animation-range: entry -28% contain 74%;
  }
}

@keyframes reveal {
  from {
    opacity: 0.18;
    filter: saturate(0.65);
    transform: scale(0.9) translateY(1.85rem);
  }
  to {
    opacity: 1;
    filter: saturate(1);
    transform: scale(1) translateY(0);
  }
}