/* Umer OS Motion v1.0.0
   3D Android phone for the hero + restrained site-wide motion.
   Everything is scoped to .uom-* classes added by motion.js, so the theme is untouched
   when the plugin is switched off. */

:root {
  --uom-acc: 140 156 255;            /* accent as "r g b"; motion.js replaces it with the site's button colour */
  --uom-ease-out: cubic-bezier(.16, 1, .3, 1);
  --uom-ease-soft: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Old picture, kept for screen readers but visually removed ---------- */
.uom-src-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  pointer-events: none !important;
}

/* ---------- Stage ---------- */
.uom-stage {
  --uom-amp: 2.4cqw;                  /* floating distance (about 9-11px on desktop) */
  --uom-T: 2.5cqw;                    /* phone thickness */
  --uom-enter-dur: 1.35s;
  position: relative;
  display: block;
  width: var(--uom-w, 100%);
  max-width: min(100%, calc(74svh * 0.521));
  aspect-ratio: 696 / 1336;
  margin-inline: auto;
  container-type: inline-size;
  perspective: 420cqw;
  perspective-origin: 50% 38%;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.uom-stage *,
.uom-stage *::before,
.uom-stage *::after { box-sizing: border-box; }

/* Nested movers. Each layer owns one kind of motion so they never fight:
   rig = scroll, tilt = mouse, float = up/down, sway = slow rotation,
   rise/turn = entrance, phone = resting three-quarter pose. */
.uom-rig {
  position: absolute;
  left: 6.5%;
  top: 2%;
  width: 87%;
  aspect-ratio: 0.4896;
  transform-style: preserve-3d;
  will-change: transform;
}
.uom-tilt, .uom-float, .uom-sway, .uom-rise, .uom-turn, .uom-phone {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.uom-phone { transform: rotateY(-17deg) rotateX(5deg); }

/* ---------- Entrance (about 1.35s, staggered) ---------- */
.uom-rise {
  animation: uom-rise var(--uom-enter-dur) var(--uom-ease-out) both;
}
.uom-turn {
  animation: uom-turn calc(var(--uom-enter-dur) + .2s) .08s var(--uom-ease-out) both;
}
@keyframes uom-rise {
  0%   { transform: translate3d(0, 16cqw, -34cqw); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: none; opacity: 1; }
}
@keyframes uom-turn {
  0%   { transform: rotateX(22deg) rotateY(-26deg) rotateZ(-3deg); }
  100% { transform: none; }
}

/* ---------- Idle float: two cycles of different length, so it never looks mechanical ---------- */
.uom-float {
  animation: uom-float 7s calc(var(--uom-enter-dur) - .1s) ease-in-out infinite both;
}
.uom-sway {
  animation: uom-sway 9.4s calc(var(--uom-enter-dur) - .1s) ease-in-out infinite both;
}
@keyframes uom-float {
  0%, 100% { transform: translate3d(0, var(--uom-amp), 0); }
  50%      { transform: translate3d(0, calc(var(--uom-amp) * -1), 0); }
}
@keyframes uom-sway {
  0%, 100% { transform: rotateY(-2.2deg) rotateX(1deg) translateZ(0); }
  50%      { transform: rotateY(2.4deg) rotateX(-1.2deg) translateZ(1cqw); }
}

/* ---------- Device: body thickness (stacked slices = real rounded side edges) ---------- */
.uom-slice {
  position: absolute;
  inset: 0;
  border-radius: 11cqw;
  transform: translateZ(var(--z));
  background:
    linear-gradient(100deg,
      hsl(225 7% calc(var(--l) - 7%)) 0%,
      hsl(225 6% var(--l)) 55%,
      hsl(225 9% calc(var(--l) + 14%)) 100%);
  backface-visibility: visible;
}
.uom-btn {
  position: absolute;
  right: -.55cqw;
  width: 1.1cqw;
  border-radius: .6cqw;
  transform: translateZ(var(--z));
  background: linear-gradient(90deg, #191a1e, #565b66 60%, #2b2d33);
}
.uom-btn.is-power { top: 30%; height: 7.5%; }
.uom-btn.is-vol   { top: 41%; height: 13%; }

/* ---------- Device: front ---------- */
.uom-front {
  position: absolute;
  inset: 0;
  border-radius: 11cqw;
  transform: translateZ(.4px);
  /* machined graphite frame */
  background:
    linear-gradient(140deg, #6b707b 0%, #2a2c32 22%, #1a1b1f 48%, #33363d 72%, #777c87 100%);
  box-shadow:
    inset 0 0 0 .18cqw rgba(255, 255, 255, .10),
    inset 0 .35cqw .5cqw rgba(255, 255, 255, .10),
    0 0 7cqw -1.5cqw rgb(var(--uom-acc) / .32);       /* soft blue rim light from behind */
}
.uom-bezel {
  position: absolute;
  inset: 1.25cqw;
  border-radius: 9.8cqw;
  background: #040406;
  box-shadow: inset 0 0 0 .25cqw #0c0d10;
  overflow: hidden;
}
.uom-screen {
  position: absolute;
  inset: 2.3cqw;
  border-radius: 7.6cqw;
  overflow: hidden;
  background: var(--uom-screen-bg, #f5f3ef);
  transform: translateZ(0);
}
.uom-screen canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transition: opacity .45s var(--uom-ease-soft);
}
.uom-screen canvas.is-leaving { opacity: 0; }

/* Punch-hole camera, centred where the Dynamic Island used to be */
.uom-hole {
  position: absolute;
  left: 50%;
  top: 3.1%;
  width: 3.3cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 36% 34%, #3a4a6e 0 10%, #0b0d14 34%, #000 70%);
  box-shadow: 0 0 0 .28cqw rgba(0, 0, 0, .55), 0 0 0 .45cqw rgba(255, 255, 255, .06);
  z-index: 3;
}

/* Glass: soft static reflection + highlight that follows the mouse */
.uom-glass {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(60% 40% at var(--uom-gx, 28%) var(--uom-gy, 18%), rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%),
    linear-gradient(118deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .03) 26%, rgba(255, 255, 255, 0) 40%);
  mix-blend-mode: soft-light;
}
.uom-glass::before {
  /* occasional light sweep across the glass */
  content: "";
  position: absolute;
  inset: -10% -60%;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, .22) 50%, rgba(255, 255, 255, 0) 58%);
  transform: translateX(-70%);
  animation: uom-sweep 9s 2.2s var(--uom-ease-soft) infinite;
}
@keyframes uom-sweep {
  0%       { transform: translateX(-70%); }
  18%, 100% { transform: translateX(70%); }
}

/* ---------- Light & shadow (outside the 3D rig, so they stay grounded) ---------- */
.uom-glow, .uom-glow-i, .uom-glow-s { position: absolute; inset: 0; pointer-events: none; }
.uom-glow {
  top: 4%;
  bottom: 6%;
  z-index: -1;
  animation: uom-bloom 1.9s .5s var(--uom-ease-out) both;
}
.uom-glow-s { opacity: calc(1 - var(--uom-sp, 0) * .55); }
.uom-glow-i {
  background:
    radial-gradient(closest-side, rgb(var(--uom-acc) / .5), rgb(var(--uom-acc) / .24) 38%, rgb(var(--uom-acc) / .08) 70%, rgb(var(--uom-acc) / 0) 100%);
  animation: uom-breathe 7s calc(var(--uom-enter-dur) - .1s) ease-in-out infinite both;
}
@keyframes uom-bloom {
  0%   { opacity: 0; transform: scale(.6); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes uom-breathe {
  0%, 100% { opacity: .82; }
  50%      { opacity: 1; }
}

.uom-shadow {
  position: absolute;
  left: 17%;
  width: 66%;
  top: 91.5%;
  height: 6%;
  pointer-events: none;
  z-index: -1;
  animation: uom-fadein 1.2s .35s var(--uom-ease-soft) both;
}
.uom-shadow-i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(0, 0, 0, .78), rgba(0, 0, 0, .42) 45%, rgba(0, 0, 0, 0) 100%);
  animation: uom-shadow 7s calc(var(--uom-enter-dur) - .1s) ease-in-out infinite both;
}
.uom-shadow-i::after {
  /* faint blue light pooling on the "floor" */
  content: "";
  position: absolute;
  inset: -60% -18%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--uom-acc) / .14), rgb(var(--uom-acc) / 0));
}
@keyframes uom-fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes uom-shadow {
  /* phone low -> tighter & darker, phone high -> wider & softer */
  0%, 100% { transform: scale(.93, .9); opacity: 1; }
  50%      { transform: scale(1.12, 1.08); opacity: .6; }
}

/* ---------- Real-time 3D stage (phone + orbital light rings) ---------- */
.uom-stage.uom-3d {
  perspective: none;
  width: min(100%, max(var(--uom-w, 380px), 470px));
  max-width: min(100%, calc(84svh * 0.62));
  aspect-ratio: 0.62;
  overflow: visible;
}
.uom-hero-clip { overflow-x: clip; }
@media (max-width: 781px) {
  .uom-stage.uom-3d { width: min(88vw, 400px, calc(64svh * 0.7)); max-width: 88vw; aspect-ratio: 0.7; }
}
.uom-3d-canvas {
  position: absolute; inset: -6% -24%; width: 148% !important; height: 112% !important; display: block;
  pointer-events: none;
  /* feather the edges so light never ends in a hard line */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-composite: intersect;
}
.uom-3d.is-panel { overflow: hidden; }
.uom-3d.is-panel .uom-3d-canvas { inset: 0; width: 100% !important; height: 100% !important; -webkit-mask-image: none; mask-image: none; }
@media (max-width: 781px) {
  .uom-3d .uom-3d-canvas { inset: -5% -8%; width: 116% !important; height: 110% !important; }
}
.uom-3d.is-panel {
  /* dark studio panel, used only when the page behind is light */
  border-radius: 28px;
  background:
    radial-gradient(120% 80% at 50% 38%, #1a1c21 0%, #0f1013 55%, #08090b 100%);
  box-shadow: 0 30px 60px -30px rgba(10, 20, 25, .55), inset 0 0 0 1px rgba(255, 255, 255, .05);
  overflow: hidden;
}

/* ---------- Small floating chips (desktop only) ---------- */
.uom-chip {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  padding: 1.9cqw 3.2cqw;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 500;
  font-size: 3cqw;
  line-height: 1.2;
  letter-spacing: .01em;
  white-space: nowrap;
  color: #e9e7e2;
  background: #111216;
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 2cqw 5cqw -1.5cqw rgba(0, 0, 0, .7), 0 0 0 1px rgb(var(--uom-acc) / .06);
  transform-style: preserve-3d;
  pointer-events: none;
}
.uom-chip.is-off { display: none; }
.uom-chip-dot {
  width: 1.7cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgb(var(--uom-acc));
  box-shadow: 0 0 0 .7cqw rgb(var(--uom-acc) / .18);
}
.uom-chip svg { width: 3.4cqw; height: 3.4cqw; flex: none; color: rgb(var(--uom-acc)); }
.uom-chip-a {
  right: 89%;
  top: 21%;
  animation: uom-chip-in .9s 1.05s var(--uom-ease-out) both, uom-chip-float-a 6.2s 1.95s ease-in-out infinite both;
}
.uom-chip-b {
  left: 90%;
  top: 70%;
  animation: uom-chip-in .9s 1.25s var(--uom-ease-out) both, uom-chip-float-b 7.6s 2.15s ease-in-out infinite both;
}
@keyframes uom-chip-in {
  from { opacity: 0; translate: 0 3cqw; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes uom-chip-float-a {
  0%, 100% { transform: translate3d(0, 1cqw, 9cqw); }
  50%      { transform: translate3d(0, -1.2cqw, 9cqw); }
}
@keyframes uom-chip-float-b {
  0%, 100% { transform: translate3d(0, -.8cqw, 15cqw); }
  50%      { transform: translate3d(0, 1.3cqw, 15cqw); }
}

/* ---------- Pause when the tab is hidden or the phone is off-screen ---------- */
html.uom-paused .uom-stage,
html.uom-paused .uom-stage *,
html.uom-paused .uom-stage *::before,
html.uom-paused .uom-stage *::after,
.uom-stage.is-off,
.uom-stage.is-off *,
.uom-stage.is-off *::before,
.uom-stage.is-off *::after { animation-play-state: paused !important; }

/* ---------- Tablet & phone ---------- */
@media (max-width: 1024px) {
  .uom-chip { display: none; }
}
@media (max-width: 781px) {
  .uom-stage {
    --uom-amp: 1.4cqw;
    --uom-enter-dur: 1s;
    max-width: min(100%, 300px, calc(60svh * 0.521));
  }
  .uom-glass::before { animation: none; display: none; }
}

/* =====================================================================
   Site-wide motion
   ===================================================================== */

/* Navigation links: colour fade + thin underline that draws in */
.wp-block-navigation .wp-block-navigation-item__content {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size .35s var(--uom-ease-soft), color .25s ease, opacity .25s ease;
}
.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
  background-size: 100% 1px;
}

/* Buttons: small lift, softer shadow, crisp press */
.wp-block-button__link,
.wp-element-button {
  transition: transform .3s var(--uom-ease-soft), box-shadow .3s var(--uom-ease-soft),
              background-color .25s ease, color .25s ease, border-color .25s ease;
}
.wp-block-button__link:hover,
.wp-element-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -12px rgb(var(--uom-acc) / .6);
}
.wp-block-button__link:active,
.wp-element-button:active {
  transform: translateY(0) scale(.985);
  box-shadow: 0 4px 12px -8px rgb(var(--uom-acc) / .5);
  transition-duration: .08s;
}

/* Clear keyboard focus */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible {
  outline: 2px solid rgb(var(--uom-acc));
  outline-offset: 3px;
}

/* Section entrances (only added by JS to content below the first screen) */
.uom-reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity .8s var(--uom-ease-soft) var(--uom-d, 0ms),
              transform .9s var(--uom-ease-out) var(--uom-d, 0ms);
}
.uom-reveal.uom-in { opacity: 1; transform: none; }

/* Feature cards */
.uom-card {
  transition: transform .4s var(--uom-ease-soft), box-shadow .4s var(--uom-ease-soft), border-color .4s ease;
}
.uom-card:not(.uom-reveal):hover {
  transform: translateY(-4px);
  border-color: rgb(var(--uom-acc) / .45) !important;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .7), 0 0 0 1px rgb(var(--uom-acc) / .12);
}

/* ---------- Reduced motion: still, polished three-quarter pose, everything visible ---------- */
@media (prefers-reduced-motion: reduce) {
  .uom-stage,
  .uom-stage *,
  .uom-stage *::before,
  .uom-stage *::after {
    animation: none !important;
    transition: none !important;
  }
  .uom-glass::before { display: none; }
  .uom-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .wp-block-button__link:hover, .wp-element-button:hover,
  .wp-block-button__link:active, .wp-element-button:active,
  .uom-card:hover { transform: none !important; }
}