/*
 * LANH PORTFOLIO — MOTION EDITION
 * Additional motion only. Original styles.css is preserved.
 * Motions are decorative, intentionally low-amplitude, and respect
 * prefers-reduced-motion and coarse-pointer/mobile screens.
 */
:root{--motion-ease:cubic-bezier(.22,1,.36,1)}

/* The original hero composition remains unchanged: elements simply arrive
   on subtly different beats, then retain their original positions. */
@media(prefers-reduced-motion:no-preference){
  .hero-intro>.eyebrow{animation:lanh-rise .8s .16s var(--motion-ease) both}
  .hero-intro>h1{animation:lanh-rise .88s .30s var(--motion-ease) both}
  .hero-intro>.hero-name{animation:lanh-title 1.1s .45s var(--motion-ease) both}
  .hero-location{animation:lanh-rise .75s .22s var(--motion-ease) both}
  .hero-summary .button{animation:lanh-button-in .78s .95s var(--motion-ease) both}
  .hero-portrait>img{animation:lanh-portrait-breathe 7s 1.8s ease-in-out infinite alternate}
  .hero-portrait:after{animation:lanh-portrait-halo 8s 2s ease-in-out infinite alternate}
  .wordmark-star{display:inline-block;transition:rotate .65s var(--motion-ease)}
  .wordmark:hover .wordmark-star{rotate:120deg}
  .ticker>div{animation-duration:34s}
}
@keyframes lanh-rise{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
@keyframes lanh-title{from{opacity:0;translate:0 32px;filter:blur(5px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes lanh-button-in{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
@keyframes lanh-portrait-breathe{0%{translate:0 0}100%{translate:0 -7px}}
@keyframes lanh-portrait-halo{0%{opacity:.75}100%{opacity:1}}

/* Reveal elements only when the companion script has attached an observer.
   Without JavaScript all content stays visible and accessible. */
.motion-ready .motion-enter{
  transition:opacity .82s var(--motion-ease),translate .82s var(--motion-ease),filter .82s var(--motion-ease);
  transition-delay:var(--motion-delay,0ms);
}
.motion-ready .motion-enter:not(.motion-visible){opacity:0;translate:0 24px;filter:blur(4px)}
.motion-ready .motion-enter.motion-visible{opacity:1;translate:0 0;filter:blur(0)}
.motion-ready .motion-enter.motion-instant{transition-duration:0s}

/* Gentle parallax on photography (translate is independent from hover scale). */
@media(prefers-reduced-motion:no-preference){
  .about-image>img,.campus-photo>img{
    translate:0 var(--motion-photo-y,0px);
    transition:translate .24s linear,scale .7s var(--motion-ease);
  }
}

/* Interactive project cards: micro 3D tilt, lift and slightly zoomed covers. */
.project-card{transform-style:preserve-3d}
.project-visual>img{transition:scale .85s var(--motion-ease)}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .project-card.visible:hover{
    transform:perspective(1200px) translateY(-7px) rotateX(var(--motion-tilt-x,0deg)) rotateY(var(--motion-tilt-y,0deg));
  }
  .project-card:hover .project-visual>img{scale:1.04}
  .project-card:hover .project-arrow{box-shadow:0 6px 20px #10101230}
  .button,.nav-contact,.back-top{
    translate:var(--motion-magnet-x,0px) var(--motion-magnet-y,0px);
    transition:translate .35s var(--motion-ease),transform .3s ease,box-shadow .3s ease,background .3s ease;
  }
  .button-pink:hover{box-shadow:0 10px 30px #e790ad40}
  .site-header nav a:not(.nav-contact){position:relative}
  .site-header nav a:not(.nav-contact):after{
    content:'';position:absolute;inset:auto 0 -6px;height:2px;border-radius:2px;
    background:var(--pink);transform:scaleX(0);transform-origin:left;
    transition:transform .42s var(--motion-ease);pointer-events:none;
  }
  .site-header nav a:not(.nav-contact):hover:after,
  .site-header nav a:not(.nav-contact):focus-visible:after{transform:scaleX(1)}
  .text-link span,.project-link span,.back-top span,.nav-contact span{
    display:inline-block;transition:translate .35s var(--motion-ease),rotate .35s var(--motion-ease);
  }
  .text-link:hover span,.project-link:hover span,.back-top:hover span,.nav-contact:hover span{translate:4px -3px}
  .about-image:hover>img{scale:1.018}
  .tool-logo:hover,.tool-logo:focus-visible{transition-duration:.35s}
}

/* A faint moving light follows the pointer inside the existing dark hero. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .hero{background-image:radial-gradient(470px circle at var(--motion-spot-x,60%) var(--motion-spot-y,40%),#ffadd313,transparent 72%)}
}

/* Case study reading flow. Existing hash routing and native dialog are intact. */
@media(prefers-reduced-motion:no-preference){
  #case-dialog[open]::backdrop{animation:lanh-backdrop .35s ease-out both}
  #case-dialog[open] .case-toolbar{animation:lanh-toolbar .45s var(--motion-ease) both}
  .motion-ready .case-metric.motion-enter:not(.motion-visible){translate:0 15px}
  .case-gallery figure img{transition:scale .7s var(--motion-ease)}
  .case-gallery figure:hover img{scale:1.012}
  .reading-progress>span{box-shadow:0 0 9px #f4aac5aa}
}
@keyframes lanh-backdrop{from{opacity:0}to{opacity:1}}
@keyframes lanh-toolbar{from{opacity:0;translate:0 -14px}to{opacity:1;translate:0 0}}

/* Small-screen layout remains identical, without cursor-only interactions. */
@media(max-width:800px){
  .motion-ready .motion-enter:not(.motion-visible){translate:0 15px;filter:none}
}
@media(prefers-reduced-motion:reduce){
  .motion-ready .motion-enter,.motion-ready .motion-enter:not(.motion-visible){
    opacity:1!important;translate:none!important;filter:none!important;transition:none!important;
  }
  .hero-portrait>img{animation:none!important;translate:none!important}
  .about-image>img,.campus-photo>img{translate:none!important}
  .project-card{transform-style:flat}
}