/* One motion rhythm across InfluenceLab. All effects are progressive. */
:root{--il-ease:cubic-bezier(.16,1,.3,1)}
.studio-home .hero-line{display:block;overflow:clip;padding-bottom:.13em;margin-bottom:-.13em}
.studio-home .hero-line>span{display:inline-block;transform-origin:left bottom}
.studio-home .hero h1.hero-promise .hero-line:first-child>span{color:var(--white)}
.studio-home .agency-image-frame{overflow:clip}
.studio-home .masthead-arrow{display:grid;place-items:center;width:2.25rem;height:2.25rem;flex:0 0 2.25rem;border:1px solid #ffffff35;border-radius:50%}
@media(prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:il-page-out 160ms ease both}
  ::view-transition-new(root){animation:il-page-in 240ms var(--il-ease) both}
  ::view-transition{pointer-events:none}
  @keyframes il-page-out{to{opacity:0}}
  @keyframes il-page-in{from{opacity:0}to{opacity:1}}

  /* A single opening sequence: lettering, invitation, then the real talent. */
  .studio-home .hero-copy,.studio-home .hero-promise{animation:none}
  .studio-home .hero-line>span{animation:il-letter-enter 850ms var(--il-ease) both}
  .studio-home .hero-line:nth-child(2)>span{animation-delay:110ms}
  .studio-home .hero-line .graffiti-accent::after{animation:il-brush-draw 750ms 350ms var(--il-ease) both}
  .studio-page .studio-hero-content>h1{animation:il-arrive 750ms var(--il-ease) both}
  .studio-home .hero-detail>.intro,.studio-page .studio-hero-content>.lead{animation:il-arrive 650ms 120ms var(--il-ease) both}
  .studio-home .hero-action-block,.studio-page .studio-hero-content>.search-actions{animation:il-arrive 650ms 200ms var(--il-ease) backwards}
  .studio-home .talent-masthead>.masthead-portrait{animation:il-talent-enter 900ms var(--il-ease) backwards;animation-delay:180ms;transition:translate 420ms var(--il-ease)}
  .studio-home .talent-masthead>.masthead-portrait:nth-child(2){animation-delay:270ms}
  .studio-home .talent-masthead>.masthead-portrait:nth-child(3){animation-delay:360ms}
  .studio-home .talent-masthead>.masthead-portrait:nth-child(4){animation-delay:450ms}
  .studio-home .talent-masthead .masthead-photo img{animation:none}
  .studio-home .masthead-arrow{transition:transform 350ms var(--il-ease),background-color 250ms,color 250ms,border-color 250ms}
  .studio-home .hero-action-block:focus-within,.studio-page .studio-hero-content>.search-actions:focus-within,.studio-home .talent-masthead>.masthead-portrait:focus-visible{animation:none}
  @keyframes il-letter-enter{from{opacity:.25;transform:translateY(72%) rotate(2deg)}to{opacity:1;transform:none}}
  @keyframes il-brush-draw{from{transform:rotate(-1.7deg) scaleX(0)}to{transform:rotate(-1.7deg) scaleX(1)}}
  @keyframes il-arrive{from{opacity:.35;transform:translateY(24px)}to{opacity:1;transform:none}}
  @keyframes il-talent-enter{from{opacity:.25;transform:translateY(42px) scale(.96)}to{opacity:1;transform:none}}

  .pill,.select-talent,.dialog-close,.filter-tabs button,.search-nav a,.underlined,.studio-text-link,.hero-benefits-link{transition:transform 200ms var(--il-ease),background-color 200ms ease,color 180ms ease,border-color 200ms ease,box-shadow 200ms ease,text-decoration-color 180ms ease}
  .pill:active:not(:disabled),.select-talent:active,.dialog-close:active{transform:translateY(0) scale(.985)}
  .pill>span:not([aria-hidden]){transform:none}
  .studio-home .real-talent-grid img,.studio-page .real-talent-grid img,.creator-avatar{transition:transform 450ms var(--il-ease),filter 350ms ease}
  .real-talent-grid article>a:first-child{overflow:hidden}
  .search-nav a{text-decoration-thickness:1px;text-underline-offset:.4em}
  .search-nav a:hover,.search-nav a:focus-visible{text-decoration:underline}
  .campaign-form :is(input,textarea,select),.brand-form :is(input,textarea,select){transition:border-color 180ms ease,box-shadow 180ms ease,background-color 180ms ease}
  .campaign-form :is(input,textarea,select):focus-visible,.brand-form :is(input,textarea,select):focus-visible{box-shadow:0 0 0 4px #8eaa6425}
  .contact-status:not(:empty){animation:il-arrive 280ms var(--il-ease)}
  #format-panel>h3,#format-panel>p{animation:il-arrive 280ms var(--il-ease)}
  .chart-bar{animation-duration:480ms}
  .studio-home .creator-card{animation-name:il-catalog-enter;animation-duration:550ms;animation-timing-function:var(--il-ease);animation-fill-mode:backwards}
  .studio-home .creator-card:focus-within{animation:none}
  @keyframes il-catalog-enter{from{opacity:.3;translate:0 24px}to{opacity:1;translate:0 0}}
  details>summary{transition:color 180ms ease,background-color 180ms ease}
  .faqs details[open]>p,.search-faq details[open]>p,.recruit-process[open]>p,.recruit-process[open]>.recruit-steps{animation:il-detail-in 200ms var(--il-ease)}
  @keyframes il-detail-in{from{opacity:.75;transform:translateY(-3px)}to{opacity:1;transform:none}}
  .studio-home .benefit-disclosure[open] .benefit-description,.studio-page .benefit-disclosure[open] .benefit-description{animation:il-detail-in 350ms var(--il-ease)}
  .studio-home .benefit-toggle,.studio-page .benefit-toggle{transition:transform 350ms var(--il-ease),background-color 220ms}

  /* Decorative depth follows native scrolling. Unsupported browsers stay static. */
  @supports(animation-timeline:view()) and (animation-range:entry){
    .studio-home .agency-scene{view-timeline-name:--agency-scene}
    .studio-home .agency-scene img{animation:il-scene-depth linear both;animation-timeline:--agency-scene;animation-range:entry 0% exit 100%;transform-origin:center}
    .studio-home .closing>a>span{animation:il-closing-arrow linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
    @keyframes il-scene-depth{from{transform:scale(1.08) translateY(-2%)}to{transform:scale(1.08) translateY(2%)}}
    @keyframes il-closing-arrow{from{rotate:-35deg;scale:.8}to{rotate:0deg;scale:1}}
  }

  @supports(transition-behavior:allow-discrete){
    .studio-home .mobile-menu{opacity:0;transform:translateY(-8px);transition:opacity 180ms ease,transform 220ms var(--il-ease),display 220ms allow-discrete}
    .studio-home .mobile-menu:not([hidden]){opacity:1;transform:none}
    @starting-style{.studio-home .mobile-menu:not([hidden]){opacity:0;transform:translateY(-8px)}}
  }
  @supports(transition-behavior:allow-discrete) and (overlay:auto){
    dialog{opacity:0;transform:translateY(12px) scale(.99);transition:opacity 200ms ease,transform 240ms var(--il-ease),display 240ms allow-discrete,overlay 240ms allow-discrete}
    dialog[open]{opacity:1;transform:none;animation:none}
    dialog::backdrop{background-color:#10131000;transition:background-color 220ms ease,display 240ms allow-discrete,overlay 240ms allow-discrete}
    dialog[open]::backdrop{background-color:#101310b8}
    @starting-style{dialog[open]{opacity:0;transform:translateY(12px) scale(.99)}dialog[open]::backdrop{background-color:#10131000}}
  }
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .pill:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 16px #00000014}
  .studio-home .real-talent-grid article>a:first-child:hover img,.studio-page .real-talent-grid article>a:first-child:hover img{transform:scale(1.025);filter:brightness(1.08)}
  .portrait-button:hover{transform:none}
  .portrait-button:hover .creator-avatar{transform:scale(1.045)}
  .select-talent:hover,.dialog-close:hover{transform:scale(1.035)}
  .studio-home .talent-masthead>.masthead-portrait:hover{translate:0 -7px}
  .studio-home .masthead-portrait:hover .masthead-arrow{transform:rotate(45deg);background:var(--lime);border-color:var(--lime);color:var(--ink)}
  .pill:hover:not(:disabled)>span[aria-hidden=true]{transform:translate(4px,-4px)}
  .studio-home .closing>a:hover>span{background:var(--lime);color:var(--ink)}
}
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
  html{scroll-behavior:auto!important}
  .studio-home .hero-copy,.studio-home .hero-promise,.studio-home .hero-detail>div,.studio-home .hero-team img,.studio-home .hero-photo,.studio-page .studio-hero-content>*,.studio-home .real-talent-grid img,.studio-page .real-talent-grid img,.creator-avatar,dialog[open],.studio-home .mobile-menu:not([hidden]){animation:none!important;transition:none!important;transform:none;translate:none;opacity:1}
  .pill,.select-talent,.dialog-close,.filter-tabs button,.search-nav a,.underlined,.studio-text-link,.hero-benefits-link,details>summary,.faqs details[open]>p,.search-faq details[open]>p,.recruit-process[open]>p,.recruit-process[open]>.recruit-steps{animation:none!important;transition:none!important}
  .studio-home .creator-card:hover,.studio-home .pill:hover,.studio-home .portrait-button:hover,.studio-page .pill:hover{transform:none}
  .studio-home .hero-line>span,.studio-home .talent-masthead>.masthead-portrait,.studio-home .agency-scene img,.studio-home .closing>a>span{animation:none!important;transition:none!important;transform:none;translate:none;rotate:none;scale:none;opacity:1}
}
@media print{.studio-home .hero-line{overflow:visible}.studio-home .hero-line>span,.studio-home .talent-masthead>.masthead-portrait,.studio-home .agency-scene img{animation:none!important;transform:none;opacity:1}}