/* UEBEY Sites — Motion Layer v1
   Progressive enhancement: keeps layout usable without JavaScript and
   fully disables non-essential motion when the user requests reduced motion. */

:root{
  --motion-accent:#4f46ff;
  --motion-ink:#0a0a0d;
  --motion-line:rgba(79,70,255,.16);
}

/* HERO: make the existing portal feel alive without turning it into a neon effect. */
.portal-scene{perspective:900px;transform-style:preserve-3d}
.portal-shell,.portal-door,.portal-line,.browser-card{will-change:transform,opacity}
.shell-1{animation:uebeyPortalBreath 7.8s ease-in-out infinite}
.shell-2{animation:uebeyPortalBreath 6.2s ease-in-out -1.4s infinite reverse}
.shell-3{animation:uebeyPortalBreath 4.8s ease-in-out -.8s infinite}
.portal-door{animation:uebeyDoorPulse 4.4s ease-in-out infinite}
.portal-line{animation:uebeyLineSweep 3.8s ease-in-out infinite}
.card-a{animation:uebeyFloatA 6.4s ease-in-out infinite}
.card-b{animation:uebeyFloatB 7.2s ease-in-out -1.1s infinite}

@keyframes uebeyPortalBreath{
  0%,100%{transform:translateX(-50%) translateZ(0);opacity:.72}
  50%{transform:translateX(-50%) translateZ(22px) scale(1.018);opacity:1}
}
@keyframes uebeyDoorPulse{
  0%,100%{transform:translateY(0) scaleX(1);filter:saturate(.95)}
  50%{transform:translateY(-5px) scaleX(1.035);filter:saturate(1.08)}
}
@keyframes uebeyLineSweep{
  0%,100%{transform:scaleX(.62);opacity:.46}
  50%{transform:scaleX(1);opacity:1}
}
@keyframes uebeyFloatA{
  0%,100%{transform:translate3d(0,0,14px) rotate(-1.2deg)}
  50%{transform:translate3d(8px,-15px,34px) rotate(.8deg)}
}
@keyframes uebeyFloatB{
  0%,100%{transform:translate3d(0,0,22px) rotate(1deg)}
  50%{transform:translate3d(-10px,-13px,44px) rotate(-.7deg)}
}

/* Portfolio introduction generated by motion.js. */
.motion-intro{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  margin:-18px 0 28px;padding:14px 16px;border:1px solid #e7e7ee;
  border-radius:16px;background:rgba(255,255,255,.78);backdrop-filter:blur(14px);
  overflow:hidden;position:relative;
}
.motion-intro:after{
  content:"";position:absolute;inset:auto -18% -1px -18%;height:1px;
  background:linear-gradient(90deg,transparent,var(--motion-accent),transparent);
  animation:uebeyRail 5s linear infinite;
}
.motion-intro strong{font-size:13px;letter-spacing:-.015em}
.motion-intro span{font-size:11px;color:#74747e;text-align:right}
@keyframes uebeyRail{0%{transform:translateX(-32%)}100%{transform:translateX(32%)}}

/* Portfolio: each card becomes a small dynamic stage. */
.portfolio-grid{perspective:1400px}
.portfolio-grid .project{
  --rx:0deg;--ry:0deg;--lift:0px;--glow-x:50%;--glow-y:50%;
  position:relative;isolation:isolate;transform-style:preserve-3d;
  transform:translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .34s cubic-bezier(.2,.75,.2,1),box-shadow .34s ease,border-color .34s ease;
  box-shadow:0 12px 34px rgba(18,18,28,.035);
}
.portfolio-grid .project:before{
  content:"";position:absolute;inset:-1px;z-index:4;pointer-events:none;border-radius:inherit;
  background:radial-gradient(circle at var(--glow-x) var(--glow-y),rgba(79,70,255,.13),transparent 32%);
  opacity:0;transition:opacity .28s ease;mix-blend-mode:multiply;
}
.portfolio-grid .project:after{
  content:"";position:absolute;z-index:5;pointer-events:none;left:-28%;top:-55%;width:30%;height:210%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.48),transparent);
  transform:rotate(14deg) translateX(-260%);transition:transform .7s cubic-bezier(.2,.72,.2,1);
}
.portfolio-grid .project:hover,
.portfolio-grid .project:focus-visible{--lift:-5px;border-color:rgba(79,70,255,.22);box-shadow:0 26px 70px rgba(24,22,52,.11)}
.portfolio-grid .project:hover:before,
.portfolio-grid .project:focus-visible:before{opacity:1}
.portfolio-grid .project:hover:after,
.portfolio-grid .project:focus-visible:after{transform:rotate(14deg) translateX(520%)}

.project-art{transform:translateZ(12px);backface-visibility:hidden}
.project-info{position:relative;z-index:3;transform:translateZ(18px)}
.project-cover{
  transform:scale(1.018);transform-origin:50% 35%;
  transition:transform .75s cubic-bezier(.2,.72,.2,1),filter .55s ease,object-position 1.4s ease;
  will-change:transform,object-position;
}
.project:hover .project-cover,.project:focus-visible .project-cover{transform:scale(1.085);filter:saturate(1.04) contrast(1.015)}
.preview-chrome{transition:background-color .35s ease,border-color .35s ease}
.project:hover .preview-chrome{background:#fbfbff;border-color:#d8d5ff}

/* Different motion families, assigned cyclically by JS. */
.project.motion-drift.motion-in .project-cover{animation:uebeyImageDrift 9s ease-in-out infinite alternate}
.project.motion-pan.motion-in .project-cover{animation:uebeyImagePan 11s ease-in-out infinite alternate}
.project.motion-breathe.motion-in .project-cover{animation:uebeyImageBreath 7.4s ease-in-out infinite}
.project.motion-diagonal.motion-in .project-cover{animation:uebeyImageDiagonal 10s ease-in-out infinite alternate}
@keyframes uebeyImageDrift{0%{object-position:48% 28%;transform:scale(1.035)}100%{object-position:54% 72%;transform:scale(1.085)}}
@keyframes uebeyImagePan{0%{object-position:42% 35%;transform:scale(1.045)}100%{object-position:62% 38%;transform:scale(1.09)}}
@keyframes uebeyImageBreath{0%,100%{transform:scale(1.035)}50%{transform:scale(1.085)}}
@keyframes uebeyImageDiagonal{0%{object-position:42% 24%;transform:scale(1.04)}100%{object-position:58% 70%;transform:scale(1.095)}}

/* Small live badge: motion should be visible as a capability, not just an effect. */
.motion-badge{
  position:absolute;z-index:6;right:12px;bottom:12px;display:flex;align-items:center;gap:7px;
  padding:7px 9px;border-radius:999px;background:rgba(10,10,13,.78);color:#fff;
  font-size:8px;font-weight:760;letter-spacing:.12em;text-transform:uppercase;backdrop-filter:blur(10px);
  pointer-events:none;transform:translateZ(24px);
}
.motion-badge i{width:5px;height:5px;border-radius:50%;background:#8d87ff;box-shadow:0 0 0 0 rgba(141,135,255,.4);animation:uebeyLiveDot 2.2s ease-out infinite}
@keyframes uebeyLiveDot{0%{box-shadow:0 0 0 0 rgba(141,135,255,.5)}70%{box-shadow:0 0 0 7px rgba(141,135,255,0)}100%{box-shadow:0 0 0 0 rgba(141,135,255,0)}}

/* Cards elsewhere get a more restrained dynamic response. */
.quick-card,.content-card,.publish-steps article,.choice-strong article{
  transition:transform .28s cubic-bezier(.2,.75,.2,1),box-shadow .28s ease,border-color .28s ease;
}
.quick-card:hover,.content-card:hover,.publish-steps article:hover,.choice-strong article:hover{
  transform:translateY(-4px);border-color:rgba(79,70,255,.2);box-shadow:0 18px 48px rgba(20,20,35,.065)
}
.ai-flow span{transition:transform .28s ease,border-color .28s ease,background .28s ease}
.ai-flow span:hover{transform:translateY(-3px);border-color:rgba(141,135,255,.48);background:rgba(255,255,255,.075)}

/* Reveal refinement: slight directional variety, kept subtle. */
.portfolio-grid .project.motion-ready{opacity:0;transform:translateY(22px) scale(.985)}
.portfolio-grid .project.motion-ready.motion-in{opacity:1;transform:translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry)) scale(1);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.75,.2,1),box-shadow .34s ease,border-color .34s ease}

@media(max-width:760px){
  .motion-intro{align-items:flex-start;flex-direction:column}.motion-intro span{text-align:left}
  .motion-badge{right:9px;bottom:9px}
  .portfolio-grid .project{transform:none!important}
  .project-cover{animation-duration:12s!important}
}

@media(prefers-reduced-motion:reduce){
  .portal-shell,.portal-door,.portal-line,.browser-card,.motion-intro:after,.motion-badge i,.project-cover{animation:none!important}
  .portfolio-grid .project,.portfolio-grid .project.motion-ready,.portfolio-grid .project.motion-ready.motion-in{transform:none!important;opacity:1!important;transition:none!important}
  .portfolio-grid .project:after{display:none}
  .quick-card,.content-card,.publish-steps article,.choice-strong article,.ai-flow span{transition:none}
}