/*
  ELEVATE — Motion Language 01
  A visual vocabulary of vertical progress, gentle image reveals, and
  human-paced transitions. Transform + opacity where possible.
*/
:root{
  --motion-ease: cubic-bezier(.22,1,.36,1);
  --motion-fast: 300ms;
  --motion-duration: 830ms;
}

/* A subtle progress line strengthens the editorial navigation. */
.reading-progress{
  position:fixed;inset:0 auto auto 0;z-index:110;
  width:100%;height:3px;pointer-events:none;
  background:linear-gradient(90deg,#d31338,#ff6d82);
  transform:scaleX(0);transform-origin:left center;
  will-change:transform;
}

/* Homepage manifesto / kinetic brand band. */
.momentum-ribbon{
  position:relative;overflow:hidden;
  background:#22272d;color:#fff;
  padding:20px 0 19px;
  border-top:1px solid rgba(255,255,255,.08);
}
.momentum-track{display:flex;width:max-content;align-items:center}
.momentum-run{
  display:flex;align-items:center;flex:none;gap:36px;
  padding-right:36px;white-space:nowrap;
  animation:momentum-move 35s linear infinite;
}
.momentum-run span{
  font-family:var(--font);font-size:11px;font-weight:800;
  letter-spacing:.17em;text-transform:uppercase;
}
.momentum-run .momentum-star{font-size:23px;color:#fa617b;line-height:1}
.momentum-ribbon:hover .momentum-run,
.momentum-ribbon:focus-within .momentum-run{animation-play-state:paused}
@keyframes momentum-move{to{transform:translateX(-100%)}}

/* Signature orbit is decorative, tucked to the photo corner. */
.motion-seal{
  position:absolute;top:40px;left:-19px;z-index:4;
  width:108px;height:108px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--paper);color:var(--ink);
  box-shadow:0 13px 45px rgba(15,20,24,.16);
  pointer-events:none;
  animation:seal-entrance 1.15s .65s var(--motion-ease) both;
}
.motion-seal-orbit{
  position:absolute;inset:9px;border:1px dashed rgba(211,19,56,.62);
  border-radius:50%;animation:seal-rotate 22s linear infinite;
}
.motion-seal::before{
  content:'';position:absolute;inset:15px;
  border:1px solid #ded1cc;border-radius:50%;
}
.motion-seal-content{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px}
.motion-seal-content b{font:800 10px/1 var(--font);letter-spacing:.12em}
.motion-seal-content i{font:400 24px/1 var(--font);color:var(--red)}
.motion-seal-content small{font:700 7px/1.2 var(--font);letter-spacing:.1em;color:var(--muted)}
@keyframes seal-rotate{to{transform:rotate(360deg)}}
@keyframes seal-entrance{from{opacity:0;transform:translateY(24px) rotate(-15deg) scale(.8)}to{opacity:1;transform:none}}

/* Above-the-fold reveal — staggered, clipped typographic lines. */
.motion-ready .hero-home .hero-text > .eyebrow,
.motion-ready .hero-home .hero-summary,
.motion-ready .hero-home .hero-actions,
.motion-ready .hero-home .hero-bottomline,
.motion-ready .inner-hero .eyebrow,
.motion-ready .inner-hero p{
  animation:motion-rise var(--motion-duration) var(--motion-ease) both;
}
.motion-ready .hero-home .hero-text > .eyebrow{animation-delay:80ms}
.motion-ready .hero-home .hero-summary{animation-delay:400ms}
.motion-ready .hero-home .hero-actions{animation-delay:520ms}
.motion-ready .hero-home .hero-bottomline{animation-delay:660ms}
.motion-ready .inner-hero .eyebrow{animation-delay:60ms}
.motion-ready .inner-hero p{animation-delay:450ms}
.title-line{
  display:block;overflow:hidden;
  padding:.075em 0 .09em;
  margin:-.075em 0 -.09em;
}
.title-line-inner{display:block}
.motion-ready .title-line-inner{
  animation:title-unfold 1050ms var(--motion-ease) both;
}
.motion-ready .title-line:nth-child(1) .title-line-inner{animation-delay:140ms}
.motion-ready .title-line:nth-child(2) .title-line-inner{animation-delay:280ms}
@keyframes title-unfold{from{opacity:0;transform:translate3d(0,110%,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes motion-rise{from{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:translate3d(0,0,0)}}

.motion-ready .hero-image-wrap{
  animation:photo-curtain 1150ms 160ms var(--motion-ease) both;
}
.motion-ready .inner-hero-media{
  animation:photo-curtain 1100ms 230ms var(--motion-ease) both;
}
@keyframes photo-curtain{
  from{opacity:.35;clip-path:inset(0 0 100% 0)}
  to{opacity:1;clip-path:inset(0 0 0 0)}
}
.hero-image{
  transform:translate3d(var(--photo-x,0px),var(--photo-y,0px),0) scale(1.04);
  transition:transform 800ms var(--motion-ease);
}
.motion-ready .hero-caption{animation:caption-slide 900ms 550ms var(--motion-ease) both}
.motion-ready .ted-pill{animation:motion-rise 850ms 800ms var(--motion-ease) both}
@keyframes caption-slide{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}

/* One observer-driven language across all ten pages. */
.motion-ready .motion-reveal{
  opacity:0;transform:translate3d(0,28px,0);
  transition:opacity 780ms var(--motion-ease),transform 850ms var(--motion-ease);
  transition-delay:var(--reveal-delay,0ms);
}
.motion-ready .motion-reveal.motion-media{transform:translate3d(0,35px,0) scale(.985)}
.motion-ready .motion-reveal.is-visible{opacity:1;transform:none}
.motion-ready .section-heading.motion-reveal::after{
  content:'';position:absolute;bottom:-18px;left:0;
  width:48px;height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:left;
  transition:transform 850ms var(--motion-ease) 400ms;
}
.motion-ready .section-heading.motion-reveal.is-visible::after{transform:scaleX(1)}

/* Meaningful micro-interactions: signal that a destination is actionable. */
.btn{position:relative;isolation:isolate;overflow:hidden}
.btn::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,transparent 12%,rgba(255,255,255,.21) 44%,transparent 74%);
  transform:translateX(-160%);
  transition:transform 750ms var(--motion-ease);
  pointer-events:none;
}
.btn:hover::before{transform:translateX(145%)}
.btn > span[aria-hidden],.nav-contact > span,.inline-arrow > span,
.round-arrow,.service-list-big .arrow{
  transition:transform var(--motion-fast) var(--motion-ease),background var(--motion-fast);
}
.btn:hover > span[aria-hidden],.inline-arrow:hover > span{transform:translate(4px,-4px)}
.nav-contact:hover > span{transform:translate(3px,-3px)}
.service-card{position:relative;overflow:hidden}
.service-card::after{
  content:'';position:absolute;bottom:0;left:0;width:100%;height:4px;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform 540ms var(--motion-ease);
}
.service-card:hover::after,.service-card:focus-visible::after{transform:scaleX(1)}
.service-card:hover .round-arrow,.service-card:focus-visible .round-arrow{
  transform:rotate(45deg);background:var(--red);
}
.case-row a,.offer-grid article,.book-grid article,.article-grid a{
  transition:transform 400ms var(--motion-ease),box-shadow 400ms var(--motion-ease);
}
.case-row a:hover{transform:translateY(-4px)}
.offer-grid article:hover,.book-grid article:hover,.article-grid a:hover{
  transform:translateY(-6px);
}
.ted-video .play-big,.speaker-vid .play-big{transition:transform 400ms var(--motion-ease),box-shadow 400ms var(--motion-ease)}
.ted-video:hover .play-big,.ted-video:focus-visible .play-big,
.speaker-vid:hover .play-big{
  transform:translate(-50%,-50%) scale(1.12);
  box-shadow:0 0 0 13px rgba(255,255,255,.13);
}
.tiny-play{transition:transform 400ms var(--motion-ease),background 400ms var(--motion-ease)}
.ted-pill:hover .tiny-play{transform:scale(1.1);background:var(--red)}
.eyebrow-dot{animation:dot-breathe 3.5s ease-in-out infinite}
@keyframes dot-breathe{50%{box-shadow:0 0 0 6px rgba(211,19,56,.08)}}
.resource-visual:hover .book-photo{transform:rotate(0) translateY(-9px)}
.book-photo{transition:transform 600ms var(--motion-ease)}
.resource-visual:hover .book-back{transform:rotate(-8deg) translateY(3px)}
.book-back{transition:transform 600ms var(--motion-ease)}

/* A revealed card must remain free to lift on pointer/focus hover.
   This override intentionally beats the entrance animation's transform:none. */
.motion-ready .service-card.motion-reveal.is-visible:hover,
.motion-ready .service-card.motion-reveal.is-visible:focus-visible{
  transform:translate3d(0,-8px,0);
}
.motion-ready .case-row a.motion-reveal.is-visible:hover,
.motion-ready .case-row a.motion-reveal.is-visible:focus-visible{
  transform:translate3d(0,-4px,0);
}
.motion-ready .offer-grid article.motion-reveal.is-visible:hover,
.motion-ready .book-grid article.motion-reveal.is-visible:hover,
.motion-ready .article-grid a.motion-reveal.is-visible:hover{
  transform:translate3d(0,-6px,0);
}

/* Mobile navigation opens as a real panel; each link is readable and tappable. */
@media(max-width:900px){
  .mobile-menu:not([hidden]){animation:menu-arrive 270ms var(--motion-ease) both}
  .mobile-menu:not([hidden]) a{animation:motion-rise 460ms var(--motion-ease) both}
  .mobile-menu:not([hidden]) a:nth-child(1){animation-delay:50ms}
  .mobile-menu:not([hidden]) a:nth-child(2){animation-delay:90ms}
  .mobile-menu:not([hidden]) a:nth-child(3){animation-delay:130ms}
  .mobile-menu:not([hidden]) a:nth-child(4){animation-delay:170ms}
  .mobile-menu:not([hidden]) a:nth-child(5){animation-delay:210ms}
  .mobile-menu:not([hidden]) a:nth-child(n+6){animation-delay:250ms}
  @keyframes menu-arrive{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
}
@media(max-width:600px){
  .momentum-ribbon{padding:15px 0}
  .momentum-run{gap:25px;padding-right:25px}
  .momentum-run span{font-size:9px}
  .momentum-run .momentum-star{font-size:17px}
  .motion-seal{width:78px;height:78px;top:20px;left:0}
  .motion-seal-orbit{inset:6px}
  .motion-seal::before{inset:11px}
  .motion-seal-content b{font-size:8px}
  .motion-seal-content i{font-size:17px}
  .motion-seal-content small{font-size:6px}
  .motion-ready .motion-reveal{transition-duration:620ms}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation:none!important;
    transition-duration:.01ms!important;
    transition-delay:0ms!important;
  }
  .motion-reveal,.motion-ready .motion-reveal,
  .motion-ready .motion-reveal.motion-media,
  .motion-ready .title-line-inner,
  .motion-ready .hero-image-wrap,
  .motion-ready .inner-hero-media{
    opacity:1!important;transform:none!important;clip-path:none!important;
  }
  .hero-image{transform:none!important}
  .momentum-track{width:100%;overflow:hidden}
  .momentum-run[aria-hidden="true"]{display:none}
  .motion-seal{opacity:1;transform:none}
  .reading-progress{will-change:auto}
}