/* Avatar — motion layer for all pages, 2026-10-27 (Claude).
   Loaded after site.css. Everything here is progressive: pages read fine without it,
   without JS, and with prefers-reduced-motion (the whole layer is gated below). */

/* View transitions between pages (Chrome 126+, Safari 18.2+; others ignore). */
@view-transition{navigation:auto}
@keyframes vt-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px)}}

/* Reading progress line, driven by JS (--progress) or by scroll timelines where supported. */
.read-progress{position:fixed;top:0;left:0;z-index:70;width:100%;height:2px;background:#fff;mix-blend-mode:difference;transform:scaleX(var(--progress,0));transform-origin:left;pointer-events:none}

/* Sticky table of contents with a live current-section marker. */
.page-toc{position:sticky;top:0;z-index:30;background:#0c0c0de6;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.page-toc a{position:relative;padding-bottom:5px;transition:color .3s}
.page-toc a::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.page-toc a[aria-current=true]{color:#fff}
.page-toc a[aria-current=true]::after{transform:scaleX(1)}

/* Section index follows the reader; its underline draws when the section enters view. */
.content-section .section-index{position:sticky;top:72px;align-self:start}
.section-index span{display:inline-block;position:relative;padding-bottom:12px}
.section-index span::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;opacity:.6;transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.2,.8,.2,1) .15s}
.content-section.in-view .section-index span::after{transform:scaleX(1)}

/* Hover language shared by rows, cards, items and buttons. */
.detail-item{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.js .detail-item.in-view:hover{transform:translateX(6px)}
.detail-plus{transition:transform .4s cubic-bezier(.2,.8,.2,1),color .3s}
.detail-item:hover .detail-plus{transform:rotate(90deg);color:#fff}
.paper .detail-item:hover .detail-plus{color:#111}
.card-arrow,.directory-row>span:last-child,.text-link .circle-arrow,.action span{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.link-card:hover .card-arrow,.directory-row:hover>span:last-child,.text-link:hover .circle-arrow,.action:hover span{transform:translate(4px,-4px)}
.link-card{overflow:hidden;transition:background .35s,transform .35s,border-color .35s}
.link-card::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),#ffffff14,transparent 62%);transition:opacity .4s}
.on-paper .link-card::after{background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),#00000010,transparent 62%)}
.link-card:hover::after{opacity:1}
.link-card:hover{border-color:#6a6a70}
.on-paper .link-card:hover{border-color:#8a8a86}
.directory-row{position:relative;transition:padding-left .4s cubic-bezier(.2,.8,.2,1)}
.directory-row:hover{padding-left:10px}
.action,.contact-circle,.chapter-button{transition:transform .5s cubic-bezier(.2,.8,.2,1),background .25s,color .25s}
.contact-section{overflow:hidden}
.contact-circle{position:relative}
.contact-circle::before{content:'';position:absolute;inset:-12px;border-radius:50%;border:1px dashed #0c0c0d66;animation:spin 28s linear infinite}
.contact-circle:hover{transform:scale(1.04)}
.contact-circle:hover::before{animation-duration:9s}
.hero-photo img{transition:filter .9s ease,transform 1.4s cubic-bezier(.2,.8,.2,1)}
.hero-photo:hover img{filter:grayscale(0);transform:scale(1.03)}
.faq-list summary span{transition:transform .4s cubic-bezier(.2,.8,.2,1)}

/* Smooth FAQ opening where the browser supports animating details content. */
@supports (interpolate-size:allow-keywords){
 :root{interpolate-size:allow-keywords}
 .faq-list details::details-content{block-size:0;overflow:clip;opacity:0;transition:block-size .45s cubic-bezier(.2,.8,.2,1),opacity .35s,content-visibility .45s allow-discrete}
 .faq-list details[open]::details-content{block-size:auto;opacity:1}
}

/* Service artwork: plates sit on CSS variables so they can assemble and breathe. */
.structure i{--z:0px;transform:translateZ(var(--z))}
.structure i:nth-child(2){--z:48px}
.structure i:nth-child(3){--z:96px}
.structure i:nth-child(4){--z:144px}
.product-art::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;background:radial-gradient(420px circle at var(--ax,50%) var(--ay,50%),#ffffff12,transparent 60%);transition:opacity .5s}
.product-art:hover::before{opacity:1}

/* Everything that moves on its own stays inside the motion gate. */
@media (prefers-reduced-motion:no-preference){
 ::view-transition-old(root){animation:vt-out .22s ease both}
 ::view-transition-new(root){animation:vt-in .5s cubic-bezier(.2,.8,.2,1) both}

 @keyframes rise{from{opacity:0;transform:translateY(26px)}}
 @keyframes rise-clip{from{opacity:0;transform:translateY(34px);clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 -20% 0)}}
 @keyframes art-in{from{opacity:0;transform:scale(.94) translateY(20px)}}
 @keyframes plate-in{from{opacity:0;transform:translateZ(-60px)}to{opacity:1;transform:translateZ(var(--z))}}
 @keyframes breathe{50%{transform:translateZ(calc(var(--z) + 7px))}}
 @keyframes spin{to{transform:rotate(360deg)}}
 @keyframes art-drift{to{transform:translateY(-90px)}}
 @keyframes mark-drift{from{transform:translateY(60px) rotate(-6deg)}to{transform:translateY(-120px) rotate(4deg)}}

 /* Hero entrance: copy rises in sequence, artwork assembles. */
 .motion .page-hero .hero-copy>*{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
 .motion .page-hero .hero-copy>:nth-child(1){animation-delay:.05s}
 .motion .page-hero .hero-copy>:nth-child(2){animation-delay:.12s}
 .motion .page-hero .hero-copy>h1{animation:rise-clip 1.15s cubic-bezier(.2,.7,.2,1) both .18s}
 .motion .page-hero .hero-copy>:nth-child(4){animation-delay:.42s}
 .motion .page-hero .hero-copy>:nth-child(5){animation-delay:.56s}
 .motion .page-hero .product-art,.motion .page-hero .hero-photo,.motion .page-hero .editorial-mark{animation:art-in 1.2s cubic-bezier(.2,.8,.2,1) both .2s}
 .motion .structure i{animation:plate-in 1.1s cubic-bezier(.2,.8,.2,1) both,breathe 7s ease-in-out infinite 1.3s}
 .motion .structure i:nth-child(1){animation-delay:.35s,1.3s}
 .motion .structure i:nth-child(2){animation-delay:.47s,1.6s;animation-duration:1.1s,8s}
 .motion .structure i:nth-child(3){animation-delay:.59s,1.9s;animation-duration:1.1s,9s}
 .motion .structure i:nth-child(4){animation-delay:.71s,2.2s;animation-duration:1.1s,10s}
 .motion .structure b{animation:rise 1s both .95s}
 .motion .page-toc{animation:rise .8s cubic-bezier(.2,.7,.2,1) both .5s}
 .motion .directory-head{animation:rise .9s cubic-bezier(.2,.7,.2,1) both .1s}

 /* Scroll-driven drift for artwork and editorial marks (browsers with scroll timelines). */
 @supports (animation-timeline:scroll()){
  @media (min-width:901px){.motion .page-hero .product-art{animation:art-in 1.2s cubic-bezier(.2,.8,.2,1) both .2s,art-drift linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 900px}}
  .motion .page-hero .editorial-mark{animation:art-in 1.2s cubic-bezier(.2,.8,.2,1) both .2s,mark-drift linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 1200px}
 }

 /* Staggered reveals: JS numbers siblings with --i. */
 .js .reveal{transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:min(calc(var(--i,0) * 70ms),480ms)}
 .js .detail-item.reveal{transform:translateY(22px) translateX(0)}
 .js .detail-item.reveal.in-view{transform:none}
 .js .directory-row.reveal{transition-delay:min(calc(var(--i,0) * 45ms),360ms)}
 .js .section-body>h2.reveal{transform:translateY(30px);letter-spacing:-.01em;transition:opacity .7s,transform 1s cubic-bezier(.2,.8,.2,1),letter-spacing 1.1s cubic-bezier(.2,.8,.2,1)}
 .js .section-body>h2.reveal.in-view{transform:none;letter-spacing:-.045em}
 .js .section-intro.reveal{transition-delay:.18s}
}

/* Layout guards. */
@media (max-width:650px){
 .content-section .section-index{position:static}
 .page-toc{position:static;backdrop-filter:none}
 .contact-circle::before{display:none}
 .js .detail-item.in-view:hover,.directory-row:hover{transform:none;padding-left:0}
}
@media (hover:none){
 .link-card::after,.product-art::before{display:none}
 .js .detail-item.in-view:hover{transform:none}
}