/* Motion layer: soft, quiet entrances and careful micro-interactions.
   Hidden starting states only apply under .js-motion, which motion-init.js sets
   when reduced motion is off (and removes again if motion.js never runs). */

/* Hero entrance: copy settles line by line, the visual follows */
.js-motion .hero-copy > * { animation: settle 1.1s var(--ease) backwards; }
.js-motion .hero-copy > :nth-child(1) { animation-delay: .05s; }
.js-motion .hero-copy > :nth-child(2) { animation-delay: .18s; }
.js-motion .hero-copy > :nth-child(3) { animation-delay: .3s; }
.js-motion .hero-copy > :nth-child(4) { animation-delay: .42s; }
.js-motion .hero-visual { animation: settle-visual 1.4s var(--ease) .25s backwards; }
.js-motion .hero-note { animation: settle .9s var(--ease) .9s backwards, drift 7s ease-in-out 2s infinite; }
@keyframes settle { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } }
@keyframes settle-visual { from { opacity: 0; transform: translateY(26px) scale(.975); filter: blur(8px); } }
@keyframes drift { 50% { transform: translateY(-6px); } }

/* Scroll entrances: fade, rise a little and come into focus */
.js-motion [data-reveal] { opacity: 0; transform: translateY(22px); filter: blur(6px); transition: opacity 1s var(--ease), transform 1.1s var(--ease), filter 1s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js-motion [data-reveal].is-in { opacity: 1; transform: none; filter: none; }

/* Media inside revealed cards settles from a faint zoom (never hidden) */
.js-motion [data-media] img { scale: 1.06; transition: scale 1.8s var(--ease); }
.js-motion [data-media].is-in img { scale: 1; }

/* Buttons: soft press, sheen on hover, clear focus ring */
.button:active, .nav-cta:active { transform: scale(.97); transition-duration: .12s; }
.button:focus-visible, .nav-cta:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 3px; }
.button-primary::after, .nav-cta::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent); transform: skewX(-20deg); opacity: 0; pointer-events: none; }
.button-primary:hover::after, .nav-cta:hover::after { animation: sheen .9s var(--ease) forwards; }
@keyframes sheen { from { left: -60%; opacity: 1; } to { left: 130%; opacity: 1; } }

/* Cards: a light edge fades in along the top on hover */
:is(.studio-principles article, .studio-area-card, .team-card, .service-card, .price-card, .mc-project-card, .mc-plugin-card, .mc-model-grid figure, .investment-details) { position: relative; }
:is(.studio-principles article, .studio-area-card, .team-card, .service-card, .price-card, .mc-project-card, .mc-plugin-card, .mc-model-grid figure)::after { content: ""; position: absolute; z-index: 2; left: 12%; right: 12%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(127, 176, 255, .9), transparent); opacity: 0; transform: scaleX(.4); transition: opacity .6s var(--ease), transform .9s var(--ease); pointer-events: none; }
:is(.studio-principles article, .studio-area-card, .team-card, .service-card, .price-card, .mc-project-card, .mc-plugin-card, .mc-model-grid figure):hover::after { opacity: 1; transform: none; }
.principle-icon, .service-card svg { transition: background .5s, border-color .5s; }
.studio-principles article:hover .principle-icon, .service-card:hover svg { background: rgba(79, 141, 247, .2); border-color: rgba(127, 176, 255, .55); }
.tag-list li { transition: border-color .4s, color .4s; }
.tag-list li:hover { border-color: rgba(127, 176, 255, .5); color: #dce6f8; }

/* Navigation: a pill glides between links */
.nav-indicator { position: absolute; z-index: -1; top: 50%; left: 0; height: 36px; width: var(--w, 0); border-radius: 999px; background: rgba(145, 169, 215, .12); transform: translate(var(--x, 0), -50%); opacity: 0; transition: transform .55s var(--ease), width .55s var(--ease), opacity .3s; pointer-events: none; }
.nav-indicator.is-visible { opacity: 1; }
@media (min-width: 1061px) {
    .nav-links { position: relative; isolation: isolate; }
    .has-nav-indicator .nav-item:hover, .has-nav-indicator .nav-item.active { background: transparent; }
}

/* Pricing: the toggle thumb slides and prices crossfade */
.billing-toggle { position: relative; isolation: isolate; }
.billing-thumb { position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 0; width: var(--w, 0); border-radius: 999px; background: var(--blue); transform: translateX(var(--x, 0)); transition: transform .55s var(--ease), width .55s var(--ease); }
.has-billing-thumb .billing-option.is-active { background: transparent; }
.price-value.is-changing { animation: price-swap .6s var(--ease); }
@keyframes price-swap { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } }