/* Homepage only: native motion, no animation framework. */
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { --accent: #fff; }
button, input, textarea, .grax_tm_mobile_menu .dropdown a, .grax_tm_button a { font-family: 'Space Grotesk', sans-serif !important; }
button { cursor: pointer; }
a:focus-visible, button:focus-visible { outline: 3px solid currentColor; outline-offset: 5px; }
.scroll-progress { position: fixed; inset: 0 0 auto; height: 3px; background: var(--accent); z-index: 10001; transform: scaleX(0); transform-origin: left; pointer-events: none; }
.grax_tm_topbar { padding: 28px 0; transition: padding .3s ease; }
.grax_tm_topbar.is-scrolled { padding: 16px 0; }
.grax_tm_topbar .menu a { position: relative; }
.grax_tm_topbar .menu a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.grax_tm_topbar .menu a:hover::after, .grax_tm_topbar .menu a[aria-current="location"]::after { transform: scaleX(1); }
.grax_tm_hero { background: #101014; height: 100svh; min-height: 620px; }
.hero-poster { width: 100%; height: 100%; object-fit: cover; opacity: .65; }
.grax_tm_hero .bg .overlay { background: linear-gradient(90deg,rgba(8,8,12,.8),rgba(8,8,12,.25)),linear-gradient(0deg,#101014,transparent 40%); }
.grax_tm_hero .details { left: 40px; right: 40px; }
.grax_tm_hero .name { font-size: clamp(42px,6.7vw,96px); line-height: 1.08; letter-spacing: -.05em; }
.title-mask { display: inline-block; overflow: hidden; vertical-align: bottom; }
.title-mask > span { display: inline-block; animation: title-enter .8s cubic-bezier(.2,.75,.25,1) both; }
.title-mask:nth-child(2) > span { animation-delay: .12s; }
.grax_tm_hero .job { display: block; margin: 20px 0 30px; animation: soft-enter .6s .25s both; }
.reveal { opacity: 1; visibility: visible; }
.cursor-after { white-space: normal; }
.cursor-after::after { content: ''; width: 28px; height: 3px; margin-left: 12px; background: #333; vertical-align: middle; animation: none; }
.reveal.is-pending { opacity: 0; transform: translateY(24px); }
.reveal.is-visible { animation: soft-enter .6s cubic-bezier(.2,.75,.25,1) both; animation-delay: var(--reveal-delay,0ms); }
.grax_tm_portfolio .portfolio_list ul li { opacity: 1; visibility: visible; }
.grax_tm_about .image .main { transform: none; }
.kioto_progress .bar_in { width: 100%; transform: scaleX(0); transform-origin: left; transition: transform .7s ease; }
.kioto_progress.is-visible .bar_in { transform: scaleX(1); }
.video-preview { display: block; position: relative; aspect-ratio: 16/9; overflow: hidden; background: #19191f; color: #fff; }
.video-preview img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease,opacity .3s; }
.video-preview::after { content: ''; position: absolute; inset: 30% 0 0; background: linear-gradient(transparent,rgba(0,0,0,.85)); }
.play-symbol { position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 68px; height: 68px; border: 1px solid #ffffffaa; border-radius: 50%; background: #1118; transition: background .2s; }
.video-caption { position: absolute; z-index: 1; bottom: 18px; left: 22px; right: 22px; font: 500 16px/1.4 'Space Grotesk',sans-serif; }
.video-preview:hover img { transform: scale(1.035); }
.video-preview:hover .play-symbol { background: var(--accent); color: #111; }
.video-dialog { position: fixed; inset: 0; margin: auto; width: min(1100px,94vw); max-width: 94vw; max-height: 90svh; padding: 48px 12px 12px; border: 1px solid #333; background: #101014; color: #fff; overflow: auto; }
.video-dialog::backdrop { background: #000e; }
.video-dialog[open] { animation: soft-enter .25s ease both; }
.video-close { position: absolute; right: 10px; top: 3px; width: 44px; height: 44px; background: transparent; color: #fff; border: 0; font-size: 32px; }
.video-stage { aspect-ratio: 16/9; }
.video-stage iframe { display: block; width: 100%; height: 100%; border: 0; }
.video-external { display: inline-block; color: #fff; font-size: 14px; padding-top: 10px; }
body.video-open { overflow: hidden; }
.grax_tm_mobile_menu .dropdown.is-open { display: block; animation: soft-enter .2s ease; }
.grax_tm_mobile_menu .hamburger { border: 0; background: transparent; }
.grax_tm_copyright .copy { max-width: 680px; }
.grax_tm_copyright .copy a { color: #ddd; }
@keyframes title-enter { from { transform: translateY(110%); } to { transform: translateY(0); } }
@keyframes soft-enter { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 900px) {
  #vimeo_section .video_row { grid-template-columns: 1fr !important; gap: 24px !important; }
  .grax_tm_hero .details { left: 20px; right: 20px; }
  .grax_tm_hero { min-height: 620px; }
  .grax_tm_hero .name { font-size: clamp(38px,8.8vw,70px); }
}

/* Distinct motion for typography, photography, video and interaction. */
.title-mask { perspective: 700px; overflow: visible; }
.title-mask > span { animation: none; }
.title-letter { display: inline-block; transform-origin: 50% 100%; animation: letter-turn .85s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--letter-index) * 38ms); }
.title-mask:nth-child(2) { color: var(--accent); }
.hero-poster { transform: translate3d(0,var(--hero-drift,0px),0) scale(1.12); }
.hero-frame { position: absolute; inset: 130px 5% 150px; z-index: 2; pointer-events: none; }
.hero-frame i { position: absolute; width: 42px; height: 42px; border-color: var(--accent); border-style: solid; border-width: 0; opacity: .6; animation: frame-enter 1.1s .35s both; }
.hero-frame i:nth-child(1) { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.hero-frame i:nth-child(2) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.hero-frame i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.hero-frame i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
.reveal.is-visible { animation-name: text-arrive; animation-duration: .8s; }
.reveal[data-motion="image"].is-visible { animation-name: image-unveil; animation-duration: 1.1s; }
.reveal[data-motion="image"].is-visible .main { animation: image-settle 1.35s cubic-bezier(.16,1,.3,1) both; }
.reveal[data-motion="image"] .image { overflow: hidden; }
.reveal[data-motion="statement"].is-visible { animation-name: statement-unveil; animation-duration: 1s; }
.reveal[data-motion="video"].is-visible { animation-name: video-arrive; animation-duration: .95s; }
.reveal[data-motion="video"] { position: relative; overflow: hidden; }
.reveal[data-motion="video"].is-visible::before { content: ''; position: absolute; inset: 0; z-index: 3; background: var(--accent); transform-origin: right; animation: shutter-pass .95s cubic-bezier(.76,0,.24,1) both; pointer-events: none; }
.reveal.is-visible .list li { animation: list-arrive .55s both; animation-delay: calc(.15s + var(--item-index,0) * 75ms); }
.play-symbol { transition: background .25s,color .25s,transform .45s cubic-bezier(.2,.8,.2,1); }
.play-symbol::before { content: ''; position: absolute; inset: -9px; border: 1px solid var(--accent); border-radius: 50%; border-top-color: transparent; transform: rotate(-70deg) scale(.8); opacity: 0; transition: transform .65s,opacity .3s; }
.video-preview:hover .play-symbol { transform: translate(-50%,-50%) scale(1.08); }
.video-preview:hover .play-symbol::before { opacity: 1; transform: rotate(40deg) scale(1); }
.video-preview .video-caption { transform: translateY(0); transition: transform .4s; }
.video-preview:hover .video-caption { transform: translateY(-5px); }
.kioto_progress .bar_in { background: #222 !important; }
.grax_tm_button a { background: #111 !important; color: #fff !important; border-color: #111 !important; }
.grax_tm_contact .info_list a:hover { color: #333 !important; }
.grax_tm_hero ::selection, ::selection { background: #ddd; color: #111; }
@keyframes letter-turn { from { opacity: 0; transform: translateY(65%) rotateX(-75deg) rotateZ(4deg); } to { opacity: 1; transform: translateY(0) rotateX(0) rotateZ(0); } }
@keyframes frame-enter { from { opacity: 0; transform: scale(1.7); } to { opacity: .6; transform: scale(1); } }
@keyframes text-arrive { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: translateX(0); } }
@keyframes image-unveil { from { opacity: .3; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0); } }
@keyframes image-settle { from { transform: scale(1.16); } to { transform: scale(1); } }
@keyframes statement-unveil { from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(12px); } to { opacity: 1; clip-path: inset(0); transform: translateY(0); } }
@keyframes video-arrive { from { opacity: 0; transform: translateY(35px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes shutter-pass { 0%,15% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes list-arrive { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } }
@media (max-width: 900px) {
 .hero-frame { inset: 110px 20px 140px; }
 .hero-frame i { width: 25px; height: 25px; }
 .title-letter { animation-duration: .65s; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal.is-pending { opacity: 1; transform: none; }
  .hero-poster { transform: none; }
  .reveal[data-motion="video"].is-visible::before { display: none; }
}