/* Shared motion language: direct scroll, short reveals, quiet materials. */
:root { --motion-ease: cubic-bezier(.22, 1, .36, 1); }
body { font-optical-sizing: auto; }
a, button { touch-action: manipulation; }
.intro-line { width: 100%; transform: scaleX(0); transform-origin: left; }
.intro.done { transition: opacity .5s ease, visibility .5s; }
.counter { font-variant-numeric: tabular-nums; }
.ui-arrow {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  overflow: visible;
  vertical-align: -.12em;
  color: currentColor;
}
.ui-arrow path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.button, .nav-cta, .channel-buttons button, .menu-toggle {
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.button:hover { transform: none; }
.button > span, .text-link > span { transition: transform .22s var(--motion-ease); }
.button:hover > span, .text-link:hover > span { transform: translate(2px,-2px); }
.reveal { transition: opacity .55s ease, transform .55s var(--motion-ease); }
.js .reveal:not(.visible) { transform: translate3d(0,16px,0); }
.js .motion-item { transition: opacity .5s ease var(--stagger,0ms), transform .5s var(--motion-ease) var(--stagger,0ms); }
.js .motion-item:not(.visible) { transform: translate3d(0,14px,0); }
.js .motion-visible > .motion-item { transform: none; }
.opening-track { height: 260svh; }
.opening-sticky { min-height: min(720px,100svh); }
.social-stage { min-height: min(740px,100svh); }
.opening-sticky .vision { box-shadow: 0 16px 60px #00000030; }
.opening-sticky .vision h2, .opening-sticky .vision-bottom {
  transform: translate3d(var(--panel-copy-shift,16px),0,0);
}
.panel-led { width: 48%; transform: translate(-50%,var(--led-rise,12px)) scaleX(var(--led-scale,.7)); }
.social-track { height: 350svh; }
.social-scene .glass {
  animation: none; translate: none;
  transition: border-color .22s ease, box-shadow .22s ease;
  background: linear-gradient(135deg,#30302de8,#202020cf);
  border-color: #ffffff30;
  box-shadow: inset 0 1px #ffffff25, 0 18px 48px #0000002b;
  backdrop-filter: blur(18px) saturate(115%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
}
.social-scene .glass.active {
  border-color: #ff9b6d80;
  box-shadow: inset 0 1px #ffffff36, 0 18px 48px #00000035;
}
.glass-linkedin { top: auto; bottom: 105px; }
.character canvas { left: 50%; right: auto; width: auto; max-width: 100%; transform: translateX(-50%); }
/* Activated only by a validated landscape frame manifest. The portrait scene
   keeps its current layout until the replacement video has been accepted. */
.social-stage[data-media-layout="landscape"] .social-head h2 {
  font-size: clamp(32px,3.7vw,60px);
  max-width: calc(50% - 80px);
}
@media (max-width: 700px) {
  .social-stage[data-media-layout="landscape"] .social-head h2 {
    font-size: 31px; max-width: none;
  }
}
.social-stage[data-media-layout="landscape"] .character {
  left: 0; right: 0; width: 100%; height: auto;
  top: var(--character-top,220px); bottom: var(--character-bottom,70px);
  transform: none; overflow: hidden;
}
.social-stage[data-media-layout="landscape"] .character :is(img,canvas,video) {
  position: absolute; inset: auto;
  left: var(--art-left,0px); top: var(--art-top,0px);
  width: var(--art-width,100%); height: var(--art-height,100%);
  max-width: none; max-height: none; transform: none;
  object-fit: fill;
  /* Blend only empty studio margins; the complete character stays opaque. */
  mask-image: linear-gradient(to bottom,#000 88%,transparent),linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
  mask-composite: intersect;
  -webkit-mask-image: linear-gradient(to bottom,#000 88%,transparent),linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-composite: source-in;
}
.glass-kicker { color: #d4cec4; }
.scene-progress i { width: 100%; transform: scaleX(0); transform-origin: left; }
.channel-buttons button { min-height: 44px; }
.channel-buttons {
  min-width: 0; max-width: 100%; flex: 1; overflow-x: auto; overflow-y: hidden;
  justify-content: flex-start; padding: 5px 2px 8px; margin: -5px -2px -8px;
  scroll-padding-inline: 8px; scrollbar-width: thin; scrollbar-color: #ffffff40 transparent;
  overscroll-behavior-x: contain;
}
.channel-buttons button { flex: 0 0 auto; white-space: nowrap; }
.channel-buttons button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.channel-buttons::-webkit-scrollbar { height: 3px; }
.channel-buttons::-webkit-scrollbar-thumb { background: #ffffff40; border-radius: 3px; }
.scene-caption { flex-shrink: 0; }
@media (max-width: 1200px) { .scene-caption { display: none; } }
.service-card { transform-origin: 50% 0; }
/* Reserve compositing layers near the scene, then release them offscreen. */
.opening-sticky .hero-art, .opening-sticky .hero-art img,
.opening-sticky .vision, .hero-copy, .hero-aside, .hero-eyebrow, .hero-bottom { will-change: auto; }
@media (prefers-reduced-motion: no-preference) {
  .opening-track.opening-near .hero-art, .opening-track.opening-near .vision { will-change: transform; }
  .opening-track.opening-near :is(.hero-copy,.hero-aside,.hero-eyebrow,.hero-bottom),
  .services.services-near .service-card { will-change: transform, opacity; }
}
.marquee-track { animation-play-state: paused; }
.marquee-track.is-visible { animation-play-state: running; }
@media (max-width: 700px) {
  .social-stage[data-media-layout="landscape"] .character :is(img,canvas,video) {
    mask-image: linear-gradient(to bottom,transparent,#000 8%,#000 88%,transparent),linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
    -webkit-mask-image: linear-gradient(to bottom,transparent,#000 8%,#000 88%,transparent),linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
  }
  .opening-track { height: 270svh; }
  .social-track { height: 360svh; }
  .opening-sticky { min-height: min(680px,100svh); }
  .social-stage { min-height: min(760px,100svh); }
  .menu-toggle { min-height: 44px; padding: 8px 0 8px 16px; }
  .js .header nav {
    display: flex; inset: 72px 16px auto; padding: 15px;
    border: 1px solid #ffffff24; border-radius: 22px;
    background: #232322ed;
    backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    box-shadow: 0 18px 55px #00000055;
    gap: 4px; transform-origin: top right;
    opacity: var(--menu-progress,0);
    transform: translateY(calc((1 - var(--menu-progress,0)) * -8px)) scale(calc(.97 + var(--menu-progress,0) * .03));
    visibility: hidden; pointer-events: none;
  }
  .js .header nav.open { pointer-events: auto; }
  .header nav a { min-height: 48px; display: flex; align-items: center; padding: 12px 14px; }
  .header nav .nav-cta { margin-top: 5px; }
  .social-scene .glass { background: linear-gradient(135deg,#30302dfa,#202020ed); }
  .service-card { position: relative; top: auto; }
}
@media (max-width: 700px) and (max-height: 740px) {
  .opening-sticky .hero-art { top: 90px; height: 280px; }
  .opening-sticky .vision h2 { margin-top: 125px; font-size: 36px; }
  .social-scene .glass { bottom: 82px; padding: 15px 18px; }
  .social-scene .glass p { font-size: 22px; }
}
@media (prefers-reduced-transparency: reduce) {
  .social-scene .glass, .js .header nav { background: #252524; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .social-scene .glass, .js .header nav { background: #202020; border-color: #eeece6; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .glass-kicker, .glass-bottom > span:first-child { color: #eeece6; }
}
@media (prefers-reduced-motion: reduce) {
  .opening-track, .social-track { height: auto; }
  .opening-sticky, .social-stage { min-height: 0; }
  .social-scene .glass { inset: auto; }
  .social-stage[data-media-layout="landscape"] .character {
    position: relative; inset: auto; width: 100%;
    height: clamp(240px,60svh,560px); transform: none;
  }
  .opening-sticky .vision h2 { margin-top: 60px; }
  .opening-sticky .vision h2, .opening-sticky .vision-bottom { transform: none; }
  .js .reveal:not(.visible), .js .motion-item { opacity: 1; transform: none; }
  .service-card { position: relative; top: auto; transform: none !important; opacity: 1 !important; }
  .button, .nav-cta, .channel-buttons button, .menu-toggle { scale: 1 !important; }
  .js .header nav { transform: none; }
  .panel-led { transform: translateX(-50%); }
  .button:hover > span, .text-link:hover > span { transform: none; }
  .marquee-track { animation: none; }
}

/* Drift blends into the scroll path as each card arrives, without a landing jump. */
@keyframes negrito-card-drift {
  0%,100% { translate: 0 0; }
  50% { translate: 0 calc(var(--card-arrival,0) * -4px); }
}
@media (prefers-reduced-motion: no-preference) {
  .social-stage.story-visible .glass {
    animation: negrito-card-drift 7s ease-in-out infinite;
    animation-play-state: running;
  }
}

/* A WebGL solid replaces the flat CSS Y rotation; the source stays as fallback. */
.hero-art .logo-volume { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:0; }
.hero-art.logo-volume-ready img { opacity:0; }
.hero-art.logo-volume-ready .logo-volume { opacity:1; }