/* PRAKTON — Premium Experience Layer
   Designed to sit above css/site.css without changing content architecture. */

:root{
  --cursor-x:50vw;
  --cursor-y:50vh;
  --premium-line:rgba(145,158,255,.20);
  --premium-mint:rgba(127,240,211,.22);
}

/* Ambient background */
.ambient-scene{
  position:fixed;
  inset:0;
  z-index:-3;
  overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% -10%,rgba(124,140,255,.09),transparent 38%),
    linear-gradient(180deg,#06070d 0%,#070912 44%,#06070d 100%);
}
.ambient-grid{
  position:absolute;
  inset:-20%;
  opacity:.28;
  background-image:
    linear-gradient(rgba(150,160,220,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(150,160,220,.045) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom,black 0%,transparent 82%);
  transform:perspective(900px) rotateX(62deg) translateY(-13%);
  transform-origin:top;
  animation:grid-drift 26s linear infinite;
}
.ambient-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(65px);
  opacity:.52;
  will-change:transform;
}
.ambient-orb-a{
  width:460px;height:460px;left:-180px;top:22%;
  background:rgba(124,140,255,.17);
  animation:ambient-float-a 20s ease-in-out infinite;
}
.ambient-orb-b{
  width:520px;height:520px;right:-230px;top:48%;
  background:rgba(127,240,211,.09);
  animation:ambient-float-b 24s ease-in-out infinite;
}
.ambient-orb-c{
  width:360px;height:360px;left:46%;bottom:-220px;
  background:rgba(164,140,255,.12);
  animation:ambient-float-c 18s ease-in-out infinite;
}
.noise-layer{
  position:absolute;inset:0;opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

/* Cursor illumination */
.cursor-glow{
  position:fixed;
  z-index:40;
  left:0;top:0;
  width:520px;height:520px;
  border-radius:50%;
  pointer-events:none;
  opacity:.17;
  background:radial-gradient(circle,rgba(124,140,255,.40) 0%,rgba(124,140,255,.08) 34%,transparent 70%);
  transform:translate3d(calc(var(--cursor-x) - 260px),calc(var(--cursor-y) - 260px),0);
  transition:opacity .3s ease;
  mix-blend-mode:screen;
}
body:not(.has-pointer) .cursor-glow{opacity:0}

/* Navigation polish */
.site-nav{
  box-shadow:0 1px 0 rgba(255,255,255,.015);
}
.site-nav.scrolled{
  box-shadow:0 18px 55px rgba(0,0,0,.25);
}
.mega-menu{
  overflow:hidden;
}
.mega-menu:before{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(120deg,rgba(124,140,255,.08),transparent 36%),
    radial-gradient(circle at 85% 10%,rgba(127,240,211,.07),transparent 32%);
  pointer-events:none;
}
.mega-item,.mega-feature{position:relative;z-index:1}

/* Hero cinematic treatment */
.home-hero{
  isolation:isolate;
}
.home-hero:before{
  animation:hero-aura 12s ease-in-out infinite;
}
.home-hero .hero-copy{
  animation:hero-copy-in .9s cubic-bezier(.2,.75,.2,1) both;
}
.platform-visual{
  perspective:1100px;
  animation:hero-visual-in 1.05s .12s cubic-bezier(.2,.75,.2,1) both;
}
.platform-stack{
  transform-style:preserve-3d;
  animation:platform-breathe 7s ease-in-out infinite;
}
.platform-core{
  overflow:visible;
}
.platform-core:before{
  animation:ring-spin 28s linear infinite;
  border-style:dashed;
}
.platform-core:after{
  animation:ring-spin-reverse 38s linear infinite;
}
.platform-core img{
  filter:drop-shadow(0 0 18px rgba(127,240,211,.18));
}
.platform-core::selection{background:transparent}
.platform-core > *{position:relative}
.platform-core{
  animation:core-pulse 5.5s ease-in-out infinite;
}
.orbit-card{
  transform-style:preserve-3d;
  border-color:rgba(150,162,255,.19);
}
.orbit-card:after{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  background:linear-gradient(110deg,rgba(255,255,255,.055),transparent 33%);
  pointer-events:none;
}
.signal-line{
  overflow:hidden;
}
.signal-line:after{
  content:"";
  position:absolute;
  width:35%;height:100%;left:-40%;
  background:linear-gradient(90deg,transparent,#fff,transparent);
  animation:signal-travel 3.2s linear infinite;
}
.signal-2:after{animation-delay:-.7s}
.signal-3:after{animation-delay:-1.4s}
.signal-4:after{animation-delay:-2.1s}

.data-particles{position:absolute;inset:0;pointer-events:none}
.data-particles i{
  position:absolute;
  left:var(--x);top:var(--y);
  width:4px;height:4px;border-radius:50%;
  background:var(--mint);
  box-shadow:0 0 12px var(--mint);
  animation:data-pulse 4.8s var(--delay) ease-in-out infinite;
}

/* Premium surfaces */
.premium-surface{
  --mouse-x:50%;
  --mouse-y:50%;
  position:relative;
  isolation:isolate;
}
.premium-surface:before{
  content:"";
  position:absolute;inset:-1px;
  border-radius:inherit;
  z-index:-1;
  opacity:0;
  background:radial-gradient(320px circle at var(--mouse-x) var(--mouse-y),rgba(127,240,211,.21),rgba(124,140,255,.10) 38%,transparent 70%);
  transition:opacity .28s ease;
}
.premium-surface:hover:before{opacity:1}
.premium-surface:after{
  transition:transform .45s ease,opacity .45s ease;
}
.platform-card,.solution-card,.card{
  box-shadow:0 22px 50px rgba(0,0,0,.12);
}
.platform-card:hover,.solution-card:hover,.feature-card:hover{
  box-shadow:0 30px 80px rgba(0,0,0,.30),0 0 0 1px rgba(127,240,211,.05);
}

/* Buttons */
.premium-button{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.premium-button:before{
  content:"";
  position:absolute;inset:-2px;
  z-index:-2;
  border-radius:inherit;
  background:conic-gradient(from var(--button-angle,0deg),transparent 0 34%,rgba(127,240,211,.8) 42%,rgba(124,140,255,.9) 50%,transparent 60% 100%);
  opacity:0;
  animation:button-border-spin 3.5s linear infinite;
  transition:opacity .25s;
}
.premium-button:after{
  content:"";
  position:absolute;inset:1px;
  z-index:-1;
  border-radius:inherit;
  background:inherit;
}
.premium-button:hover:before{opacity:.62}
.btn-primary.premium-button:after{
  background:linear-gradient(110deg,var(--accent),#9f85ff);
}
.btn-ghost.premium-button:after{
  background:rgba(8,10,18,.94);
}
.button-ripple{
  position:absolute;
  border-radius:50%;
  transform:scale(0);
  background:rgba(255,255,255,.35);
  pointer-events:none;
  animation:ripple .6s linear;
}

/* Architecture: animated data flow */
.arch-flow{
  position:relative;
}
.arch-flow:before{
  content:"";
  position:absolute;
  left:4%;right:4%;top:50%;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),var(--mint),var(--accent),transparent);
  opacity:.15;
  animation:architecture-line 5s ease-in-out infinite;
}
.architecture-node{
  overflow:hidden;
  animation:node-breathe 5s calc(var(--node-index) * -.45s) ease-in-out infinite;
}
.architecture-node:before{
  content:"";
  position:absolute;
  top:0;left:-70%;
  width:45%;height:1px;
  background:linear-gradient(90deg,transparent,var(--mint),transparent);
  animation:node-scan 4.6s calc(var(--node-index) * .35s) linear infinite;
}

/* Reveal stagger */
.metric-grid .metric,
.platform-grid .platform-card,
.solution-grid .solution-card,
.grid .card,
.arch-flow .flow-node{
  transition-delay:calc(var(--stagger,0) * 70ms);
}

/* Section separators */
section:after{
  content:"";
  position:absolute;
  left:50%;bottom:0;
  width:min(880px,76vw);height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--line),transparent);
  opacity:.45;
}
section.section-alt:after{display:none}

/* Footer weight */
.site-footer{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 15% 0%,rgba(124,140,255,.09),transparent 34%),
    radial-gradient(circle at 95% 100%,rgba(127,240,211,.05),transparent 30%),
    #070910;
}
.site-footer:before{
  content:"PRAKTON";
  position:absolute;
  right:-1vw;bottom:-5.7rem;
  font:700 clamp(7rem,18vw,17rem)/1 var(--display);
  letter-spacing:-.08em;
  color:rgba(255,255,255,.018);
  pointer-events:none;
}
.footer-top,.footer-bottom{position:relative;z-index:1}

/* Keyframes */
@property --button-angle{
  syntax:"<angle>";
  initial-value:0deg;
  inherits:false;
}
@keyframes button-border-spin{to{--button-angle:360deg}}
@keyframes ripple{to{transform:scale(4);opacity:0}}
@keyframes grid-drift{to{background-position:72px 72px}}
@keyframes ambient-float-a{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(110px,-65px,0)}}
@keyframes ambient-float-b{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-100px,50px,0)}}
@keyframes ambient-float-c{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(35px,-70px,0)}}
@keyframes hero-aura{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
@keyframes hero-copy-in{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes hero-visual-in{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
@keyframes platform-breathe{0%,100%{transform:rotateX(0deg) rotateY(0deg)}50%{transform:rotateX(1.4deg) rotateY(-2deg)}}
@keyframes ring-spin{to{transform:rotate(360deg)}}
@keyframes ring-spin-reverse{to{transform:rotate(-360deg)}}
@keyframes core-pulse{0%,100%{box-shadow:0 0 70px rgba(124,140,255,.20),inset 0 0 30px rgba(127,240,211,.08)}50%{box-shadow:0 0 110px rgba(124,140,255,.32),inset 0 0 44px rgba(127,240,211,.14)}}
@keyframes signal-travel{to{left:115%}}
@keyframes data-pulse{0%,100%{opacity:.15;transform:scale(.65)}50%{opacity:1;transform:scale(1.5)}}
@keyframes architecture-line{0%,100%{opacity:.08;filter:blur(0)}50%{opacity:.32;filter:blur(.2px)}}
@keyframes node-breathe{0%,100%{border-color:var(--line)}50%{border-color:rgba(127,240,211,.20)}}
@keyframes node-scan{to{left:130%}}

@media(max-width:1100px){
  .cursor-glow{display:none}
  .arch-flow:before{display:none}
}
@media(max-width:760px){
  .ambient-grid{background-size:46px 46px}
  .site-footer:before{bottom:-2.2rem}
}
@media(prefers-reduced-motion:reduce){
  .ambient-grid,.ambient-orb,.home-hero:before,.hero-copy,.platform-visual,.platform-stack,
  .platform-core,.platform-core:before,.platform-core:after,.signal-line:after,.data-particles i,
  .architecture-node,.architecture-node:before,.arch-flow:before,.premium-button:before{
    animation:none!important;
  }
  .cursor-glow{display:none}
}