/* Shared motion layer: the original layout and colours remain the foundation. */
:root { --motion-ease: cubic-bezier(.22, .75, .18, 1); }

/* Lenis smooth scrolling (from lenis.css); Lenis animates the scroll itself, so the CSS
   smooth-scroll behaviour must be off while it runs. */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }

.site-header {
  background: rgba(255, 255, 255, .97);
  transition: background .35s, box-shadow .35s;
}
.site-header.is-scrolled {
  --head: 72px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 8px 28px #11141812;
  backdrop-filter: blur(16px);
}
.head-in, .main-nav > ul > li > a { transition: height .35s var(--motion-ease), color .2s; }
.brand img { transition: transform .35s var(--motion-ease); transform-origin: left center; }
.site-header.is-scrolled .brand img { transform: scale(.88); }
html.site-header-compact .anchor-bar { top: 72px; }
.anchor-bar { transition: top .35s var(--motion-ease); }
.main-nav a:focus-visible, .burger:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.burger { transition: background .25s, transform .25s; }
.burger:hover { background: var(--accent); }
.burger:active { transform: scale(.94); }
.main-nav[hidden] { display: none !important; }
.nav-tracker { display: none; pointer-events: none; }

@media (min-width: 1121px) {
  .main-nav { position: relative; }
  .nav-tracker-enabled > ul > li > a::after { opacity: 0; }
  .nav-tracker {
    display: block; position: absolute; left: 0; bottom: 16px;
    height: 3px; width: var(--nav-width, 0px); background: var(--accent);
    transform: translateX(var(--nav-left, 0px)); opacity: var(--nav-opacity, 0);
    transition: transform .38s var(--motion-ease), width .38s var(--motion-ease), opacity .2s;
  }
  .sub { transform-origin: top left; transform: translateY(12px) scale(.98); transition: opacity .22s, transform .32s var(--motion-ease), visibility .22s; }
  .sub > li { opacity: 0; transform: translateX(-7px); transition: opacity .25s, transform .3s var(--motion-ease); }
  .has-sub:hover .sub > li, .has-sub:focus-within .sub > li { opacity: 1; transform: none; transition-delay: calc(var(--menu-order, 0) * 30ms); }
  .has-sub:focus-within .chev { transform: rotate(180deg); }
  .sub a { transition: color .2s, background .2s, padding .25s var(--motion-ease); }
  .sub a:hover, .sub a:focus-visible { padding-left: 28px; }
}

@media (max-width: 1120px) {
  .main-nav { max-height: calc(100dvh - 74px); overscroll-behavior: contain; transform-origin: top; }
  .main-nav.sm-menu-enter { animation: sm-menu-open .32s var(--motion-ease) both; }
  .main-nav.sm-menu-enter > ul > li { animation: sm-menu-item .4s var(--motion-ease) both; animation-delay: calc(var(--menu-order, 0) * 30ms); }
  .main-nav.sm-menu-closing { display: block; pointer-events: none; animation: sm-menu-close .19s ease both; }
  /* Keep mobile link height independent of the compact desktop navigation. */
  .main-nav > ul > li > a { height: auto; }
}

@keyframes sm-menu-open { from { opacity: 0; clip-path: inset(0 0 100%); transform: translateY(-8px); } to { opacity: 1; clip-path: inset(0); transform: none; } }
@keyframes sm-menu-close { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-10px); } }
@keyframes sm-menu-item { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

/* Image reveals use their own clipping layer, leaving frame accents and badges intact. */
.sm-photo-clip { display: block; width: 100%; overflow: hidden; }
.pcard .ph.sm-photo, .case-ph.sm-photo { position: relative; overflow: hidden; }
.sm-photo > img, .sm-photo > .sm-photo-clip > img {
  transform-origin: center;
  transition: transform .7s var(--motion-ease), filter .7s;
}
.sm-photo.is-photo-revealed > img, .sm-photo.is-photo-revealed > .sm-photo-clip > img {
  animation: sm-photo-reveal 1.15s var(--motion-ease) both;
}
.sm-photo.photo-reveal-finished > img, .sm-photo.photo-reveal-finished > .sm-photo-clip > img { animation: none; }
.frame.sm-photo::before, .story-photo.sm-photo::before { transition: width .8s var(--motion-ease), height .8s var(--motion-ease); }
.frame.sm-photo:hover::before, .story-photo.sm-photo:hover::before { width: 55%; height: 70%; }

@media (hover: hover) and (pointer: fine) {
  .sm-photo.photo-reveal-finished:hover > img,
  .sm-photo.photo-reveal-finished:hover > .sm-photo-clip > img,
  .pcard:hover .sm-photo.photo-reveal-finished > img,
  .ind:hover .sm-photo.photo-reveal-finished > img {
    transform: translate3d(var(--photo-x, 0px), var(--photo-y, 0px), 0) scale(1.065);
  }
  .btn { transition: background .2s, color .2s, box-shadow .2s, transform .3s var(--motion-ease); }
  .btn:hover { transform: translateY(-3px); }
  .btn:active { transform: translateY(0); }
  .btn .ic, .card > .ic, .cs-card .hex-ic { transition: transform .35s var(--motion-ease); }
  .btn:hover .ic { transform: translateX(3px); }
  .card:hover > .ic { transform: translateY(-4px) rotate(-7deg); }
  .cs-card:hover .hex-ic { transform: translateY(-4px); }
  .card.reveal.in:hover { transform: translateY(-5px); }
  .pcard.reveal.in:hover { transform: translateY(-6px); }
}

@keyframes sm-photo-reveal {
  from { clip-path: inset(0 100% 0 0); transform: scale(1.12); filter: saturate(.5); }
  to { clip-path: inset(0); transform: scale(1); filter: saturate(1); }
}

/* One entrance per element: no looping decoration or scroll interception. */
html.is-ready .hero-bg { animation-duration: 3.5s; }
html.is-ready .hero .deco-hex polygon,
html.is-ready .page-hero .deco-hex polygon { stroke-dasharray: 2100; animation: sm-draw-hex 2.1s .25s var(--motion-ease) both; }
.sm-entrance { animation: sm-enter .7s var(--motion-ease) both; animation-delay: var(--motion-delay, 0ms); }
@keyframes sm-draw-hex { from { stroke-dashoffset: 2100; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes sm-enter { from { opacity: .2; transform: translateY(20px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .sm-photo > img, .sm-photo > .sm-photo-clip > img,
  .sm-photo.photo-reveal-finished:hover > img,
  .sm-photo.photo-reveal-finished:hover > .sm-photo-clip > img,
  .pcard:hover .sm-photo.photo-reveal-finished > img,
  .ind:hover .sm-photo.photo-reveal-finished > img { animation: none; transform: none; clip-path: none; filter: none; }
  .sm-entrance { animation: none; opacity: 1; transform: none; }
  .main-nav.sm-menu-enter, .main-nav.sm-menu-enter > ul > li { animation: none; }
  .main-nav.sm-menu-closing { display: none; }
  .btn:hover, .card.reveal.in:hover, .pcard.reveal.in:hover, .btn:hover .ic, .card:hover > .ic, .cs-card:hover .hex-ic { transform: none; }
}

/* ——— Extended motion layer ———
   html.sm-motion is set by site-motion.js only when full motion is allowed, so every
   "hidden before reveal" state below stays visible without JavaScript or with reduced motion. */

/* Page-to-page crossfade where the browser supports cross-document view transitions. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: sm-page-out .28s ease both; }
::view-transition-new(root) { animation: sm-page-in .45s var(--motion-ease) both; }
@keyframes sm-page-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes sm-page-in { from { opacity: 0; transform: translateY(14px); } }

/* Header: drops in once, items staggered; logo and CTA follow. */
html.is-ready .topbar-in > * { animation: sm-fade-down .6s var(--motion-ease) both; }
html.is-ready .site-header .brand { animation: sm-fade-down .7s .05s var(--motion-ease) both; }
html.is-ready .site-header .main-nav > ul > li { animation: sm-fade-down .6s var(--motion-ease) both; animation-delay: calc(.12s + var(--menu-order, 0) * 45ms); }
html.is-ready .site-header .head-cta > * { animation: sm-fade-down .6s .4s var(--motion-ease) both; }
@keyframes sm-fade-down { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@media (max-width: 1120px) { html.is-ready .site-header .main-nav > ul > li { animation: none; } }
.main-nav > ul > li > a { transition: color .25s; }
.main-nav > ul > li > a:hover { color: var(--accent); }
.lang button { transition: background .25s, color .25s; }
.lang button:hover { color: #fff; }

/* Headings unveil upwards from a mask. The mask is removed when the animation ends. */
html.sm-motion .sm-title:not(.is-title-in) { opacity: 0; }
.sm-title.is-title-in { animation: sm-title 1s var(--motion-ease) backwards; animation-delay: var(--title-delay, 0ms); }
html.is-ready .hero h1 { animation: sm-title 1.2s .1s var(--motion-ease) backwards; }
@keyframes sm-title { from { clip-path: inset(0 0 100% 0); transform: translateY(.45em); opacity: 0; } 30% { opacity: 1; } to { clip-path: inset(0 0 -20% 0); transform: none; } }
html.sm-motion .rule:not(.is-rule-in) { transform: scaleX(0); }
.rule { transform-origin: left; transition: transform .9s .25s var(--motion-ease); }
.center .rule { transform-origin: center; }
html.sm-motion .timeline:not(.is-line-in)::before { transform: scaleX(0); }
.timeline::before { transform-origin: left; transition: transform 1.6s .2s var(--motion-ease); }

/* Parallax and depth: set via the individual translate/scale properties so they
   combine with the existing reveal and hover transforms instead of replacing them. */
.sm-parallax { will-change: translate; }
.frame .sm-photo-clip > img, .story-photo .sm-photo-clip > img, .case-ph > img, .svc-band > img, .page-hero > img { scale: 1.12; }
.svc-band { overflow: hidden; }
.hero-in { will-change: translate, opacity; }
/* Hero links: the arrow floats gently; the play button sends out a soft ring instead of moving. */
.hero-down .discover-icon svg { animation: sm-float 2.8s ease-in-out infinite; }
@keyframes sm-float { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(2px); } }
.hero-film .discover-icon::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .7);
  pointer-events: none; animation: sm-ring 2.8s 1.2s ease-out infinite;
}
@keyframes sm-ring { 0% { transform: scale(1); opacity: .8; } 70%, 100% { transform: scale(1.6); opacity: 0; } }

/* Pointer spotlight on cards: a soft light follows the cursor. */
.card, .vcard, .mv-card, .tst-card, .ind, .pcard { position: relative; }
.sm-spot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(420px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(59, 130, 240, .16), transparent 45%);
}
.sm-spot:hover::after { opacity: 1; }
.card.sm-spot::after { background: radial-gradient(360px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(88, 153, 240, .2), transparent 50%); }
.card > *, .vcard > *, .mv-card > * { position: relative; z-index: 1; }
.card .tag { position: absolute; }

/* Buttons: a light sweep crosses the face on hover. */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: translateX(-130%) skewX(-18deg);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover::after { transform: translateX(260%) skewX(-18deg); transition: transform .75s var(--motion-ease); }
  .logo-cell.next .ic { transition: transform .35s var(--motion-ease); }
  .logo-cell.next:hover .ic { transform: translateX(5px); }
  .hexb { transition: transform .45s var(--motion-ease); }
  .hexb:hover { transform: translateY(-4px) rotate(-6deg); }
  .social a { transition: background .2s, border-color .2s, transform .3s var(--motion-ease); }
  .social a:hover { transform: translateY(-3px); }
  .ft-nav a { transition: color .2s; }
  .story-nav button { transition: background .2s, border-color .2s, transform .3s var(--motion-ease); }
  .story-nav button:hover { transform: translateY(-2px); }
}

/* History slider: slides fade and rise rather than popping. */
.slide.on { animation: none; }
.slide.on > * { animation: sm-slide .6s var(--motion-ease) both; }
.slide.on > :nth-child(2) { animation-delay: .06s; }
.slide.on > :nth-child(3) { animation-delay: .12s; }
@keyframes sm-slide { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.dots i { transition: background .3s, width .4s var(--motion-ease); }
.dots i.on { width: 34px; }

/* FAQ: answers open and close smoothly where the browser can animate to auto height. */
:root { interpolate-size: allow-keywords; }
details::details-content { block-size: 0; overflow: hidden; transition: block-size .45s var(--motion-ease), content-visibility .45s allow-discrete; }
details[open]::details-content { block-size: auto; }
.faq-list summary { transition: color .2s; }
.faq-list summary:hover { color: var(--accent); }
.faq-list summary::after { transition: transform .4s var(--motion-ease), background .2s; }
.faq-list details[open] summary::after { transform: translateY(-50%) rotate(180deg); }

/* Count-up numbers keep their width while counting. */
.sm-count { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .sm-title.is-title-in, html.is-ready .hero h1 { animation: none; }
  .btn::after { display: none; }
  .hero-down .discover-icon svg, .hero-film .discover-icon::after { animation: none; }
  .sm-parallax { translate: none !important; }
  .hexb:hover, .social a:hover, .story-nav button:hover, .logo-cell.next:hover .ic { transform: none; }
}