/*
 * RYAN SHORT / PORTFOLIO 003
 * Orbital Systems — bespoke celestial art direction, no theme switch or UI gimmicks.
 * Foundation remains in style.css; this file owns V3 motion and composition.
 */
:root{
  --bg:#05070b;--panel:#0d1320;--panel2:#101826;--ink:#eaf2ff;
  --muted:#99a9be;--line:#243144;--blue:#3b82ff;--cyan:#4be7ff;--orange:#4be7ff;
}
body{background:#05070b}
::selection{background:#4be7ff;color:#05070b}
.header{z-index:50}
.site-progress__bar{background:linear-gradient(90deg,#3b82ff,#4be7ff)}

/* Deliberately small, plainly labeled ambient motion control. */
.motion-dock{position:fixed;bottom:25px;right:25px;z-index:70;display:flex;align-items:center;gap:11px;
  color:#c8d9eb;background:rgba(8,14,23,.92);border:1px solid #344d67;border-radius:50px;
  box-shadow:0 14px 42px #0009;padding:12px 16px;backdrop-filter:blur(16px);
  font:700 10px var(--body);letter-spacing:.12em;text-transform:uppercase;transition:border-color .2s,background .2s}
.motion-dock:hover{border-color:#76a8ca;background:#121e2e}
.motion-dock__light{width:5px;height:5px;background:var(--cyan);border-radius:50%;box-shadow:0 0 14px var(--cyan)}
.motion-dock__icon{display:inline-flex;font:700 13px var(--body);height:14px;align-items:center;color:#fff}
html[data-motion-paused="true"] .motion-dock__light{background:#7f8a9a;box-shadow:none}

/* Hero's *native sticky* journey: eliminates JS pin jumps. */
.hero-journey{height:160svh;position:relative;isolation:isolate;background:#05070b}
.hero--v3{position:sticky;top:0;width:100%;height:100svh;max-height:none;min-height:600px;
  isolation:isolate;overflow:hidden;background:#05070b}
.hero--v3::before{content:"";pointer-events:none;position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,#05070b 0%,#05070bf5 18%,#05070bb7 39%,#05070b18 70%,transparent 88%)}
.hero--v3::after{content:"";pointer-events:none;position:absolute;inset:auto 0 0;z-index:3;height:19%;
  background:linear-gradient(0deg,#05070bc9,transparent)}
.hero__grid{z-index:0;background-size:100px 100px;
  background-image:linear-gradient(to right,#6784a10a 1px,transparent 1px),linear-gradient(#6784a10a 1px,transparent 1px);
  mask-image:linear-gradient(90deg,transparent 0%,#000 33%,#000 100%);opacity:1}
.hero__space-wash{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 56% 82% at 76% 46%,#1c396c83 0%,#1023453d 36%,transparent 81%),
             radial-gradient(ellipse 70% 42% at 95% 3%,#19356948,transparent 90%)}
.hero__scene{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  transform:translate3d(var(--parallax-x,0px),var(--parallax-y,0px),0);will-change:transform}
.celestial{position:absolute;width:min(75vw,1010px);aspect-ratio:1;left:76%;top:47%;translate:-50% -50%;
  transform-origin:50% 50%;will-change:transform,opacity}
.celestial__backlight{position:absolute;inset:-9%;border-radius:50%;
  background:radial-gradient(circle,#377ce433 0%,#2676d31e 32%,#11366b12 54%,transparent 73%);
  opacity:.85}
.celestial__cloud{position:absolute;inset:0;width:100%;height:100%;opacity:.9;pointer-events:none;object-fit:contain}
.celestial__orbits{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:3}
.orbit-path{stroke-width:1.45;stroke-linecap:round;vector-effect:non-scaling-stroke}
.orbit-path--subtle{stroke-opacity:.7;stroke-width:1.05}
.orbit-path--dashed{stroke:#6a9ae6;stroke-opacity:.25;stroke-width:.85;stroke-dasharray:2 8}
.celestial-satellite{transform-box:view-box}
.celestial__datum{opacity:.7}
.celestial__aura{position:absolute;width:39%;aspect-ratio:1;left:50%;top:50%;translate:-50% -50%;border-radius:50%;z-index:3;
  background:radial-gradient(circle,#45a9e230 20%,#3b82ff19 49%,transparent 72%);}
.celestial__planet{position:absolute;width:30.5%;aspect-ratio:1;left:50%;top:50%;translate:-50% -50%;z-index:4;border-radius:50%;
  overflow:hidden;border:1px solid #69b9f533;
  background:radial-gradient(circle at 26% 24%,#508ec0 0%,#255784 21%,#123659 45%,#07152c 75%,#01050c 96%);
  box-shadow:inset -18px -18px 45px #01050dbf,inset 18px 5px 45px #65d8f011,0 0 25px #378aff22,0 0 115px #3b82ff24}
.celestial__planet-texture{position:absolute;inset:-35%;border-radius:50%;opacity:.37;
  background:repeating-linear-gradient(169deg,transparent 0 16px,#6cb8d312 20px,#9ddbf019 24px,transparent 34px 57px),
  radial-gradient(ellipse at 20% 44%,#95e0ff30,transparent 50%);transform:rotate(-15deg)}
.celestial__planet-shade{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 32% 25%,transparent 0%,#00112433 35%,#000a1dae 72%,#00050cef 100%),
  linear-gradient(130deg,transparent 12%,#0309169c 71%,#000 105%)}
.celestial__annotation{position:absolute;z-index:4;display:flex;align-items:center;gap:11px;
  color:#8fa9c5;font:700 9px var(--body);letter-spacing:.19em;white-space:nowrap;opacity:.77}
.celestial__annotation i{width:42px;height:1px;background:#49719a;display:block}
.celestial__annotation span{color:#4be7ff;font-size:10px}
.celestial__annotation--top{right:7%;top:17%}
.celestial__annotation--bottom{left:0;bottom:13%}

/* Keep copy fully contained at every breakpoint; no transform is applied to the heading parent. */
.hero__content--v3{z-index:4;position:relative;max-width:1500px;width:min(100% - var(--edge)*2,1500px);
  height:100%;min-height:0;padding-top:105px;padding-bottom:66px;justify-content:center}
.hero__copy{width:min(70%,920px);position:relative;z-index:4}
.hero__eyebrow{font-size:clamp(9px,.85vw,11px);margin-bottom:clamp(28px,4vh,50px);letter-spacing:.17em}
.hero__title--v3{max-width:100%;font:700 clamp(62px,7.95vw,136px)/.91 var(--display);
  letter-spacing:-.09em;white-space:nowrap;margin:0;overflow:visible}
.hero__title--v3>span{display:block;width:max-content;max-width:100%}
.hero__title--v3 em{-webkit-text-stroke:1px #a9c7ed;font-style:normal;color:transparent}
.hero__title--v3 .period{color:var(--cyan);filter:drop-shadow(0 0 20px #4be7ff40)}
.hero__bottom--v3{display:block;max-width:630px;margin-top:clamp(30px,6vh,68px)}
.hero__bottom--v3 p{max-width:590px;font-size:clamp(15px,1.25vw,18px);line-height:1.76;color:#a9bacd}
.hero__links{margin-top:26px;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.hero__primary{display:inline-flex;align-items:center;gap:28px;border-radius:100px;background:#eaf2ff;color:#081322;
  padding:14px 19px 14px 24px;font:700 12px var(--body);transition:background .25s,transform .25s}
.hero__primary:hover{background:#4be7ff;transform:translateY(-3px)}
.hero__secondary{font:700 12px var(--body);padding:14px 0;border-bottom:1px solid #57718c;transition:color .25s}
.hero__secondary:hover{color:#4be7ff}
.hero__primary span,.hero__secondary span{font-size:18px;line-height:0}
.hero__side-note{z-index:5;right:var(--edge);top:47%;letter-spacing:.24em}
.hero__foot{left:var(--edge);right:var(--edge);transform:none;width:auto;justify-content:space-between;bottom:31px;z-index:6;padding:0;
  font:700 10px var(--body);letter-spacing:.18em;color:#8c9db2}
.hero__foot span:first-child{color:#c6d8ed}.hero__foot-line{width:auto;flex:1;background:#51657a55}
.hero__handoff{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;flex-direction:column;
  opacity:0;visibility:hidden;pointer-events:none;text-align:center;padding:24px;
  background:radial-gradient(ellipse at center,#0c1b30a6,#05070b7a 55%,#05070bbb)}
.hero__handoff-index{font:700 10px var(--body);letter-spacing:.23em;color:var(--cyan);margin-bottom:25px}
.hero__handoff p{font:700 clamp(45px,7.2vw,110px)/.95 var(--display);letter-spacing:-.08em;margin:0;max-width:1000px}
.hero__handoff em{font-style:normal;color:transparent;-webkit-text-stroke:1px #9ab5d6}
.motion-pending .hero-reveal{opacity:0}

/* Brand atmosphere without fake spacecraft UI. */
.ticker{background:#080d16;border-color:#1d3045}
.ticker__track{color:#a6b9ce}
.intro{position:relative}
.intro::before{content:"";position:absolute;right:4%;top:12%;width:40vw;height:40vw;pointer-events:none;
  background:radial-gradient(circle,#2d6ac810,transparent 72%)}
.intro__aside .crosshair{color:var(--cyan)}
.work,.about{background:#0c111b}
.playground{background:#101722}
.playground__shape--one{animation:shape-drift 18s ease-in-out infinite alternate}
.playground__shape--two{animation:shape-drift 13s ease-in-out infinite alternate-reverse}
@keyframes shape-drift{0%{border-radius:45% 55% 41% 59%}100%{border-radius:61% 39% 53% 47%}}
.section-index .fine-line{position:relative;overflow:hidden}
.section-index .fine-line::after{content:"";position:absolute;inset:0;width:19%;opacity:.28;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);animation:line-shimmer 9s ease-in-out infinite}
@keyframes line-shimmer{from{transform:translateX(-100%)}to{transform:translateX(620%)}}

/* Restrained close-up of orbital structures between introduction and real projects. */
.kinetic{height:180svh;position:relative;isolation:isolate;background:#050810}
.kinetic__pin{height:100svh;min-height:570px;position:sticky;top:0;isolation:isolate;overflow:hidden;
  display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,#10244583,transparent 54%),#050810}
.kinetic__rings{position:absolute;inset:0;z-index:-1;display:grid;place-items:center;pointer-events:none}
.kinetic__rings span{position:absolute;width:min(80vw,1100px);aspect-ratio:1;border:1px solid #4592f327;border-radius:50%;
  transform:rotate(-30deg) scaleX(1.25) scaleY(.63)}
.kinetic__rings span:nth-child(2){width:min(100vw,1300px);transform:rotate(25deg) scaleX(.9) scaleY(.5);border-color:#4be7ff25}
.kinetic__rings span:nth-child(3){width:min(125vw,1700px);transform:rotate(58deg) scaleX(.83) scaleY(.57);border-color:#5195ed1b}
.kinetic__rings span:nth-child(4){width:min(150vw,2100px);transform:rotate(-5deg) scaleX(1) scaleY(.7);border-color:#5398ec13}
.kinetic__content{z-index:2;position:relative}
.kinetic__meta{display:flex;justify-content:space-between;gap:20px;margin-bottom:clamp(35px,5vw,70px);
  font:700 10px var(--body);letter-spacing:.18em;color:#a5bed5}
.kinetic__title{display:flex;flex-direction:column;align-items:center;text-align:center;
  font:700 clamp(54px,9.6vw,155px)/.89 var(--display);letter-spacing:-.09em;margin:0}
.kinetic__title span{display:block;color:transparent;-webkit-text-stroke:1px #879ab8}
.kinetic__title strong{font:inherit;color:#f0f6ff;white-space:nowrap}
.kinetic__title em{font:inherit;font-style:normal;color:#f0f6ff}
.kinetic__title i{font:inherit;font-style:normal;color:var(--cyan)}
.kinetic__under{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:18px;margin-top:clamp(30px,5vw,70px)}
.kinetic__under p{font:500 13px/1.7 var(--body);text-align:center;color:#c4cfde;margin:0}
.kinetic__rule{height:1px;width:min(100%,210px);background:linear-gradient(90deg,transparent,#5497c5)}
.kinetic__asterisk{font:400 29px var(--display);color:var(--cyan);justify-self:end}

/* Interaction continuity for project visuals. */
.project__visual::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  background:radial-gradient(450px circle at var(--hover-x,50%) var(--hover-y,50%),#4be7ff24,transparent 80%);transition:opacity .4s}
.project__trigger:hover .project__visual::after,.project__trigger:focus-visible .project__visual::after{opacity:1}
.project__visual>*{z-index:1}
.project__trigger:hover .project__visual{box-shadow:inset 0 0 75px #306ac721,0 16px 55px #0004}
.project__trigger:hover .project__round-arrow{background:var(--cyan);border-color:var(--cyan);color:#06101b}
.project__round-arrow{transition:background .3s,border-color .3s,color .3s}
.project.is-tilting .mini-browser{transform:perspective(900px) translateY(8px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) rotateZ(-3deg) scale(1.015)}
.project.is-tilting .platform-dashboard{transform:perspective(900px) rotateX(calc(6deg + var(--tilt-x,0deg))) rotateY(calc(-13deg + var(--tilt-y,0deg))) rotateZ(3deg)}
.project.is-tilting .integration-canvas{transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) rotateZ(-4deg)}
.project.is-tilting .mini-browser,.project.is-tilting .platform-dashboard,.project.is-tilting .integration-canvas{transition:transform .12s ease-out}
.statement__line--first,.statement__line--second{will-change:auto}

html[data-motion-paused="true"] .ticker__track,
html[data-motion-paused="true"] .playground__shape,
html[data-motion-paused="true"] .section-index .fine-line::after{animation-play-state:paused!important}

@media(max-width:1180px){
  .hero__copy{width:min(77%,780px)}
  .hero__title--v3{font-size:clamp(59px,8.3vw,104px)}
  .celestial{left:79%;width:min(89vw,950px)}
  .hero__side-note{display:none}
}
@media(max-width:760px){
  :root{--edge:22px}
  .hero-journey{height:auto;min-height:100svh}
  .hero--v3{position:relative;height:auto;min-height:max(780px,100svh);overflow:hidden}
  .hero--v3::before{background:linear-gradient(0deg,#05070b 8%,#05070bef 31%,#05070b7d 58%,transparent 85%)}
  .hero__scene{transform:none!important}
  .celestial{width:118vw;min-width:440px;top:27%;left:70%;opacity:.76}
  .celestial__annotation{display:none}
  .hero__content--v3{height:auto;min-height:max(780px,100svh);padding-top:clamp(310px,43svh,430px);padding-bottom:105px;justify-content:end}
  .hero__copy{width:100%}
  .hero__title--v3{font-size:clamp(58px,11.1vw,84px);line-height:.93;letter-spacing:-.092em}
  .hero__eyebrow{margin-bottom:21px;font-size:9px;letter-spacing:.09em;gap:10px}
  .hero__bottom--v3{margin-top:29px}
  .hero__bottom--v3 p{font-size:15px;line-height:1.55;max-width:420px}
  .hero__links{margin-top:20px}
  .hero__foot{bottom:25px;font-size:9px}
  .hero__handoff{display:none}
  .hero__primary{padding:13px 17px}
  .motion-dock{bottom:14px;right:14px;padding:10px 12px}
  .kinetic{height:auto}
  .kinetic__pin{height:auto;min-height:75svh;position:relative;padding:105px 0}
  .kinetic__title{font-size:clamp(46px,9.4vw,75px)}
  .kinetic__meta{margin-bottom:35px;font-size:9px}
  .kinetic__rings span{width:125vw}
  .kinetic__under{margin-top:35px}
  .playground{margin-block:50px}
}
@media(max-width:450px){
  .hero__title--v3{font-size:clamp(48px,11.4vw,61px)}
  .hero__content--v3{padding-top:340px}
  .hero__eyebrow{font-size:8px}
  .hero__foot span:last-child{display:none}
  .hero__foot-line{display:block;max-width:50px}
  .hero__links{gap:17px}
  .kinetic__title{font-size:clamp(42px,9.2vw,53px)}
  .kinetic__meta span:last-child{display:none}
  .motion-dock__label{font-size:9px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-journey{height:auto}
  .hero--v3{position:relative;min-height:780px;height:auto}
  .hero__content--v3{min-height:780px;height:auto}
  .hero__handoff{display:none}
  .hero__scene{transform:none!important}
  .celestial{transform:none!important}
  .kinetic{height:auto}
  .kinetic__pin{height:auto;min-height:75svh;position:relative;padding:100px 0}
  .section-index .fine-line::after,.ticker__track,.playground__shape{animation:none}
  .project.is-tilting .mini-browser,.project.is-tilting .platform-dashboard,.project.is-tilting .integration-canvas{transform:none}
}

/* Libraries aren't mandatory. Avoid a pointless 60vh hold without scroll choreography. */
html:not(.gsap-enabled) .hero-journey{height:auto;min-height:100svh}
html:not(.gsap-enabled) .hero--v3{position:relative;min-height:100svh;height:auto}
html:not(.gsap-enabled) .hero__content--v3{min-height:100svh;height:auto}
html:not(.gsap-enabled) .kinetic{height:auto}
html:not(.gsap-enabled) .kinetic__pin{position:relative;min-height:78svh;height:auto;padding:100px 0}
@media(max-width:450px){
  .about__grid{grid-template-columns:minmax(0,1fr)}
  .about__grid>*{min-width:0}
  .about__left h2{font-size:clamp(58px,16vw,80px)}
  .timeline strong{overflow-wrap:anywhere}
}

/* V3.1: compositing hygiene — preserve artwork without moving broad blur layers. */
.celestial__backlight,.celestial__aura{filter:none}
.celestial__cloud{mix-blend-mode:normal}
@media (prefers-reduced-motion:reduce){.celestial{will-change:auto}}

/* Progressive enhancement: do not pin the statement if GSAP is unavailable. */
html:not(.gsap-enabled) .statement { height: auto; }
html:not(.gsap-enabled) .statement__sticky { position: relative; min-height: 65svh; height: auto; padding-block: 95px; }