/*
  Concept 02 / Motion Edition
  Layered on top of the original stylesheet so the core layout stays editable.
  JS enhancement: content remains fully readable if motion.js is unavailable.
*/
:root{--motion-ease:cubic-bezier(.22,1,.36,1)}

/* Site controls and personal details */
.motion-toggle{width:35px;height:35px;display:grid;place-items:center;border:1px solid var(--line);background:transparent;border-radius:50%;color:var(--lime);font-size:21px;line-height:1;cursor:pointer;transition:background .25s,border-color .25s,transform .4s var(--motion-ease)}
.motion-toggle:hover{background:var(--bg3);border-color:var(--lime);transform:rotate(45deg)}
.motion-toggle[aria-pressed="false"]{color:var(--muted);opacity:.65}
.motion-toggle:disabled{cursor:not-allowed;opacity:.55}
.local-clock{color:var(--ink);font-size:10px;letter-spacing:.055em;border-left:1px solid var(--line);padding-left:10px;font-variant-numeric:tabular-nums}
.hero-personal{margin-top:26px;display:flex;align-items:center;gap:10px;color:var(--ink);font:600 11px/1.8 var(--display);letter-spacing:.015em;max-width:540px;opacity:.75}
.personal-mark{font-size:20px;font-weight:400;color:var(--lime)}
.hero-personal .person-divider{color:var(--lime)}

/* Hero is its own tiny interactive creative playground */
.hero:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 430px 350px at var(--pointer-x,75%) var(--pointer-y,44%),color-mix(in srgb,var(--lime) 8%,transparent),transparent 75%);opacity:.7;z-index:1;transition:opacity .5s}
.hero .hero-noise{z-index:0}
.hero-art{will-change:transform;transition:transform .55s var(--motion-ease)}
.orbital{animation:orbit-one 34s linear infinite}
.orbital.two{animation:orbit-two 43s linear infinite reverse}
.orbital.three{animation:orbit-three 38s linear infinite}
.orbit-glow{animation:orb-breathe 6.5s ease-in-out infinite alternate}
.orbit-spark{animation:spark-drift 4s ease-in-out infinite alternate}
.orbit-spark.s2{animation-delay:-2.3s}
.floating-ui{animation:float-ui 6s ease-in-out infinite alternate}
.floating-palette{animation:float-palette 5.2s ease-in-out infinite alternate}
@keyframes orbit-one{to{transform:rotate(333deg)}}
@keyframes orbit-two{to{transform:rotate(408deg) scaleX(.44)}}
@keyframes orbit-three{to{transform:rotate(464deg) scaleX(.5)}}
@keyframes orb-breathe{from{box-shadow:0 0 70px #b9ec4a21,inset -30px -30px 54px #314b2d66;filter:hue-rotate(var(--phase-hue,0deg)) saturate(.9)}to{box-shadow:0 0 145px #b9ec4a55,inset -30px -30px 54px #314b2d55;filter:hue-rotate(var(--phase-hue,0deg)) saturate(1.12)}}
@keyframes spark-drift{to{translate:0 -14px;rotate:23deg}}
@keyframes float-ui{to{transform:translate3d(3px,-14px,0) rotate(5deg)}}
@keyframes float-palette{to{transform:translate3d(-5px,13px,0) rotate(-5deg)}}
.hero-art[data-phase="1"] .orbit-glow{--phase-hue:38deg}
.hero-art[data-phase="2"] .orbit-glow{--phase-hue:-25deg}
.hero-art[data-phase="3"] .orbit-glow{--phase-hue:110deg}

/* Progressive text entrance: no effect until JS has bound animations. */
.js-motion:not(.motion-off) .hero h1 .line{opacity:0;transform:translate3d(0,58px,0);filter:blur(7px);transition:transform 1.05s var(--motion-ease),opacity 1.05s var(--motion-ease),filter 1.05s var(--motion-ease)}
.js-motion:not(.motion-off) .hero.hero-entered h1 .line{opacity:1;transform:translate3d(0,0,0);filter:blur(0)}
.js-motion:not(.motion-off) .hero h1 .line:nth-child(1){transition-delay:.09s}
.js-motion:not(.motion-off) .hero h1 .line:nth-child(2){transition-delay:.22s}
.js-motion:not(.motion-off) .hero h1 .line:nth-child(3){transition-delay:.35s}
.js-motion:not(.motion-off) .hero .hero-desc,.js-motion:not(.motion-off) .hero .hero-personal{opacity:0;transform:translateY(20px);transition:opacity .8s var(--motion-ease),transform .8s var(--motion-ease)}
.js-motion:not(.motion-off) .hero.hero-entered .hero-desc{opacity:1;transform:none;transition-delay:.56s}
.js-motion:not(.motion-off) .hero.hero-entered .hero-personal{opacity:.75;transform:none;transition-delay:.68s}

/* Animated but intentional creative-process microinteraction */
.process-toggle{min-width:240px;max-width:294px;display:flex;align-items:center;gap:13px;border:1px solid var(--line);border-radius:16px;padding:11px 12px;color:var(--ink);background:color-mix(in srgb,var(--bg2) 88%,transparent);text-align:left;cursor:pointer;transition:border-color .25s,background .25s,box-shadow .25s}
.process-toggle:hover{background:var(--bg3);border-color:color-mix(in srgb,var(--lime) 60%,var(--line));box-shadow:0 12px 45px #0002}
.process-symbol{width:43px;height:43px;border-radius:50%;background:var(--lime);color:var(--lime-ink);font:400 34px/1 var(--sans);flex-shrink:0;display:grid;place-items:center;transition:transform .6s var(--motion-ease)}
.process-toggle:hover .process-symbol{transform:rotate(30deg)}
.process-toggle-text{display:flex;flex-direction:column;min-width:0}
.process-mini-label{font:700 8px/1.4 var(--display);letter-spacing:.13em;color:var(--muted)}
.process-toggle-text strong{font:700 14px/1.3 var(--display);letter-spacing:-.035em;white-space:nowrap;margin-top:3px}
.process-toggle-text small{font:500 10px/1.5 var(--sans);color:var(--muted);margin-top:2px}
.process-arrow{margin-left:auto;color:var(--lime);font-size:20px;align-self:flex-start;line-height:1}
.process-toggle.phase-pulse .process-toggle-text{animation:phase-slide .37s var(--motion-ease)}
@keyframes phase-slide{0%{opacity:.25;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}}

/* Section reveals only exist once the observer is ready. */
.js-motion:not(.motion-off) .reveal-item{opacity:0;transform:translate3d(0,34px,0);filter:blur(3px);transition:opacity .82s var(--motion-ease),transform .82s var(--motion-ease),filter .82s var(--motion-ease);transition-delay:var(--reveal-delay,0ms)}
.js-motion:not(.motion-off) .reveal-item.is-visible{opacity:1;transform:translate3d(0,0,0);filter:none}
.js-motion:not(.motion-off) .reveal-item[hidden]{display:none!important}

/* Make interface previews feel tactile; perspective is subtle enough to read. */
@media (hover:hover) and (pointer:fine){
  .project-card{perspective:1200px}
  .project-card .card-visual{transform:perspective(1150px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .45s var(--motion-ease),filter .3s;will-change:transform}
  .project-card .card-visual:after{content:"";position:absolute;inset:0;background:radial-gradient(circle 240px at var(--spot-x,50%) var(--spot-y,50%),#ffffff35,transparent 70%);mix-blend-mode:screen;opacity:0;transition:opacity .4s;pointer-events:none;z-index:11}
  .project-card:hover .card-visual:after{opacity:.75}
  .project-card:hover .card-meta h3{color:var(--lime)}
  .project-card .card-meta h3{transition:color .24s}
  .magnetic{transform:translate3d(var(--mag-x,0px),var(--mag-y,0px),0);transition:transform .28s var(--motion-ease),background .25s,color .25s}
  .magnetic:hover{transform:translate3d(var(--mag-x,0px),var(--mag-y,0px),0)}
}
.project-cursor{position:fixed;top:0;left:0;width:82px;height:82px;display:grid;place-items:center;z-index:95;pointer-events:none;border-radius:50%;background:var(--lime);color:var(--lime-ink);font:700 11px/1.3 var(--display);letter-spacing:.025em;text-align:center;box-shadow:0 10px 35px #0004;opacity:0;transform:translate3d(-200px,-200px,0) scale(.6);transition:opacity .2s,scale .2s;will-change:transform}
.project-cursor.is-active{opacity:1;scale:1}

/* Filter and route feedback */
.filter-btn{transition:background .24s,color .24s,border-color .24s,transform .24s}
.filter-btn:active{transform:scale(.97)}
.case-cover,.about-photo{transition:filter .5s}
.case-cover:hover,.about-photo:hover{filter:brightness(1.045)}
.back-to-top{position:fixed;right:24px;bottom:22px;z-index:85;width:48px;height:48px;display:grid;place-items:center;background:var(--lime);color:var(--lime-ink);font-size:22px;border-radius:50%;border:1px solid color-mix(in srgb,var(--lime) 65%,transparent);box-shadow:0 8px 36px #0004;opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .3s,transform .3s}
.back-to-top.is-active{opacity:1;transform:translateY(0);pointer-events:auto}
.back-to-top:hover{transform:translateY(-4px)}

/* All animation is optional. The visitor can disable it, or ask their OS to. */
body.motion-off *,body.motion-off *:before,body.motion-off *:after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
body.motion-off .reveal-item,body.motion-off .hero h1 .line,body.motion-off .hero .hero-desc,body.motion-off .hero .hero-personal{opacity:1!important;filter:none!important;transform:none!important}
body.motion-off .hero-personal{opacity:.75!important}
body.motion-off .project-cursor{display:none!important}
body.motion-off .hero-art{transform:none!important}
@media (prefers-reduced-motion:reduce){
  .orbital,.orbit-glow,.orbit-spark,.floating-ui,.floating-palette{animation:none!important}
  .js-motion .hero h1 .line,.js-motion .hero .hero-desc,.js-motion .hero .hero-personal,.js-motion .reveal-item{opacity:1!important;filter:none!important;transform:none!important;transition:none!important}
  .project-cursor{display:none!important}
  .project-card .card-visual{transform:none!important}
  .back-to-top{transition:none}
}
@media(max-width:1200px){.process-toggle{min-width:205px}.process-mini-label{font-size:7px}.process-toggle-text strong{font-size:13px}.hero-bottom{gap:17px}.hero-links{gap:16px}}
@media(max-width:900px){.hero-bottom{flex-wrap:wrap}.process-toggle{order:3;min-width:230px;max-width:100%}.hero-links{margin-left:auto}.local-clock{display:none}}
@media(max-width:750px){.hero-personal{font-size:10px;max-width:350px;margin-top:15px}.process-toggle{order:3;width:100%;max-width:370px}.hero .wrap{min-height:790px}.hero-content{min-height:490px}.hero-bottom{align-items:stretch}.hero-links{margin-left:0}.hero-art{will-change:auto}.back-to-top{width:41px;height:41px;bottom:17px;right:16px}}
@media(max-width:470px){.hero .wrap{min-height:772px}.hero-content{min-height:480px;padding-top:60px}.process-toggle{min-height:66px}.process-toggle-text strong{font-size:14px}.hero-personal{font-size:9px}.hero-personal .personal-mark{display:none}.header-right{gap:10px}.motion-toggle{width:30px;height:30px;font-size:19px}.hero h1{font-size:clamp(53px,12.75vw,78px)}}