/* =========================================================
   Motion layer — сдержанные анимации для официального сайта
   ========================================================= */
:root{--ease:cubic-bezier(.22,.61,.36,1);--ease-out:cubic-bezier(.16,1,.3,1)}

/* Плавный переход между страницами (Chrome / Edge / Safari 18+) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .35s var(--ease) both}
::view-transition-new(root){animation:vtIn .55s var(--ease-out) both}

section[id]{scroll-margin-top:78px}

/* ---------- Scroll progress ---------- */
.scroll-progress{position:fixed;top:0;left:0;width:100%;height:2px;z-index:40;pointer-events:none;
  transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--green),var(--blue))}

/* ---------- Header ---------- */
.site-header{animation:fadeDown .9s var(--ease-out) both;transition:box-shadow .5s var(--ease),background-color .5s var(--ease)}
.site-header.scrolled{box-shadow:0 12px 32px -22px rgba(16,45,41,.45)}
.brand{transition:opacity .3s}
.brand:hover{opacity:.8}

nav a{transition:color .3s var(--ease)}
nav a:not(.nav-cta){position:relative}
nav a:not(.nav-cta)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
nav a:not(.nav-cta):hover::after,nav a.active::after{transform:scaleX(1);transform-origin:left}
nav a.active{color:var(--green)}
.nav-cta{transition:background-color .35s var(--ease),color .35s var(--ease)}
.nav-cta:hover{background:var(--blue);color:#fff}

/* ---------- Hero (главная) и шапка «Quem somos» ---------- */
.hero,.about-hero{position:relative;overflow:hidden;isolation:isolate}
.about-hero{background:var(--cream);padding:110px 0 95px;border-bottom:1px solid var(--line)}
.hero::before,.about-hero::before{content:"";position:absolute;inset:-25%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 46% at 18% 32%,rgba(6,112,54,.09),transparent 70%),
    radial-gradient(34% 42% at 82% 72%,rgba(21,150,200,.09),transparent 70%);
  animation:drift 24s ease-in-out infinite alternate}

.hero .eyebrow,.hero .lead,.hero-actions,
.about-hero .section-number,.about-hero h1,.about-hero-actions{animation:rise 1.1s var(--ease-out) both}
.hero .eyebrow,.about-hero .section-number{animation-delay:.15s}
.about-hero h1{animation-delay:.3s}
.hero .lead,.about-hero-actions{animation-delay:.6s}
.hero-actions{animation-delay:.75s}
.about-hero-actions{margin-top:34px}

/* Заголовок поднимается строками из-под «маски» */
.hero h1 .line{display:block;overflow:hidden;padding:0 .12em .1em 0;margin-bottom:-.1em}
.hero h1 .line>span{display:block;animation:lineUp 1.3s var(--ease-out) both}
.hero h1 .line:nth-child(1)>span{animation-delay:.3s}
.hero h1 .line:nth-child(2)>span{animation-delay:.44s}

.hero-card{position:relative;overflow:hidden;animation:cardIn 1.2s var(--ease-out) .35s both}
.hero-card::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.14) 50%,transparent 65%);
  transform:translateX(-110%);animation:sheen 1.8s var(--ease) 2.1s both}
.hero-card>*{animation:rise .8s var(--ease-out) both}
.hero-card>:nth-child(1){animation-delay:.65s}
.hero-card>:nth-child(2){animation-delay:.75s}
.hero-card>:nth-child(3){animation-delay:.83s}
.hero-card>:nth-child(4){animation-delay:.91s}
.hero-card>:nth-child(5){animation-delay:.99s}
.hero-card>:nth-child(6){animation-delay:1.07s}
.hero-card>:nth-child(7){animation-delay:1.15s}
.hero-card>:nth-child(8){animation-delay:1.23s}
.hero-card>:nth-child(9){animation-delay:1.31s}
.hero-card>:nth-child(10){animation-delay:1.39s}
.hero-card>:nth-child(11){animation-delay:1.47s}
.hero-card>:nth-child(12){animation-delay:1.55s}

/* «Занавес»: первый экран остаётся на месте, следующий раздел наезжает поверх */
.curtain .hero,.curtain .about-hero{position:sticky;z-index:0}
.curtain .hero>.container,.curtain .about-hero>.container{
  opacity:calc(1 - var(--cover,0)*.75);transform:translateY(calc(var(--cover,0)*-40px)) scale(calc(1 - var(--cover,0)*.04));
  transform-origin:50% 0;will-change:opacity,transform}
.curtain main>section:not(.hero):not(.about-hero){position:relative;z-index:1}
.curtain main>section.section:not(.alt){background:var(--paper)}
.curtain .hero+section,.curtain .about-hero+section{box-shadow:0 -34px 60px -34px rgba(16,45,41,.35)}

/* ---------- Buttons & links ---------- */
.button{position:relative;overflow:hidden;transition:opacity 1s var(--ease-out),transform .4s var(--ease),box-shadow .4s var(--ease),background-color .3s}
.button::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);
  transform:translateX(-110%);transition:transform .9s var(--ease)}
.button:hover{transform:translateY(-2px);box-shadow:0 14px 26px -14px rgba(0,0,0,.4)}
.button:hover::after{transform:translateX(110%)}
.button.light::after{background:linear-gradient(110deg,transparent 30%,rgba(6,112,54,.12) 50%,transparent 70%)}
.text-link{text-underline-offset:4px;text-decoration-thickness:1px;transition:text-underline-offset .35s var(--ease),color .3s}
.text-link:hover{text-underline-offset:7px;color:var(--green)}

/* ---------- Section number with drawn line ---------- */
.section-number{display:flex;align-items:center;gap:14px}
.section-number::before{content:"";flex:0 0 34px;height:1px;background:currentColor;
  transform-origin:left;transition:transform 1.1s var(--ease-out) .15s}
.section-number.reveal:not(.in)::before{transform:scaleX(0)}

/* ---------- Большие контурные номера разделов на фоне ---------- */
.section{position:relative;isolation:isolate;overflow-x:clip}
.ghost-num{position:absolute;z-index:-1;top:40px;right:3vw;pointer-events:none;user-select:none;
  font-family:var(--serif);font-size:clamp(110px,17vw,250px);line-height:1;letter-spacing:-.02em;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(6,112,54,.13);
  transform:translateY(var(--gy,0));will-change:transform}
@media(max-width:900px){.ghost-num{font-size:clamp(90px,26vw,150px);top:20px;-webkit-text-stroke-color:rgba(6,112,54,.09)}}

/* ---------- Scroll reveal (classes added by motion.js) ---------- */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity 1s var(--ease-out),transform 1s var(--ease-out),
             box-shadow .5s var(--ease),border-color .5s var(--ease),background-color .5s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* Строки-маршруты: шаги загораются по очереди */
.flow .step,.stage-flow .step{display:inline-block;opacity:.22;transition:opacity .7s var(--ease),color .7s var(--ease);
  transition-delay:calc(var(--i,0)*170ms + 350ms)}
.flow .arr,.stage-flow .arr{display:inline-block;margin:0 .45em;color:var(--blue);opacity:0;transform:translateX(-8px);
  transition:opacity .6s var(--ease),transform .6s var(--ease-out);transition-delay:calc(var(--i,0)*170ms + 430ms)}
.flow.in .step,.stage-flow.in .step{opacity:1}
.flow.in .arr,.stage-flow.in .arr{opacity:1;transform:none}

/* Последнее слово финального заголовка — по словам */
.contact h2 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.contact h2 .w>span{display:inline-block;transform:translateY(105%);
  transition:transform 1.1s var(--ease-out);transition-delay:calc(var(--i,0)*55ms + 150ms)}
.contact h2.in .w>span{transform:none}

/* ---------- Cards hover ---------- */
.card,.info-card,.timeline>div,.metrics span,.legal-grid>div{position:relative}
.card::before,.timeline>div::after,.metrics span::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.card:hover::before,.timeline>div:hover::after,.metrics span:hover::before{transform:scaleX(1)}
.card.reveal.in:hover,.card:hover,.timeline>div:hover,.metrics span:hover{
  transform:translateY(-4px);box-shadow:0 24px 40px -30px rgba(6,75,40,.55)}
.card:hover{border-color:rgba(6,112,54,.3)}
.card,.timeline>div,.metrics span{transition:opacity 1s var(--ease-out),transform .8s var(--ease-out),box-shadow .5s var(--ease),
  border-color .5s var(--ease),background-color .6s var(--ease),color .6s var(--ease)}

/* Мягкий свет, следующий за курсором */
.card::after,.legal-grid>div::after,.info-card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),transparent 70%);
  transition:opacity .5s var(--ease)}
.accent-card::after{background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.12),transparent 70%)}
.legal-grid>div::after{background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(6,112,54,.06),transparent 70%)}
.card:hover::after,.legal-grid>div:hover::after,.info-card:hover::after{opacity:1}
.card>*,.info-card>*{position:relative;z-index:1}

.legal-grid div{transition:opacity 1s var(--ease-out),transform 1s var(--ease-out),background-color .4s var(--ease)}
.legal-grid b{transition:letter-spacing .5s var(--ease)}
.legal-grid div:hover b{letter-spacing:.02em}

/* Chips */
.residence-list span,.discipline-list span,.checklist span{transition:opacity .9s var(--ease-out),transform .9s var(--ease-out),border-color .35s var(--ease),color .35s var(--ease),background-color .35s var(--ease)}
.residence-list span:hover,.checklist span:hover{border-color:var(--green);color:var(--green-dark)}
.discipline-list span:hover{background:#dde5e1}

/* ---------- Липкие колонки (desktop) ---------- */
@media(min-width:901px){
  #conceito .info-card{position:sticky;top:120px;align-self:start}

  #faq .container{max-width:1120px;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);column-gap:72px;align-items:start}
  #faq .faq-head{grid-column:1;grid-row:1/span 30;position:sticky;top:120px}
  #faq .faq-head h2{margin-bottom:24px}
  #faq details{grid-column:2}
  #faq details:first-of-type{padding-top:0;border-top:0}
}

/* ---------- Timeline (desktop) ---------- */
@media(min-width:901px){
  .timeline{position:relative;margin-top:46px}
  .timeline::before{content:"";position:absolute;left:0;right:0;top:-18px;height:1px;
    background:linear-gradient(90deg,var(--green),var(--blue));
    transform:scaleX(0);transform-origin:left;transition:transform 1.8s var(--ease-out)}
  .timeline.drawn::before{transform:scaleX(1)}
  .timeline>div::before{content:"";position:absolute;left:22px;top:-22px;width:9px;height:9px;border-radius:50%;
    background:var(--paper);border:1px solid var(--green);transition:background-color .4s var(--ease),transform .4s var(--ease)}
  .timeline>div:hover::before{background:var(--green)}
}

/* Раздел «Implementação»: скролл «останавливается», этапы 01→05 проходят по очереди */
.pin-on .pin-sticky{position:sticky}
.pin-on .timeline::before{transform:scaleX(var(--tp,0));transition:transform .25s linear}
.pin-on .timeline>div:not(.current):not(.done){opacity:1}
.pin-on .timeline>div.current{background:var(--green);color:#fff;transform:none;
  box-shadow:0 26px 44px -30px rgba(6,75,40,.7)}
.pin-on .timeline>div.current b,.pin-on .timeline>div.current h3,.pin-on .timeline>div.current p{color:#fff}
.pin-on .timeline>div.current p{opacity:.85}
.pin-on .timeline>div.done::before,.pin-on .timeline>div.current::before{background:var(--green)}
.pin-on .timeline>div.current::before{transform:scale(1.35)}
.timeline b,.timeline h3,.timeline p{transition:color .6s var(--ease),opacity .6s var(--ease)}

/* ---------- FAQ ---------- */
summary{list-style:none;position:relative;padding-right:44px;transition:color .3s var(--ease)}
summary::-webkit-details-marker{display:none}
summary::before,summary::after{content:"";position:absolute;right:8px;top:50%;width:14px;height:1px;background:var(--green);
  transition:transform .45s var(--ease)}
summary::after{transform:rotate(90deg)}
details[open] summary::after{transform:rotate(0)}
summary:hover{color:var(--green)}
details[open] p{animation:rise .6s var(--ease-out) both}

/* ---------- Contact ---------- */
.contact{position:relative;overflow:hidden;isolation:isolate}
.contact::before{content:"";position:absolute;inset:-30%;z-index:-1;pointer-events:none;
  background:radial-gradient(30% 40% at 85% 25%,rgba(21,150,200,.22),transparent 70%),
             radial-gradient(35% 45% at 10% 90%,rgba(255,255,255,.06),transparent 70%);
  animation:drift 26s ease-in-out infinite alternate-reverse}

/* ---------- Quem somos ---------- */
.about-body .large::first-letter{float:left;font-family:var(--serif);font-size:4.1em;line-height:.82;
  padding:6px 12px 0 0;color:var(--green)}
.about-body .quote{position:relative;margin:56px 0 0;padding:6px 0 6px 30px;
  font-family:var(--serif);font-size:clamp(21px,2.4vw,26px);line-height:1.5;color:var(--green-dark)}
.about-body .quote::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(var(--green),var(--blue));transform-origin:top;transition:transform 1.4s var(--ease-out) .2s}
.about-body .quote.reveal:not(.in)::before{transform:scaleY(0)}
.about-why .why-accent{font-family:var(--serif);font-size:clamp(22px,2.6vw,30px);line-height:1.4;color:var(--green-dark);margin-top:34px}
.about-why .why-accent strong{font-weight:400}

/* Ключевые фразы подчёркиваются «маркером», когда абзац появляется */
.about main strong{background:linear-gradient(rgba(21,150,200,.16),rgba(21,150,200,.16)) 0 88%/100% .36em no-repeat}
.about main .reveal strong{background-size:0 .36em;transition:background-size 1.3s var(--ease-out) .55s}
.about main .reveal.in strong{background-size:100% .36em}

/* ---------- Keyframes ---------- */
@keyframes rise{from{opacity:0;transform:translateY(22px)}}
@keyframes lineUp{from{transform:translateY(108%)}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-100%)}}
@keyframes cardIn{from{opacity:0;transform:translateY(34px);box-shadow:0 0 0 rgba(36,91,83,0)}}
@keyframes sheen{to{transform:translateX(110%)}}
@keyframes drift{to{transform:translate3d(4%,-3%,0) rotate(3deg)}}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0;transform:translateY(12px)}}

/* ---------- Accessibility ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal,.flow .step,.flow .arr,.stage-flow .step,.stage-flow .arr{opacity:1!important;transform:none!important}
  .ghost-num{transform:none}
}