/* Cyan ink, polished edges and a single, shared ease. */
:root { --motion-ease: cubic-bezier(.16,1,.3,1); --motion-spring: cubic-bezier(.22,1.35,.4,1); }
.action-button { border-radius: 2px; transition: color .3s,border-color .35s,box-shadow .5s,transform .2s; }
.action-button::before,.action-button::after { display: none; }
.action-button .action-fill { position: absolute; inset: -1px; z-index: -1; pointer-events: none; background: linear-gradient(115deg,#b3f4ff,#36d7ef 70%,#20aec8); clip-path: circle(0% at var(--entry-x,50%) var(--entry-y,50%)); transition: clip-path .65s var(--motion-ease); }
.solid-button.action-button .action-fill { background: linear-gradient(120deg,#f2ffff,#adf2fc); }
.action-label,.action-icon { position: relative; z-index: 1; }
.action-icon { display: inline-grid; place-items: center; min-width: 20px; transition: transform .65s var(--motion-spring)!important; }
.action-button:focus-visible { color: #06151c; border-color: #baf6ff; }
.action-button:focus-visible .action-fill { clip-path: circle(150% at var(--entry-x,50%) var(--entry-y,50%)); }
.action-button:active { transform: translateY(1px) scale(.984); box-shadow: inset 0 3px 14px #0003; }
.roll-word { display: inline-flex; line-height: 1.3; vertical-align: middle; }
.roll-slot { display: inline-block; overflow: hidden; }
.roll-letter { display: inline-block; position: relative; transition: transform .55s var(--motion-ease); transition-delay: var(--letter-delay); }
.roll-letter::after { content: attr(data-echo); position: absolute; inset: 105% 0 auto; color: var(--cyan); }
a:focus-visible .roll-letter,.project-image:focus-visible .roll-letter { transform: translateY(-105%); }
.latin-title .title-line { display: inline-block; overflow: clip; line-height: 1.12; padding-block: .03em .1em; margin-block: -.03em -.1em; color: inherit; vertical-align: bottom; }
.latin-title .title-letter { display: inline-block; color: inherit; }
.latin-title .title-stop { color: var(--cyan); }
.type-ready .title-letter { transform: translateY(110%) rotate(5deg); opacity: 0; transition: transform 1s var(--motion-ease),opacity .6s; transition-delay: var(--letter-delay); }
.type-ready.type-visible .title-letter { transform: none; opacity: 1; }
.service-card::after { content: ''; position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none; background: radial-gradient(ellipse at var(--surface-x,50%) var(--surface-y,25%),#9beeff22,transparent 65%),linear-gradient(var(--light-angle,120deg),transparent 28%,#d5fbff0c 48%,transparent 63%); box-shadow: inset 0 0 0 1px #85eaff6b,inset 0 1px 0 #d4fdff85; transition: opacity .5s; }
.service-text,.circle-arrow { z-index: 1; }
.service-card .circle-arrow { background: #091a2499; backdrop-filter: blur(8px); box-shadow: inset 0 1px 0 #d2faff35; transition: color .35s,background .35s,border-color .35s,transform .65s var(--motion-spring),box-shadow .5s; }
.service-card:focus-visible::after { opacity: 1; }
.service-card:focus-visible .circle-arrow { background: var(--cyan); color: var(--ink); }
.hero-link .round-link { position: relative; background: #0d263b50; backdrop-filter: blur(10px); box-shadow: inset 0 1px 1px #e2fbff42,inset 0 -2px 5px #020b13a0; }
.hero-link .round-link::before,.play-symbol::before { content: ''; position: absolute; inset: -5px; border: 1px solid #92eaff55; border-radius: inherit; opacity: 0; transform: scale(.88); transition: opacity .5s,transform .7s var(--motion-ease); }
.hero-link:focus-visible .round-link::before,.reel-poster:focus-visible .play-symbol::before { opacity: 1; transform: scale(1); }
.play-symbol { position: relative; background: #13293885; backdrop-filter: blur(16px); box-shadow: inset 0 2px 2px #d9faff66,inset 0 -5px 12px #01182255,0 8px 40px #01081233; }
.reel-play { transition: transform .85s var(--motion-ease); }
.project-image::after,.kusabi-film-button::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; box-shadow: inset 0 0 0 1px #ccf7ff90; background: radial-gradient(ellipse at var(--surface-x,50%) var(--surface-y,50%),#c4f6ff15,transparent 60%); transition: opacity .6s; }
.project-open { border: 1px solid #a0dce63b; backdrop-filter: blur(12px); padding: 12px 15px; }
.project-image .project-open .roll-letter::after { color: #06151c; }
.reel-poster:focus-visible .play-symbol { background: var(--cyan); color: #06151c; }
@media(hover:hover) and (pointer:fine) {
  .action-button:hover { color: #06151c; background-color: transparent; border-color: #baf6ff; box-shadow: 0 8px 30px #23d3ee14; }
  .solid-button.action-button:hover { background-color: var(--cyan); }
  .action-button:hover .action-fill { clip-path: circle(150% at var(--entry-x,50%) var(--entry-y,50%)); }
  .action-button:hover .action-icon { transform: translate3d(calc(3px + var(--pull-x,0px)),var(--pull-y,0px),0); }
  .desktop-nav a:hover .roll-letter,.mobile-nav a:hover .roll-letter,.hero-link:hover .roll-letter,.project-image:hover .roll-letter { transform: translateY(-105%); }
  .service-card:hover::after { opacity: 1; }
  .service-card:hover .circle-arrow { transform: translate3d(var(--pull-x,0px),var(--pull-y,0px),0); box-shadow: 0 0 28px #23d3ee30,inset 0 1px 0 #d2faff80; }
  .hero-link:hover .round-link::before,.reel-poster:hover .play-symbol::before { opacity: 1; transform: scale(1); }
  .hero-link:hover .round-link { background: #23d3ee24; color: #baf6ff; }
  .hero-link .round-link svg { transform: translate3d(var(--pull-x,0px),var(--pull-y,0px),0); transition: transform .65s var(--motion-spring); }
  .reel-poster:hover .reel-play { transform: translate3d(calc(var(--pull-x,0px) * 2),calc(var(--pull-y,0px) * 2),0); }
  .reel-poster:hover .play-symbol { background: #9deaffd9; box-shadow: inset 0 2px 2px #fff9,0 0 55px #49ddff30; }
  .project-image:hover::after,.kusabi-film-button:hover::after { opacity: 1; }
}
@media(prefers-reduced-motion:reduce) {
  .action-button,.action-button .action-fill,.action-button .action-icon,.roll-letter,.title-letter,.reel-play,.hero-link .round-link svg,.service-card .circle-arrow { transition: none!important; transform: none!important; }
  .type-ready .title-letter { opacity: 1; }
  .hero-link .round-link::before,.play-symbol::before { display: none; }
  .reel-poster:hover .reel-play,.service-card:hover .circle-arrow { transform: none; }
}