/* Shared blog motion: expressive hero, quiet editorial entrances and consistent cards.
   No new JavaScript, timer, scroll listener, font, or raster image. */
.hero .hero-copy{animation:none}
.hero .hero-title-line{display:block;animation:home-title-arrive 780ms cubic-bezier(.18,.76,.25,1) both}
.hero .hero-title-line:first-child{color:var(--text);animation-delay:80ms}
.hero .hero-title-line:last-child{animation-delay:180ms}
.hero .role,.hero .intro,.hero .hero-links{animation:home-copy-arrive 700ms cubic-bezier(.18,.76,.25,1) both}
.hero .role{animation-delay:240ms}.hero .intro{animation-delay:310ms}.hero .hero-links{animation-delay:370ms}
.hero:after{animation:none;opacity:0}
.hero-light-traces{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:hidden;color:var(--cyan)}
.hero-light-traces path{vector-effect:non-scaling-stroke;stroke:currentColor;stroke-width:1;stroke-linecap:round}
.trace-base{opacity:.16}.trace-pulse{opacity:0;animation:home-trace-fade 1800ms ease-out 120ms 1}
.trace-pulse path{stroke:#d3b7ff;stroke-width:1.5;stroke-dasharray:.18 .82;stroke-dashoffset:.18;animation:home-trace-pass 1600ms cubic-bezier(.2,.5,.35,1) 140ms 1 both}
.trace-pulse .trace-b{animation-delay:280ms}.trace-pulse .trace-c{animation-delay:120ms}
@keyframes home-title-arrive{from{opacity:.3;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes home-copy-arrive{from{opacity:.5;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes home-trace-pass{to{stroke-dashoffset:-1}}
@keyframes home-trace-fade{0%,100%{opacity:0}15%,72%{opacity:.8}}
/* Consistent cards on the homepage and tag listings. Body prose stays still. */
.post-card{isolation:isolate;transition:transform 240ms cubic-bezier(.2,.7,.3,1),border-color 240ms ease}
.post-card:before{top:0;left:0;width:100%;height:2px;transform:scaleX(.2);transform-origin:left;background:linear-gradient(90deg,#8959c5,#d9bdff 55%,#8959c5);opacity:0;animation:none;transition:transform 420ms cubic-bezier(.2,.7,.3,1),opacity 180ms ease}
.post-card:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(145deg,rgb(181 138 255 / .075),transparent 58%);opacity:0;transition:opacity 240ms ease}
.post-card .card-art img{transition:transform 420ms cubic-bezier(.2,.7,.3,1)}
.post-card:focus-within{border-color:#c4a0ff;transform:translateY(-4px)}
.post-card:focus-within:before{opacity:.9;transform:scaleX(1)}
.post-card:focus-within:after{opacity:1}
.post-card a:focus-visible{outline-offset:-4px}
.post-card h3 a:focus-visible,.post-card .read-link:focus-visible{outline-offset:5px}
@media(hover:hover) and (pointer:fine){
  .post-card:hover{border-color:#b58aff;transform:translateY(-4px)}
  .post-card:hover:before{opacity:.9;transform:scaleX(1)}
  .post-card:hover:after{opacity:1}
  .post-card:hover .card-art img{transform:scale(1.015)}
}
@media(hover:none){
  .post-card:active{border-color:#c4a0ff}
  .post-card:focus-within{transform:none}
}
@media(max-width:699px){
  .hero .hero-title-line{animation-duration:640ms}
  .hero-light-traces{width:100%;opacity:.72}
}
/* System and saved preferences both keep all content visible and still. */
.experience[data-motion=off] .hero-title-line,.experience[data-motion=off] .hero .role,.experience[data-motion=off] .hero .intro,.experience[data-motion=off] .hero .hero-links{animation:none;opacity:1;transform:none}
.experience[data-motion=off] .trace-pulse{animation:none;opacity:0}
.experience[data-motion=off] .post-card:focus-within{transform:none}
@media(prefers-reduced-motion:reduce){
  .hero .hero-title-line,.hero .role,.hero .intro,.hero .hero-links{animation:none;opacity:1;transform:none}
  .trace-pulse{animation:none;opacity:0}
  .post-card:focus-within{transform:none}
}

/* A stronger landing-page opening, followed by one slow orbital accent.
   Geometry remains behind the opaque portrait and never traverses the copy. */
.hero .hero-title-line{animation-duration:940ms}
.hero .hero-title-line:first-child{animation-delay:80ms}
.hero .hero-title-line:last-child{animation-delay:220ms}
.hero .role{animation-delay:360ms}.hero .intro{animation-delay:430ms}.hero .hero-links{animation-delay:500ms}
.hero .portrait-stage{animation:blog-portrait-open 1200ms cubic-bezier(.15,.72,.25,1) 120ms both}
.hero-orbital-graphic{position:absolute;inset:0;width:100%;height:100%;overflow:visible;color:#c4a0ff;opacity:.8;pointer-events:none}
.hero-orbital-graphic g{transform-origin:300px 300px}
.hero-orbit-counter{animation:blog-orbit-counter 46s linear infinite;animation-play-state:paused}
.hero-orbit-sweep{animation:blog-orbit-open 1800ms cubic-bezier(.2,.65,.3,1) 220ms both}
.hero .portrait-stage[data-fx-visible=true] .hero-orbit-counter{animation-play-state:running}
.hero-light-traces .trace-pulse{animation-duration:2400ms;animation-delay:100ms}
.hero-light-traces .trace-pulse path{animation-duration:2050ms}
.hero .primary{transition:transform 220ms ease,background-color 220ms ease}
.hero .primary:focus-visible{transform:translateY(-2px)}
@media(hover:hover) and (pointer:fine){.hero .primary:hover{transform:translateY(-2px)}}
@keyframes blog-portrait-open{from{opacity:.4;transform:translateY(20px) scale(.975)}to{opacity:1;transform:none}}
@keyframes blog-orbit-counter{to{transform:rotate(-360deg)}}
@keyframes blog-orbit-open{from{opacity:0;transform:rotate(-120deg)}to{opacity:.8;transform:rotate(30deg)}}

/* One short cue when an article or section opens. Paragraphs are never animated. */
.article-header>h1,.tag-page>header>h1,.about-profile .about-copy>h1,.privacy-page>h1{animation:blog-heading-open 680ms cubic-bezier(.18,.76,.25,1) 90ms both}
.article-header{position:relative}
.article-header:after{content:'';display:block;width:88px;height:2px;margin-top:22px;background:linear-gradient(90deg,#c4a0ff,#745096);transform-origin:left;animation:blog-header-signal 850ms cubic-bezier(.2,.7,.3,1) 160ms both}
.longform>.post-cover{animation:blog-cover-open 780ms cubic-bezier(.18,.76,.25,1) 180ms both}
.article-toc a,.post-tags a,.tag-catalog a{transition:background-color 180ms ease,border-color 180ms ease,color 180ms ease}
.career-card summary .career-toggle{transition:transform 220ms ease}
.career-card[open] summary .career-toggle{transform:rotate(180deg)}
@keyframes blog-heading-open{from{opacity:.45;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes blog-header-signal{from{opacity:.2;transform:scaleX(.25)}to{opacity:.85;transform:scaleX(1)}}
@keyframes blog-cover-open{from{opacity:.7;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:699px){
 .hero .hero-title-line{animation-duration:720ms}
 .hero .portrait-stage{animation-duration:900ms}
 .hero-orbital-graphic{opacity:.62}
 .hero-orbit-counter{animation-duration:60s}
 .hero-orbit-sweep{animation-duration:1500ms}
 .article-header:after{width:64px;margin-top:18px}
 .article-header>h1,.tag-page>header>h1,.about-profile .about-copy>h1,.privacy-page>h1{animation-duration:560ms}
}
/* All new effects follow the site's existing pause and system preference. */
.experience[data-motion=off] .hero .primary,.experience[data-motion=off] .hero-orbital-graphic g,.experience[data-motion=off] .hero .portrait-stage,.experience[data-motion=off] .article-header>h1,.experience[data-motion=off] .longform>.post-cover{transform:none}
@media(prefers-reduced-motion:reduce){
 .hero .primary,.hero-orbital-graphic g,.hero .portrait-stage,.article-header>h1,.longform>.post-cover{transform:none!important}
 .hero-orbit-sweep{opacity:.55}
 .article-header:after{transform:none;opacity:.85}
}
@media print{.hero-orbital-graphic,.hero-light-traces,.article-header:after{display:none!important}}

/* Low-frequency ambience uses transform/opacity only, not animated blur. */
.hero .portrait-atmosphere{animation:blog-ambient-breathe 12s ease-in-out infinite alternate;animation-play-state:paused}
.hero .portrait-stage[data-fx-visible=true] .portrait-atmosphere{animation-play-state:running}
.hero .hero-orbit-sweep{animation-play-state:paused}
.hero .portrait-stage[data-fx-visible=true] .hero-orbit-sweep{animation-play-state:running}
@keyframes blog-ambient-breathe{from{opacity:.58;transform:scale(.985)}to{opacity:1;transform:scale(1.025)}}
/* Entry accents follow normal scrolling; no wheel/touch interception or frame loop. */
.article-section,.technical-toolbox,.career-intro,.personal-project{position:relative}
.article-section:before,.technical-toolbox:before,.career-intro:before,.personal-project:before{content:'';position:absolute;left:0;top:-1px;width:88px;height:2px;pointer-events:none;background:linear-gradient(90deg,#c4a0ff,transparent);opacity:.6;transform-origin:left}
.article-section[data-blog-motion=in]:before,.technical-toolbox[data-blog-motion=in]:before,.career-intro[data-blog-motion=in]:before,.personal-project[data-blog-motion=in]:before{animation:blog-section-signal 1050ms cubic-bezier(.18,.76,.25,1) backwards}
.post-card[data-blog-motion=in]{animation:blog-card-arrive 620ms cubic-bezier(.18,.76,.25,1) backwards}
@keyframes blog-section-signal{from{opacity:.15;transform:scaleX(.1)}to{opacity:.6;transform:scaleX(1)}}
@keyframes blog-card-arrive{from{opacity:.72;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
/* If observation is unavailable, keep ambient layers static rather than run unseen. */
.experience.no-motion-observer .hero .hero-orbit-counter,.experience.no-motion-observer .hero .portrait-atmosphere{animation:none!important}
@media(max-width:699px){
 .hero .portrait-atmosphere{animation-duration:16s}
 .post-card[data-blog-motion=in]{animation-duration:480ms}
 .article-section:before,.technical-toolbox:before,.career-intro:before,.personal-project:before{width:64px}
}
@media print{.article-section:before,.technical-toolbox:before,.career-intro:before,.personal-project:before{display:none!important}}
.experience.no-motion-observer .hero .core-ring,.experience.no-motion-observer .hero .ai-pod{animation:none!important}