.seyam-about-motion {
  --sam-blue:#1264FF;
  --sam-cyan:#35C8FF;
  position:relative;
  isolation:isolate;
  width:100%;
  height:100%;
  min-height:375px;
  padding:22px 20px 16px;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(ellipse at 50% 48%,#174b80 0%,transparent 48%),
    linear-gradient(145deg,#071A3D,#103d6a 68%,#071A3D);
  border-radius:22px;
  font-family:Arial,Helvetica,sans-serif;
}
.seyam-about-motion * {box-sizing:border-box}
.sam-top {
  position:relative;z-index:3;
  display:flex;align-items:center;gap:7px;
  color:#b7d6f7;font-size:8px;
  font-weight:700;letter-spacing:1.1px;
}
.sam-dot {
  width:7px;height:7px;flex-shrink:0;
  background:var(--sam-cyan);border-radius:50%;
  box-shadow:0 0 12px var(--sam-cyan);
  animation:sam-pulse 2s infinite;
}
.sam-live {
  margin-left:auto;color:#82a9d2;
  font-size:7px;letter-spacing:.7px;white-space:nowrap;
}
.sam-scene {
  position:relative;
  width:100%;max-width:400px;
  height:315px;margin:0 auto;
}
.sam-orbit {
  position:absolute;left:50%;top:50%;
  border:1px solid #71caff20;border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.sam-orbit-1 {width:130px;height:130px;animation:sam-breathe 4s infinite}
.sam-orbit-2 {width:225px;height:225px;border-style:dashed;animation:sam-spin 35s linear infinite}
.sam-orbit-3 {width:315px;height:315px;border-color:#1264ff25;animation:sam-breathe 6s infinite reverse}
.sam-connections {
  position:absolute;inset:0;width:100%;height:100%;
  overflow:visible;pointer-events:none;
}
.sam-connections path {
  fill:none;stroke:#65caff36;stroke-width:1;
  stroke-dasharray:3 5;
}
.sam-connections .sam-flow {
  stroke:var(--sam-cyan);stroke-width:1.8;
  stroke-dasharray:2 17;
  filter:drop-shadow(0 0 3px #35c8ff);
  animation:sam-flow 2.8s linear infinite;
}
.sam-flow-2 {animation-delay:-.5s!important}
.sam-flow-3 {animation-delay:-1s!important}
.sam-flow-4 {animation-delay:-1.5s!important}
.sam-flow-5 {animation-delay:-2s!important}
.sam-flow-6 {animation-delay:-2.5s!important}
.sam-center {
  position:absolute;z-index:2;
  left:50%;top:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:124px;height:145px;
  padding:12px 7px;
  border:1px solid #73caff58;border-radius:20px;
  background:linear-gradient(145deg,#164477f5,#071a3df7);
  box-shadow:0 15px 38px #0004,0 0 30px #1264ff23,inset 0 1px #ffffff20;
  transform:translate(-50%,-50%);
  animation:sam-float-center 5s ease-in-out infinite;
}
.sam-center-light {
  position:absolute;inset:-5px;z-index:-1;
  border:1px solid #35c8ff25;border-radius:24px;
  animation:sam-ring 3s ease-in-out infinite;
}
.sam-center-symbol {
  display:grid;grid-template-columns:repeat(3,5px);
  gap:3px;padding:10px;margin-bottom:9px;
  border-radius:11px;
  background:linear-gradient(145deg,#35c8ff,#1264ff);
  box-shadow:0 0 23px #1264ff55;
  transform:rotate(-5deg);
}
.sam-center-symbol span {
  width:5px;height:5px;border-radius:2px;background:white;
  animation:sam-pixels 1.5s ease-in-out infinite alternate;
}
.sam-center-symbol span:nth-child(2n) {animation-delay:-.7s}
.sam-center small {font-size:5px;letter-spacing:1px;color:#a7d7f7;white-space:nowrap}
.sam-center strong {font-size:13px;line-height:1.2;letter-spacing:1px}
.sam-center strong span {color:var(--sam-cyan)}
.sam-card {
  position:absolute;z-index:3;
  display:flex;flex-direction:column;align-items:flex-start;
  gap:3px;width:112px;min-height:62px;
  padding:8px 9px;
  border:1px solid #a0d4ff36;border-radius:11px;
  background:linear-gradient(140deg,#17416bea,#0a2045f2);
  box-shadow:0 8px 23px #0003;
  animation:sam-card-float 4.5s ease-in-out infinite;
  transition:border-color .25s,background .25s;
}
.sam-card:hover {border-color:#35c8ff;background:#15508a}
.sam-icon {color:var(--sam-cyan);font-size:15px;line-height:1}
.sam-card-label {color:#8db9e3;font-size:6px;letter-spacing:1px}
.sam-card strong {font-size:10px;font-weight:600;white-space:nowrap}
.sam-design {left:50%;top:0;transform:translateX(-50%);animation-delay:-.5s}
.sam-social {right:0;top:23px;animation-delay:-1.1s}
.sam-content {right:0;bottom:26px;animation-delay:-2s}
.sam-print {left:50%;bottom:0;transform:translateX(-50%);animation-delay:-2.6s}
.sam-web {left:0;bottom:26px;animation-delay:-1.7s}
.sam-ai {left:0;top:23px;animation-delay:-.9s}
.sam-bottom {
  position:relative;z-index:3;
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:8px;
  padding-top:12px;border-top:1px solid #ffffff18;
  color:#9ab8d8;font-size:6px;letter-spacing:.8px;
}
.sam-bottom i {
  width:3px;height:3px;border-radius:50%;
  background:var(--sam-cyan);box-shadow:0 0 5px var(--sam-cyan);
}
.sam-glow {
  position:absolute;z-index:-1;width:140px;height:140px;
  border-radius:50%;filter:blur(55px);pointer-events:none;
  animation:sam-glow-drift 10s ease-in-out infinite alternate;
}
.sam-glow-a {left:-80px;top:15%;background:#1264ff55}
.sam-glow-b {right:-80px;bottom:5%;background:#35c8ff30;animation-delay:-4s}

@keyframes sam-pulse {50%{opacity:.4;box-shadow:0 0 3px #35c8ff}}
@keyframes sam-spin {to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes sam-breathe {50%{opacity:.4;scale:1.04}}
@keyframes sam-flow {to{stroke-dashoffset:-80}}
@keyframes sam-float-center {0%,100%{translate:0 0}50%{translate:0 -5px}}
@keyframes sam-ring {50%{opacity:1;scale:1.04}}
@keyframes sam-pixels {to{opacity:.4;transform:scale(.7)}}
@keyframes sam-card-float {0%,100%{margin-top:0}50%{margin-top:-5px}}
@keyframes sam-glow-drift {to{translate:30px 20px;scale:1.2}}

@media(max-width:400px) {
  .seyam-about-motion {padding:17px 10px 13px;min-height:350px}
  .sam-top {font-size:7px;letter-spacing:.6px}
  .sam-live {font-size:6px}
  .sam-scene {height:290px}
  .sam-orbit-1 {width:112px;height:112px}
  .sam-orbit-2 {width:195px;height:195px}
  .sam-orbit-3 {width:270px;height:270px}
  .sam-card {width:98px;min-height:57px;padding:7px}
  .sam-center {width:112px;height:133px}
  .sam-card strong {font-size:9px}
  .sam-bottom {gap:5px;font-size:5px}
}
@media(prefers-reduced-motion:reduce) {
  .seyam-about-motion *, .seyam-about-motion *::before {
    animation:none!important;transition:none!important;
  }
}

.about-motion-panel{min-width:0;border-radius:22px;overflow:hidden}
.about-motion-panel .seyam-about-motion{height:auto}
.about-motion-panel .sam-scene{height:350px;margin:12px auto}
.about-motion-panel .sam-top{flex-wrap:wrap}
.about-motion-panel .sam-card{width:100px}
.about-motion-panel .sam-design{top:0}.about-motion-panel .sam-print{bottom:0}
.about-motion-panel .sam-social,.about-motion-panel .sam-ai{top:65px}
.about-motion-panel .sam-content,.about-motion-panel .sam-web{bottom:52px}
.seyam-about-motion.motion-paused *{animation-play-state:paused!important}
@media(max-width:400px){.about-motion-panel .sam-card{width:84px;padding:7px 5px}.about-motion-panel .sam-card strong{font-size:8px}.about-motion-panel .sam-card-label{font-size:5px}.about-motion-panel .sam-center{width:102px}.about-motion-panel .sam-scene{height:350px}.about-motion-panel .sam-social,.about-motion-panel .sam-ai{top:64px}.about-motion-panel .sam-content,.about-motion-panel .sam-web{bottom:52px}.about-motion-panel .sam-center strong{font-size:12px}}
