/* Content is visible by default. Entrance animations are progressive enhancements. */
@media (prefers-reduced-motion: no-preference) {
  .motion-active .hero-composition {
    transform: perspective(1200px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transition: transform .55s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease;
  }
  .motion-active .hero-composition::before {
    content: ''; position: absolute; inset: -15%; z-index: 0; pointer-events: none;
    background: radial-gradient(ellipse at 20% 25%, #0749ed38, transparent 50%), radial-gradient(ellipse at 85% 75%, #d6efaa18, transparent 45%);
    animation: studio-glow 12s ease-in-out infinite alternate;
  }
  .motion-active .hero-big-type { animation: studio-type 8s ease-in-out infinite; }
  .motion-active .hero-founder { z-index: 3; animation: studio-founder 6.5s ease-in-out infinite; }
  .motion-active .composition-star { z-index: 1; animation: studio-orbit 32s linear infinite; }
  .motion-active .composition-label, .motion-active .composition-index { z-index: 2; }
  .motion-active .hero-copy h1 i { animation: next-move 3.2s ease-in-out .8s 3; }
  .motion-active .ticker b { animation: studio-orbit 24s linear infinite; }
  .motion-active .hero-composition:not(.is-in-view)::before,
  .motion-active .hero-composition:not(.is-in-view) .hero-big-type,
  .motion-active .hero-composition:not(.is-in-view) .hero-founder,
  .motion-active .hero-composition:not(.is-in-view) .composition-star,
  .motion-active .ticker:not(.is-in-view) b,
  .motion-paused .hero-composition::before,
  .motion-paused .hero-composition .hero-big-type,
  .motion-paused .hero-composition .hero-founder,
  .motion-paused .hero-composition .composition-star,
  .motion-paused .hero-copy h1 i,
  .motion-paused .ticker b { animation-play-state: paused; }

  .button { position: relative; overflow: hidden; isolation: isolate; transition: background .25s ease, transform .25s ease, box-shadow .25s ease; }
  .button::after {
    content: ''; position: absolute; left: -60%; top: -65%; width: 35%; height: 230%;
    background: linear-gradient(90deg, transparent, #ffffff30, transparent);
    transform: rotate(25deg); pointer-events: none;
  }
  .button > span, .read-more > span:not(.sr-only), .service-tile .read-more b { transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
  .button:active { transform: translateY(0) scale(.98); }
  .button:disabled { transform: none; box-shadow: none; }
  .contact-form input, .contact-form select, .contact-form textarea { transition: border-color .2s ease, box-shadow .2s ease; }
  .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px #0749ed12; }
  .contact-form { transition: border-color .3s ease, box-shadow .3s ease; }
  .contact-form:focus-within { border-color: #0749ed55; box-shadow: 0 14px 36px #13242a08; }
  .content-card { transition: transform .4s cubic-bezier(.22, 1, .36, 1); }
  .card-image { transition: box-shadow .4s ease; }
  .card-image img { transition: transform .75s cubic-bezier(.22, 1, .36, 1); }
  .service-tile { transition: background .3s ease; }
  .service-icon { display: inline-block; align-self: flex-start; transition: transform .4s cubic-bezier(.22, 1, .36, 1); }
  .values-grid article { position: relative; }
  .motion-active .values-grid article::before {
    content: ''; position: absolute; left: 0; top: -1px; width: 100%; height: 2px;
    background: linear-gradient(90deg, var(--blue), #0749ed20); transform: scaleX(0); transform-origin: left;
    transition: transform .8s cubic-bezier(.22, 1, .36, 1) .15s;
  }
  .motion-active .process-section .values-grid article::before { background: linear-gradient(90deg, var(--lime), #d6efaa20); }
  .motion-active .values-grid article[data-motion-state=running]::before,
  .motion-active .values-grid article[data-motion-state=shown]::before { transform: scaleX(1); }
  .text-link, .site-footer a:not(.brand) { transition: color .2s ease, transform .3s ease; }

  @media (hover: hover) and (pointer: fine) {
    .button:hover, .button:focus-visible { transform: translateY(-3px); box-shadow: 0 8px 20px #0749ed20; }
    .button:hover::after, .button:focus-visible::after { animation: button-light .7s ease; }
    .button:hover > span, .button:focus-visible > span,
    .read-more:hover > span:not(.sr-only), .service-tile:hover .read-more b { transform: translate(3px, -3px); }
    .content-card:hover { transform: translateY(-6px); }
    .content-card:hover .card-image { box-shadow: 0 16px 28px #13242a14; }
    .content-card:hover .card-image img { transform: scale(1.055); }
    .service-tile:hover .service-icon { transform: translateY(-4px) rotate(-8deg); }
    .text-link:hover, .site-footer a:not(.brand):hover { transform: translateX(3px); }
    .hero-founder > a { transition: transform .3s ease, background .3s ease; }
    .hero-founder > a:hover { transform: rotate(-12deg) scale(1.08); background: #0037bb; }
  }

  @media (min-width: 901px) {
    .navigation a::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
    .navigation a:hover::after, .navigation a:focus-visible::after { transform: scaleX(1); }
    .navigation a[aria-current]::after { width: 17px; transform: scaleX(1); }
  }
  @media (max-width: 900px) {
    .navigation.open { animation: menu-arrive .25s cubic-bezier(.22, 1, .36, 1); }
  }
  @media (max-width: 767px) {
    .motion-active .hero-composition { transform: none; }
  }
}

@keyframes studio-glow { from { transform: translate3d(-2%, -2%, 0); } to { transform: translate3d(3%, 3%, 0); } }
@keyframes studio-type { 0%, 100% { transform: translateY(0) rotate(-7deg); } 50% { transform: translateY(-5px) rotate(-7deg); } }
@keyframes studio-founder { 0%, 100% { transform: translateY(0) rotate(4deg); } 50% { transform: translateY(-6px) rotate(4deg); } }
@keyframes studio-orbit { from { transform: rotate(14deg); } to { transform: rotate(374deg); } }
@keyframes next-move { 0%, 65%, 100% { transform: translate(0, 0); } 78% { transform: translate(4px, -4px); } 90% { transform: translate(0, 0); } }
@keyframes button-light { from { transform: translateX(0) rotate(25deg); } to { transform: translateX(500%) rotate(25deg); } }
@keyframes menu-arrive { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  [data-motion-reveal] { opacity: 1 !important; transform: none !important; }
  .hero-composition, .content-card, .button:hover, .text-link:hover, .site-footer a:hover { transform: none !important; }
}
@media print {
  [data-motion-reveal] { opacity: 1 !important; transform: none !important; }
  .hero-composition, .hero-composition *, .ticker *, .hero-copy h1 i { animation: none !important; }
  .hero-composition { transform: none !important; }
  .hero-composition::before, .button::after { display: none; }
}