/* Motion timing and interactions follow the Mobil 1 reference, in May’s colors. */
.motion-word,.motion-letter{font:inherit;color:inherit;letter-spacing:inherit}
.motion-word{display:inline-block;white-space:nowrap;clip-path:inset(-.18em -.08em -.22em -.08em)}
.motion-letter{display:inline-block}
.count-value{display:inline-block;font-variant-numeric:tabular-nums}

/* Static artwork remains the default and returns after each entrance. */
[data-logo-entrance]>.brand-animated-logo{display:none;width:100%;height:auto}
[data-logo-entrance]>.brand-static-logo{width:100%;height:auto}
[data-logo-entrance].logo-entrance>.brand-static-logo{display:none}
[data-logo-entrance].logo-entrance>.brand-animated-logo{display:block}
.floating-header .brand.logo-entrance>.brand-animated-logo{max-height:66px}
.logo-entrance .logo-draw-path{fill-opacity:1;stroke:var(--logo-stroke);stroke-width:var(--logo-line-width,2px);stroke-opacity:0;stroke-dasharray:1;stroke-dashoffset:0;animation:studio-logo-draw 1.5s ease var(--logo-delay,0s) both}
.logo-entrance .logo-wordmark{opacity:1;animation:studio-logo-word .55s ease .95s both}
@keyframes studio-logo-draw{0%{stroke-dashoffset:1;stroke-opacity:1;fill-opacity:0}45%{stroke-dashoffset:0;stroke-opacity:1;fill-opacity:0}72%{fill-opacity:1;stroke-opacity:1}100%{stroke-dashoffset:0;stroke-opacity:0;fill-opacity:1}}
@keyframes studio-logo-word{from{opacity:0}to{opacity:1}}

.eyebrow i{position:relative;animation:studio-dot-breathe 3.2s ease-in-out infinite}
.eyebrow i::after{content:"";position:absolute;inset:-4px;border:1px solid currentColor;border-radius:50%;opacity:0;pointer-events:none;animation:studio-dot-halo 3.2s cubic-bezier(.25,.46,.45,.94) infinite}
@keyframes studio-dot-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes studio-dot-halo{0%{transform:scale(.7);opacity:.45}72%,100%{transform:scale(1.9);opacity:0}}

.button{position:relative;transition:transform .4s var(--motion-ease),box-shadow .4s var(--motion-ease),background-color .4s,border-color .4s}
.hero-copy .button-primary,.page-intro .button-primary{animation:studio-button-pulse 3s ease-out infinite}
@keyframes studio-button-pulse{0%,100%{box-shadow:inset 0 1px 0 #ffffff66,0 8px 24px #b30c204d,0 0 0 0 #b30c2033}60%{box-shadow:inset 0 1px 0 #ffffff66,0 8px 24px #b30c204d,0 0 0 12px #b30c2000}}
.button-outline{background:#ffffff80;border-color:#ffffffcc;box-shadow:0 4px 16px #3a202b0d;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
:is(.plan-card,.promo-panel,.membership-panel,.quote-card,.calculator,.purchase-note){position:relative;isolation:isolate;transition:transform .4s var(--motion-ease),box-shadow .4s var(--motion-ease),border-color .4s}
:is(.plan-card,.promo-panel,.membership-panel,.quote-card,.calculator,.purchase-note)::before{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;background:radial-gradient(300px circle at var(--spotlight-x,50%) var(--spotlight-y,0%),var(--spotlight-color,#d6354820),transparent 80%);opacity:0;pointer-events:none;transition:opacity .4s}
.ink-section :is(.membership-panel,.calculator,.quote-card){--spotlight-color:#ffb8c324}
:is(.plan-card,.promo-panel,.membership-panel,.quote-card,.calculator,.purchase-note):focus-within::before{opacity:1}
.benefit-icon>.icon,.text-link>.icon,.button>.icon{transition:translate .4s var(--motion-ease)}

@media(hover:hover) and (pointer:fine){
 .floating-header:hover{--glass-glint-alpha:.10}
 .floating-header .primary-nav>a:not(.button):hover{color:var(--header-link-accent)}
 .floating-header .primary-nav>a:not(.button):hover::before{opacity:1}
 .floating-header .button-header:hover,.floating-header .button-header:focus-visible{border-color:rgba(255,255,255,.52);background:rgba(255,255,255,.22);box-shadow:0 3px 10px rgba(58,32,43,.12),inset 0 1px 0 rgba(255,255,255,.38)}
 .hero-copy .button-primary:hover,.page-intro .button-primary:hover{animation:none;box-shadow:inset 0 1px 0 #ffffff99,0 12px 32px #b30c2059}
 .button-outline:hover{border-color:#fff;box-shadow:0 8px 24px #b30c201f}
 .plan-card:hover,.promo-panel:hover{transform:translateY(-6px);border-color:#ca8893;box-shadow:0 24px 48px #b30c201f,inset 0 1px 0 #fff}
 .membership-panel:hover,.calculator:hover,.purchase-note:hover{transform:translateY(-4px);border-color:#d68b9977;box-shadow:0 24px 48px #3a202b26}
 .quote-card:hover{border-color:#ca8893;box-shadow:inset 0 0 0 1px #efd5db}
 .ink-section :is(.membership-panel,.calculator,.quote-card):hover{border-color:#d68b9977;box-shadow:0 24px 48px #00000026}
 :is(.plan-card,.promo-panel,.membership-panel,.quote-card,.calculator,.purchase-note):hover::before{opacity:1}
 .benefit:hover .benefit-icon>.icon{translate:0 -3px}
 .text-link:hover>.icon,.button:hover>.icon{translate:3px 0;transform:none}
 .text-link{position:relative}
 .text-link::after{content:"";position:absolute;left:0;right:30px;bottom:4px;height:1px;background:currentColor;opacity:.5;transform:scaleX(0);transform-origin:left;pointer-events:none;transition:transform .4s var(--motion-ease)}
 .text-link:hover::after,.text-link:focus-visible::after{transform:scaleX(1)}
 .home-hero::before,.page-intro::before{content:"";position:absolute;z-index:-1;inset:-20%;background:radial-gradient(ellipse at 20% 35%,#d6354821,transparent 42%),radial-gradient(ellipse at 75% 45%,#ef9aa92e,transparent 48%);filter:blur(32px);pointer-events:none;animation:studio-ambient 12s ease-in-out infinite alternate}
 .photo-stage{animation:studio-photo-drift 12s ease-in-out infinite alternate}
}
@keyframes studio-ambient{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(0,-24px,0) scale(1.05)}}
@keyframes studio-photo-drift{from{translate:0 0}to{translate:0 -10px}}
@media(max-width:1199px){.floating-header .brand.logo-entrance>.brand-animated-logo{max-height:60px}}
@media(max-width:760px){.floating-header .brand.logo-entrance>.brand-animated-logo{max-height:55px}}
.motion-paused .eyebrow i,.motion-paused .eyebrow i::after,.motion-paused .home-hero::before,.motion-paused .page-intro::before,.motion-paused .photo-stage,.motion-paused .hero-copy .button-primary,.motion-paused .page-intro .button-primary{animation-play-state:paused}

@media(prefers-reduced-motion:reduce){
 [data-logo-entrance].logo-entrance>.brand-static-logo{display:block}
 [data-logo-entrance].logo-entrance>.brand-animated-logo{display:none}
 .logo-entrance .logo-draw-path,.logo-entrance .logo-wordmark{animation:none}
 .eyebrow i,.eyebrow i::after,.home-hero::before,.page-intro::before,.photo-stage,.hero-copy .button-primary,.page-intro .button-primary{animation:none!important}
 .eyebrow i::after{opacity:0}
 .motion-word{clip-path:none}
 .button,.plan-card,.promo-panel,.membership-panel,.quote-card,.calculator,.purchase-note,.benefit-icon>.icon,.text-link>.icon,.button>.icon{transition:none}
 .text-link::after,:is(.plan-card,.promo-panel,.membership-panel,.quote-card,.calculator,.purchase-note)::before{display:none}
 .button:hover,.plan-card:hover,.promo-panel:hover,.membership-panel:hover,.calculator:hover,.purchase-note:hover{transform:none}
 .benefit:hover .benefit-icon>.icon,.text-link:hover>.icon,.button:hover>.icon{translate:none;transform:none}
}
@media print{
 [data-logo-entrance].logo-entrance>.brand-static-logo{display:block}
 [data-logo-entrance].logo-entrance>.brand-animated-logo{display:none}
 .logo-entrance .logo-draw-path,.logo-entrance .logo-wordmark,.eyebrow i,.eyebrow i::after,.home-hero::before,.page-intro::before,.photo-stage,.hero-copy .button-primary,.page-intro .button-primary{animation:none!important}
 .text-link::after,:is(.plan-card,.promo-panel,.membership-panel,.quote-card,.calculator,.purchase-note)::before{display:none}
 .motion-word{display:inline;clip-path:none}.motion-letter{display:inline;transform:none!important}
 .hero-proof .count-value{display:none}
 .hero-proof strong>.sr-only{position:static;width:auto;height:auto;margin:0;padding:0;overflow:visible;clip:auto;white-space:normal;font:inherit;color:inherit}
}
