/* Hùng Paris / Editorial Motion V16
   All choreography is enhancement-only: the HTML remains fully usable without JS.
   Motion uses compositor-friendly opacity/transform, avoiding text masks that clip Vietnamese accents.
*/
:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-out: cubic-bezier(.4, 0, 1, 1);
  --motion-quick: 190ms;
  --motion-normal: 520ms;
  --motion-long: 780ms;
}
.read-progress {
  width: 100% !important;
  transform: scaleX(0);
  transform-origin: left center;
  transition: none;
}
.topbar {
  transition: background-color 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}
.topbar.is-scrolled {
  background: rgba(248,244,233,.985);
  box-shadow: 0 9px 28px rgba(40,18,14,.065);
}
.desktop-nav a[aria-current="location"] { color: var(--red); }
.desktop-nav a[aria-current="location"]:after { right: 0; }
.mobile-menu a[aria-current="location"] { color: var(--red); }
.btn, .nav-download, .hero-pdf, .statement-link, .footer-links a, .work-card, .book-front {
  -webkit-tap-highlight-color: transparent;
}
.btn span, .nav-download span, .hero-pdf span, .statement-link span,
.footer-links a span, .work-card-info i, .book-tap span {
  display: inline-block;
  transition: transform 300ms var(--motion-ease);
}
@media (hover:hover) and (pointer:fine) {
  .btn:hover span, .nav-download:hover span, .hero-pdf:hover span,
  .statement-link:hover span, .footer-links a:hover span,
  .book-front:hover .book-tap span { transform: translate(3px,-3px); }
  .work-card:hover .work-card-info i { transform: translate(3px,-3px); }
  .work-card-info { transition: transform 390ms var(--motion-ease); }
  .work-card:hover .work-card-info { transform: translateY(-4px); }
  .ticker:hover > div { animation-play-state: paused; }
  .book-preview:hover .book-back { transform: translate(13px,-8px) rotate(11deg); }
  .book-preview:hover .book-middle { transform: translate(-5px,4px) rotate(-9deg); }
  .book-preview:hover .book-front { transform: translate(-3px,-11px) rotate(-2deg); }
}
.book-page { transition: transform 520ms var(--motion-ease); }
.lightbox-media, .book-dialog-stage { position: relative; }
.menu-trigger span { transform-origin:center;transition:transform 280ms var(--motion-ease),opacity 200ms ease; }
.menu-trigger[aria-expanded="true"] span:first-child { transform:translateY(4.5px) rotate(45deg); }
.menu-trigger[aria-expanded="true"] span:last-child { transform:translateY(-4.5px) rotate(-45deg); }
.backtop { transition: background 180ms ease, transform 240ms var(--motion-ease); }
.backtop:hover { background:var(--ink);transform:translateY(-3px); }
.lightbox-arrow,.book-nav,.icon-btn { transition:background 180ms ease, transform 240ms var(--motion-ease); }
.lightbox-arrow:active,.book-nav:active { transform:scale(.94); }
.filter { transition: background-color 230ms ease, color 230ms ease, border-color 230ms ease, transform 240ms var(--motion-ease); }
.filter:active { transform:scale(.97); }
.work-card img { backface-visibility:hidden; }
.hero-photo img { backface-visibility:hidden; }
@media (prefers-reduced-motion: no-preference) {
  /* Opening sequence: image and words enter at distinct but coordinated beats. */
  html.motion-enabled .hero-kicker { animation:hp-rise 620ms var(--motion-ease) 70ms both; }
  html.motion-enabled .hero-intro { animation:hp-rise 660ms var(--motion-ease) 140ms both; }
  html.motion-enabled .hero-lead { animation:hp-rise 830ms var(--motion-ease) 220ms both; }
  html.motion-enabled .hero-feature { animation:hp-rise 900ms var(--motion-ease) 320ms both; }
  html.motion-enabled .hero-end { animation:hp-rise 840ms var(--motion-ease) 435ms both; }
  html.motion-enabled .hero-desc { animation:hp-rise 730ms var(--motion-ease) 540ms both; }
  html.motion-enabled .hero-buttons { animation:hp-rise 740ms var(--motion-ease) 660ms both; }
  html.motion-enabled .hero-foot { animation:hp-fade 850ms ease 880ms both; }
  html.motion-enabled .hero-visual { animation:hp-panel 1050ms var(--motion-ease) 145ms both; }
  html.motion-enabled .hero-photo img {
    transform:translate3d(0,var(--hero-parallax,0px),0) scale(1.065);
    transition:transform 180ms linear;
  }
  html.motion-enabled .hero-asterisk { animation:hp-star 900ms var(--motion-ease) 920ms both; }

  /* IntersectionObserver attaches only to elements that should reveal.
     Each element is revealed once; content is not gated if JS fails. */
  html.motion-enabled [data-motion-reveal] {
    opacity:0;
    transform:translate3d(0,var(--reveal-y,32px),0);
    transition: opacity var(--motion-normal) ease,
                transform var(--motion-long) var(--motion-ease);
    transition-delay: var(--reveal-delay,0ms);
  }
  html.motion-enabled [data-motion-reveal].in-view {
    opacity:1;
    transform:translate3d(0,0,0);
  }
  html.motion-enabled .section-eyebrow[data-motion-reveal] { --reveal-y:14px; }
  html.motion-enabled .section-heading[data-motion-reveal] { --reveal-y:38px; }
  html.motion-enabled .statement h2[data-motion-reveal] { --reveal-y:45px; }
  html.motion-enabled .method-grid > [data-motion-reveal] { --reveal-y:25px; }
  html.motion-enabled .about-photo[data-motion-reveal] { --reveal-y:42px; }
  html.motion-enabled .book-preview[data-motion-reveal] { --reveal-y:48px; }
  html.motion-enabled .work-card[data-motion-reveal] { --reveal-y:26px; }
  html.motion-enabled .work-card[data-motion-reveal] img { transform:scale(1.065); }
  html.motion-enabled .work-card[data-motion-reveal].in-view img { transform:scale(1); }
  html.motion-enabled .work-card[data-motion-reveal].in-view:hover img { transform:scale(1.045); }

  /* Editorial diptychs: staged page-stack fan and portrait image settle. */
  html.motion-enabled .about-photo.in-view img {
    animation:hp-portrait-settle 1250ms var(--motion-ease) 110ms both;
  }
  html.motion-enabled .book-preview.in-view .book-back {
    animation:hp-book-back 950ms var(--motion-ease) 90ms both;
  }
  html.motion-enabled .book-preview.in-view .book-middle {
    animation:hp-book-middle 900ms var(--motion-ease) 180ms both;
  }
  html.motion-enabled .book-preview.in-view .book-front {
    animation:hp-book-front 920ms var(--motion-ease) 285ms both;
  }
  html.motion-enabled .book-preview.in-view:hover .book-page { animation-fill-mode:none; }

  /* Modal entrance; close and image swapping are orchestrated via Web Animations. */
  .lightbox[open] .lightbox-shell,
  .book-dialog[open] { animation:hp-dialog-in 390ms var(--motion-ease) both; }
  dialog[open]::backdrop { animation:hp-backdrop-in 290ms ease both; }
  .backtop:not([hidden]) { animation:hp-fade 250ms ease both; }
}
@keyframes hp-rise {
  from { opacity:0;transform:translate3d(0,23px,0); }
  to { opacity:1;transform:translate3d(0,0,0); }
}
@keyframes hp-fade { from {opacity:0} to {opacity:1} }
@keyframes hp-panel {
  from { opacity:.36;transform:translate3d(22px,0,0) scale(1.025); }
  to { opacity:1;transform:translate3d(0,0,0) scale(1); }
}
@keyframes hp-star {
  from {opacity:0;transform:scale(.35) rotate(-65deg);}
  to {opacity:1;transform:scale(1) rotate(0);}
}
@keyframes hp-portrait-settle {
  from {transform:scale(1.085) translate3d(0,10px,0);}
  to {transform:scale(1) translate3d(0,0,0);}
}
@keyframes hp-book-back {
  from {opacity:0;transform:translate3d(-40px,35px,0) rotate(0);}
  to {opacity:1;transform:translate3d(0,0,0) rotate(9deg);}
}
@keyframes hp-book-middle {
  from {opacity:0;transform:translate3d(28px,30px,0) rotate(0);}
  to {opacity:1;transform:translate3d(0,0,0) rotate(-7deg);}
}
@keyframes hp-book-front {
  from {opacity:0;transform:translate3d(0,35px,0) rotate(3deg);}
  to {opacity:1;transform:translate3d(0,0,0) rotate(0);}
}
@keyframes hp-dialog-in {
  from {opacity:0;transform:translate3d(0,13px,0);}
  to {opacity:1;transform:translate3d(0,0,0);}
}
@keyframes hp-backdrop-in {
  from {opacity:0;}
  to {opacity:1;}
}
/* Small screens: shorter reveals, no continuous image parallax. */
@media(max-width:760px) and (prefers-reduced-motion:no-preference) {
  html.motion-enabled [data-motion-reveal] { --reveal-y:18px;transition-duration:430ms,600ms; }
  html.motion-enabled .hero-visual { animation-duration:740ms;animation-delay:170ms; }
  html.motion-enabled .hero-photo img { transform:none;transition:none; }
  html.motion-enabled .book-preview.in-view .book-page { animation-duration:650ms; }
}
@media(prefers-reduced-motion:reduce) {
  .read-progress { transition:none; }
  .topbar,.filter,.book-page,.menu-trigger span,.backtop,.work-card img,
  .btn,.btn span,.nav-download span,.hero-pdf span,.statement-link span,
  .footer-links a span,.work-card-info,.work-card-info i,.book-tap span {
    transition:none !important;
  }
  .ticker > div { animation:none !important; }
  html.motion-enabled [data-motion-reveal] { opacity:1!important;transform:none!important; }
  .hero-photo img { transform:none!important; }
}