.pekio-brand-motion { position: relative; isolation: isolate; display: grid; place-items: center; width: 100%; height: 100%; min-height: 340px; overflow: hidden; background: radial-gradient(ellipse at 30% 20%,#ffae48 0%,#ff7816 58%,#e75a08 100%); }
.pekio-brand-lockup { position: relative; z-index: 1; display: flex; align-items: center; gap: 6%; width: 80%; padding: 0; background: transparent; }
.brand-panel .pekio-brand-symbol { width: 29%; }
.brand-panel .pekio-brand-type { width: 65%; }
.product-card-pekio:hover .product-shot img { transform: none; }
.pekio-brand-orbit { position: absolute; width: 77%; aspect-ratio: 1; border: 1px solid #fff5dd59; border-radius: 50%; transform: rotate(-20deg) scaleX(1.35); }
.pekio-brand-orbit::after { content: ''; position: absolute; inset: 14%; border: 1px solid #fff5dd33; border-radius: 50%; }
.pekio-brand-signature { position: absolute; bottom: 9%; color: #552708; font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.brand-panel .pekio-brand-lockup { animation: pekio-lockup-turn 4.8s cubic-bezier(.22,1,.36,1) both paused; }
.brand-panel .pekio-brand-symbol { filter: drop-shadow(4px 6px 0 #b2450a) drop-shadow(6px 12px 8px #6327004d); }
.brand-panel .pekio-brand-type { overflow: visible; }
.brand-panel .pekio-brand-letters { animation: pekio-type-in 1.4s cubic-bezier(.22,1,.36,1) both paused; }
.brand-panel .pekio-brand-orbit { animation: pekio-orbit-in 2.6s cubic-bezier(.22,1,.36,1) both paused; }
.brand-panel.visible .pekio-brand-lockup, .brand-panel.visible .pekio-brand-symbol, .brand-panel.visible .pekio-brand-type, .brand-panel.visible .pekio-brand-orbit { animation-play-state: running; }

.pekio-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.pekio-identity .pekio-hero-icon { animation: pekio-symbol-in 1.4s cubic-bezier(.22,1,.36,1) both; }
.pekio-identity .pekio-wordmark { animation: pekio-type-in 1.7s cubic-bezier(.22,1,.36,1) both; }
.pekio-models { margin-top: clamp(40px,5vw,75px); }
#examples, #pekio-content, .pekio-page [id] { scroll-margin-top: 95px; }
@keyframes pekio-lockup-in { from { opacity: 0; transform: translateY(22px) rotate(-2deg); } to { opacity: 1; transform: none; } }
@keyframes pekio-symbol-in { 0%,15% { opacity: 0; transform: translateY(14px) scale(.9); } 100% { opacity: 1; transform: none; } }
@keyframes pekio-type-in { 0%,25% { opacity: 0; transform: translateX(-12px); } 100% { opacity: 1; transform: none; } }
@keyframes pekio-orbit-in { from { opacity: 0; transform: rotate(-45deg) scaleX(1); } to { opacity: 1; transform: rotate(-20deg) scaleX(1.35); } }
@media(max-width:920px) { .pekio-brand-motion { min-height: 0; aspect-ratio: 16/9; } }
@media(max-width:580px) { .brand-panel .product-kicker { flex-wrap: wrap; gap: 10px; font-size: .65rem; } }
@media(prefers-reduced-motion:reduce) {
 .brand-panel .pekio-brand-lockup, .brand-panel .pekio-brand-symbol, .brand-panel .pekio-brand-type, .brand-panel .pekio-brand-orbit, .pekio-identity .pekio-hero-icon, .pekio-identity .pekio-wordmark { animation: none; opacity: 1; }
 .pekio-brand-lockup, .pekio-brand-symbol, .pekio-brand-type, .pekio-identity img { transform: none; transition: none; }
}

/* The i dot enters, makes one orbit around the word, then lands in its letter. */
.pekio-brand-dot { transform-origin: 365.5px 26.5px; animation: pekio-dot-flight 4.8s linear both paused; }
.pekio-dot-track { opacity: 0; animation: pekio-track-reveal 4.8s linear both paused; }
.brand-panel.visible .pekio-brand-dot, .brand-panel.visible .pekio-dot-track, .brand-panel.visible .pekio-brand-letters { animation-play-state: running; }
@keyframes pekio-dot-flight {
  0% { opacity: 0; transform: translate(-470px,-85px) scale(.8); animation-timing-function: ease-in; }
  3% { opacity: 1; }
  10% { transform: translate(-410px,116px) scale(1.18,.82); animation-timing-function: ease-out; }
  17% { transform: translate(-330px,-68px) scale(.85); animation-timing-function: ease-in; }
  24% { transform: translate(-245px,116px) scale(1.12,.88); animation-timing-function: ease-out; }
  32.000% { transform: translate(-127.25px,-37.42px) scale(0.700); }
  33.375% { transform: translate(-72.68px,-47.16px) scale(0.706); }
  34.750% { transform: translate(-19.44px,-52.95px) scale(0.723); }
  36.125% { transform: translate(30.41px,-54.57px) scale(0.751); }
  37.500% { transform: translate(74.96px,-51.96px) scale(0.788); }
  38.875% { transform: translate(112.50px,-45.22px) scale(0.833); }
  40.250% { transform: translate(141.59px,-34.61px) scale(0.885); }
  41.625% { transform: translate(161.10px,-20.54px) scale(0.941); }
  43.000% { transform: translate(170.29px,-3.55px) scale(1.000); }
  44.375% { transform: translate(168.81px,15.72px) scale(1.059); }
  45.750% { transform: translate(156.71px,36.51px) scale(1.115); }
  47.125% { transform: translate(134.45px,58.03px) scale(1.167); }
  48.500% { transform: translate(102.90px,79.45px) scale(1.212); }
  49.875% { transform: translate(63.26px,99.96px) scale(1.249); }
  51.250% { transform: translate(17.06px,118.75px) scale(1.277); }
  52.625% { transform: translate(-33.93px,135.12px) scale(1.294); }
  54.000% { transform: translate(-87.75px,148.42px) scale(1.300); }
  55.375% { transform: translate(-142.32px,158.16px) scale(1.294); }
  56.750% { transform: translate(-195.56px,163.95px) scale(1.277); }
  58.125% { transform: translate(-245.41px,165.57px) scale(1.249); }
  59.500% { transform: translate(-289.96px,162.96px) scale(1.212); }
  60.875% { transform: translate(-327.50px,156.22px) scale(1.167); }
  62.250% { transform: translate(-356.59px,145.61px) scale(1.115); }
  63.625% { transform: translate(-376.10px,131.54px) scale(1.059); }
  65.000% { transform: translate(-385.29px,114.55px) scale(1.000); }
  66.375% { transform: translate(-383.81px,95.28px) scale(0.941); }
  67.750% { transform: translate(-371.71px,74.49px) scale(0.885); }
  69.125% { transform: translate(-349.45px,52.97px) scale(0.833); }
  70.500% { transform: translate(-317.90px,31.55px) scale(0.788); }
  71.875% { transform: translate(-278.26px,11.04px) scale(0.751); }
  73.250% { transform: translate(-232.06px,-7.75px) scale(0.723); }
  74.625% { transform: translate(-181.07px,-24.12px) scale(0.706); }
  76.000% { transform: translate(-127.25px,-37.42px) scale(0.700); }
  76% { animation-timing-function: cubic-bezier(.3,0,.65,1); }
  88% { transform: translate(0,9px) scale(1.12,.88); animation-timing-function: ease-out; }
  94% { transform: translate(0,-8px) scale(.96,1.04); animation-timing-function: ease-in; }
  100% { opacity: 1; transform: translate(0,0) scale(1); }
}
@keyframes pekio-track-reveal { 0%,28% { opacity: 0; } 34%,70% { opacity: .32; } 84%,100% { opacity: 0; } }
@media(prefers-reduced-motion:reduce) {
 .brand-panel .pekio-brand-dot, .brand-panel .pekio-brand-letters { animation: none; transform: none; opacity: 1; }
 .brand-panel .pekio-dot-track { animation: none; opacity: 0; }
}

/* Dimensional type, a lit sphere and a finite perspective turn. */
.pekio-brand-motion { perspective: 900px; }
.pekio-brand-lockup { transform-style: preserve-3d; }
.pekio-brand-letters { filter: drop-shadow(6px 14px 6px #71300c66); }
.pekio-brand-dot { filter: drop-shadow(4px 6px 3px #61250060); }
.pekio-brand-ground-shadow { position: absolute; top: 66%; left: 18%; width: 68%; height: 13%; border-radius: 50%; background: radial-gradient(ellipse,#6e290061,transparent 70%); filter: blur(8px); animation: pekio-ground-shadow 4.8s ease both paused; }
.pekio-dot-back { opacity: 0; animation: pekio-back-pass 4.8s steps(1,end) both paused; }
.pekio-dot-front { animation: pekio-front-pass 4.8s steps(1,end) both paused; }
.brand-panel.visible .pekio-dot-back, .brand-panel.visible .pekio-dot-front, .brand-panel.visible .pekio-brand-ground-shadow { animation-play-state: running; }
@keyframes pekio-lockup-turn {
  0% { opacity: 0; transform: rotateX(22deg) rotateY(-34deg) rotateZ(-7deg) translateY(20px); }
  18% { opacity: 1; transform: rotateX(9deg) rotateY(15deg) rotateZ(2deg); }
  42% { transform: rotateX(-7deg) rotateY(-13deg) rotateZ(-3deg); }
  67% { transform: rotateX(12deg) rotateY(10deg) rotateZ(2deg); }
  88% { transform: rotateX(6deg) rotateY(-8deg) rotateZ(-2deg); }
  100% { opacity: 1; transform: rotateX(5deg) rotateY(-7deg) rotateZ(-1deg); }
}
@keyframes pekio-ground-shadow { 0% { opacity: 0; transform: scaleX(.6); } 25% { opacity: .7; transform: scaleX(.85) translateX(9px); } 60% { opacity: 1; transform: scaleX(1.1) translateX(-10px); } 100% { opacity: .85; transform: scaleX(1); } }
@keyframes pekio-back-pass { 0% { opacity: 0; } 32% { opacity: 1; } 43% { opacity: 0; } 65% { opacity: 1; } 76%,100% { opacity: 0; } }
@keyframes pekio-front-pass { 0% { opacity: 1; } 32% { opacity: 0; } 43% { opacity: 1; } 65% { opacity: 0; } 76%,100% { opacity: 1; } }
.pekio-brand-signature{font-size:14px;letter-spacing:.04em}.brand-panel:not(.visible) *{animation-play-state:paused!important}@media(prefers-reduced-motion:reduce){.brand-panel *{animation:none!important}.brand-panel .pekio-dot-back,.brand-panel .pekio-dot-track{opacity:0}.brand-panel .pekio-brand-lockup,.brand-panel .pekio-brand-letters,.brand-panel .pekio-dot-front,.brand-panel .pekio-brand-dot{opacity:1;transform:none}}