/* ============================================================
   ANGELA CONTEMPLA — animations.css
   Entradas suaves via IntersectionObserver + hovers + reduced motion
   ============================================================ */

[data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);
  will-change:opacity,transform;
}
[data-reveal].is-visible{
  opacity:1;
  transform:translateY(0);
}
[data-reveal-group] > *{
  opacity:0;
  transform:translateY(18px);
  transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);
}
[data-reveal-group].is-visible > *{
  opacity:1;
  transform:translateY(0);
}
[data-reveal-group].is-visible > *:nth-child(1){ transition-delay:0ms; }
[data-reveal-group].is-visible > *:nth-child(2){ transition-delay:60ms; }
[data-reveal-group].is-visible > *:nth-child(3){ transition-delay:120ms; }
[data-reveal-group].is-visible > *:nth-child(4){ transition-delay:180ms; }
[data-reveal-group].is-visible > *:nth-child(5){ transition-delay:240ms; }
[data-reveal-group].is-visible > *:nth-child(6){ transition-delay:300ms; }

@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal-group] > *{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* Glow que acompanha o mouse (desktop, opt-in via JS) */
.glow-follow,.card{ position:relative; overflow:hidden; }
.glow-follow::before,.card::before{
  content:"";
  position:absolute;
  left:var(--glow-x,50%);
  top:var(--glow-y,50%);
  width:340px;height:340px;
  background:radial-gradient(circle,rgba(212,175,55,.16),transparent 70%);
  transform:translate(-50%,-50%);
  opacity:0;
  transition:opacity var(--dur-base) var(--ease-out);
  pointer-events:none;
  z-index:0;
}
.glow-follow:hover::before,.card:hover::before{ opacity:1; }
@media (hover:none){ .glow-follow::before,.card::before{ display:none; } }

/* Contadores animados (apenas numeros reais, controlados via JS) */
.counter{ font-variant-numeric:tabular-nums; }

/* Fachos de luz decorativos do hero */
.light-beam{
  position:absolute;
  width:2px;
  background:linear-gradient(180deg,rgba(241,207,114,0),rgba(241,207,114,.5),rgba(241,207,114,0));
  opacity:.5;
  pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  .light-beam{ animation:beam-pulse 6s ease-in-out infinite; }
}
@keyframes beam-pulse{
  0%,100%{ opacity:.25; }
  50%{ opacity:.6; }
}

/* Tower Bridge: desenho arquitetônico + luz ambiente */
@media (prefers-reduced-motion:no-preference){
  .strategy-bridge.is-visible .bridge-draw{
    stroke-dasharray:1;
    stroke-dashoffset:1;
    animation:bridge-line-in 2.8s var(--ease-out) forwards;
  }
  .strategy-bridge.is-visible .bridge-walkway{ animation-delay:.18s; }
  .strategy-bridge.is-visible .bridge-cables{ animation-delay:.42s; }
  .strategy-bridge.is-visible .tower-bridge-bg::after{
    animation:bridge-shimmer 12s ease-in-out 2.2s infinite;
  }
  .strategy-bridge.is-visible .bridge-water{
    animation:bridge-water-flow 18s linear infinite;
  }
  .strategy-bridge.is-visible .bridge-lamps circle{
    animation:bridge-lamp-pulse 5.2s ease-in-out infinite;
  }
  .strategy-bridge.is-visible .bridge-lamps circle:nth-child(2){ animation-delay:.7s; }
  .strategy-bridge.is-visible .bridge-lamps circle:nth-child(3){ animation-delay:1.4s; }
  .strategy-bridge.is-visible .bridge-lamps circle:nth-child(4){ animation-delay:2.1s; }
  .strategy-bridge.is-visible .bridge-lamps circle:nth-child(5){ animation-delay:2.8s; }
}
@keyframes bridge-line-in{
  to{ stroke-dashoffset:0; }
}
@keyframes bridge-shimmer{
  0%,58%,100%{ transform:translateX(-72%);opacity:0; }
  66%{ opacity:.55; }
  80%{ transform:translateX(72%);opacity:0; }
}
@keyframes bridge-water-flow{
  to{ stroke-dashoffset:-168; }
}
@keyframes bridge-lamp-pulse{
  0%,100%{ opacity:.18; }
  50%{ opacity:.78; }
}

/* Underground: rotas em movimento, como trajetos possíveis */
@media (prefers-reduced-motion:no-preference){
  .solutions-underground.is-visible .tube-route{
    stroke-dasharray:14 28;
    animation:tube-route-flow 26s linear infinite;
  }
  .solutions-underground.is-visible .tube-route-b{ animation-duration:31s;animation-direction:reverse; }
  .solutions-underground.is-visible .tube-route-c{ animation-duration:35s; }
  .solutions-underground.is-visible .tube-route-d{ animation-duration:29s;animation-direction:reverse; }
  .solutions-underground.is-visible .tube-pulses circle{
    animation:tube-station-pulse 4.8s ease-in-out infinite;
  }
  .solutions-underground.is-visible .tube-pulses circle:nth-child(2){ animation-delay:1.1s; }
  .solutions-underground.is-visible .tube-pulses circle:nth-child(3){ animation-delay:2.2s; }

  .london-finale .eye-rotor{
    transform-box:view-box;
    animation:london-eye-turn 110s linear infinite;
  }
  .london-finale .eye-light-ring{
    animation:eye-light-travel 24s linear infinite;
  }
}
@keyframes tube-route-flow{
  to{ stroke-dashoffset:-168; }
}
@keyframes tube-station-pulse{
  0%,100%{ opacity:.2;transform:scale(.8);transform-origin:center; }
  50%{ opacity:.78;transform:scale(1.45); }
}
@keyframes london-eye-turn{
  to{ transform:rotate(360deg); }
}
@keyframes eye-light-travel{
  to{ stroke-dashoffset:-328; }
}

/* Página Soluções: uma linguagem de movimento para cada objetivo */
@media (prefers-reduced-motion:no-preference){
  .solutions-page-hero::before{ animation:solutions-grid-drift 18s ease-in-out infinite alternate; }

  .solution-stage .solution-copy{
    opacity:0; transform:translate3d(-24px,0,0);
    transition:opacity 400ms var(--ease-out) 80ms,transform 400ms var(--ease-out) 80ms;
  }
  .solution-stage .solution-media{
    opacity:0; transform:translate3d(24px,0,0) scale(.985);
    transition:opacity 400ms var(--ease-out) 130ms,transform 400ms var(--ease-out) 130ms,filter 300ms var(--ease-out);
  }
  .solution-stage .solution-layout--reverse .solution-copy{ transform:translate3d(24px,0,0); }
  .solution-stage .solution-layout--reverse .solution-media{ transform:translate3d(-24px,0,0) scale(.985); }
  .solution-stage.is-visible .solution-copy,.solution-stage.is-visible .solution-media{
    opacity:1; transform:translate3d(0,0,0) scale(1);
  }

  .solution-stage--homes.is-visible .solution-architecture path{
    stroke-dasharray:1; stroke-dashoffset:1;
    animation:solution-line-draw 2.4s var(--ease-out) forwards;
  }
  .solution-stage--homes.is-visible .solution-architecture path:nth-child(2){ animation-delay:.18s; }
  .solution-stage--homes.is-visible .solution-architecture path:nth-child(3){ animation-delay:.34s; }

  .solution-stage--capital.is-visible .solution-skyline > path:first-child{
    stroke-dasharray:16 22; animation:capital-skyline-flow 24s linear infinite;
  }
  .solution-stage--capital.is-visible .gherkin{
    stroke-dasharray:1; stroke-dashoffset:1;
    animation:solution-line-draw 2.8s var(--ease-out) .15s forwards;
  }
  .solution-stage--capital.is-visible .city-glint{ animation:city-glint-pulse 6.5s ease-in-out 2.2s infinite; }

  .solution-stage--business.is-visible .business-route{
    stroke-dasharray:12 24; animation:business-route-flow 18s linear infinite;
  }
  .solution-stage--business.is-visible .business-route--b{ animation-duration:23s; animation-direction:reverse; }
  .solution-stage--business.is-visible .business-route--c{ animation-duration:30s; }
  .solution-stage--business.is-visible .route-nodes circle{ animation:route-node-pulse 4.8s ease-in-out infinite; transform-origin:center; }
  .solution-stage--business.is-visible .route-nodes circle:nth-child(2){ animation-delay:.8s; }
  .solution-stage--business.is-visible .route-nodes circle:nth-child(3){ animation-delay:1.6s; }
  .solution-stage--business.is-visible .route-nodes circle:nth-child(4){ animation-delay:2.4s; }

  .solution-stage--mobility.is-visible .headlight-beam--one{ animation:headlight-sweep 9s ease-in-out infinite; }
  .solution-stage--mobility.is-visible .headlight-beam--two{ animation:headlight-sweep-two 11s ease-in-out 2.1s infinite; }
  .solution-stage--mobility.is-visible .road-line--one{ animation:road-mark-flow 8s linear infinite; }
  .solution-stage--mobility.is-visible .road-line--two{ animation:road-mark-flow 11s linear reverse infinite; }

  .solution-cota.is-visible .card{ animation:solution-card-settle 400ms var(--ease-out) both; }
}
@keyframes solutions-grid-drift{
  to{ transform:translate3d(22px,-10px,0); opacity:.38; }
}
@keyframes solution-line-draw{ to{ stroke-dashoffset:0; } }
@keyframes capital-skyline-flow{ to{ stroke-dashoffset:-228; } }
@keyframes city-glint-pulse{
  0%,100%{ opacity:.16; }
  45%{ opacity:.72; }
  58%{ opacity:.28; }
}
@keyframes business-route-flow{ to{ stroke-dashoffset:-216; } }
@keyframes route-node-pulse{
  0%,100%{ opacity:.24; transform:scale(.76); }
  50%{ opacity:.9; transform:scale(1.5); }
}
@keyframes headlight-sweep{
  0%,18%,100%{ transform:translateX(-130%) rotate(-7deg); opacity:0; }
  36%{ opacity:.82; }
  66%{ transform:translateX(68%) rotate(-2deg); opacity:.28; }
  74%{ opacity:0; }
}
@keyframes headlight-sweep-two{
  0%,22%,100%{ transform:translateX(-135%) rotate(5deg); opacity:0; }
  40%{ opacity:.55; }
  70%{ transform:translateX(72%) rotate(1deg); opacity:.18; }
  78%{ opacity:0; }
}
@keyframes road-mark-flow{ to{ transform:translate3d(12%,0,0) perspective(500px) rotateX(62deg) rotateZ(-2deg); } }
@keyframes solution-card-settle{
  from{ opacity:.4; transform:translateY(12px) scale(.985); }
  to{ opacity:1; transform:none; }
}

@media (prefers-reduced-motion:reduce){
  .solution-stage .solution-copy,.solution-stage .solution-media{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
  .solutions-page-hero::before,.solution-atmosphere *,.solution-cota .card{ animation:none !important; }
}

/* Estratégia: um marco de Londres por bloco */
@media (prefers-reduced-motion:no-preference){
  .strategy-clock .clock-draw,
  .lance-skyline.is-visible .skyline-draw,
  .compare-scales.is-visible .scales-draw,
  .fit-gates.is-visible .gates-draw,
  .faq-underground.is-visible .roundel-draw,
  .guide-lamp.is-visible .lamp-draw{
    stroke-dasharray:1; stroke-dashoffset:1;
    animation:est-line-draw 2.6s var(--ease-out) forwards;
  }

  /* Big Ben — relógio vivo (desenha no load; hero permanece sempre visível) */
  .strategy-clock .clock-hand-min{ transform-box:view-box; transform-origin:1205px 385px; animation:clock-spin 12s linear infinite; }
  .strategy-clock .clock-hand-hour{ transform-box:view-box; transform-origin:1205px 385px; animation:clock-spin 144s linear infinite; }
  .strategy-clock .clock-face{ animation:est-fade-soft 1.4s var(--ease-out) .8s both; }

  /* Skyline — luz que sobe */
  .lance-skyline .rise-light{ animation:skyline-rise 6.5s var(--ease-out) infinite; }
  .lance-skyline .skyline-beacon{ transform-box:fill-box; transform-origin:center; animation:beacon-pulse 4.6s ease-in-out infinite; }
  .lance-skyline .skyline-beacon:nth-child(2){ animation-delay:1.2s; }
  .lance-skyline .skyline-beacon:nth-child(3){ animation-delay:2.4s; }

  /* Tâmisa — correnteza + pontos de análise */
  .analysis-thames.is-visible .thames-flow{ animation:thames-current 9s linear infinite; }
  .analysis-thames .thames-nodes circle{ transform-box:fill-box; transform-origin:center; animation:thames-node-pulse 4.4s ease-in-out infinite; }
  .analysis-thames .thames-nodes circle:nth-child(2){ animation-delay:.8s; }
  .analysis-thames .thames-nodes circle:nth-child(3){ animation-delay:1.6s; }
  .analysis-thames .thames-nodes circle:nth-child(4){ animation-delay:2.4s; }
  .analysis-thames .thames-nodes circle:nth-child(5){ animation-delay:3.2s; }

  /* Balança — equilíbrio */
  .compare-scales .scales-beam{ transform-box:view-box; transform-origin:800px 150px; animation:scale-balance 9s ease-in-out infinite; }

  /* Portões — brilho nos remates */
  .fit-gates .gate-finial{ animation:finial-shimmer 7s ease-in-out infinite; }
  .fit-gates .gate-right .gate-finial{ animation-delay:1.4s; }

  /* Roundel — órbita + pulso */
  .faq-underground .roundel-orbit{ transform-box:view-box; transform-origin:800px 280px; animation:roundel-turn 60s linear infinite; }
  .faq-underground .roundel-pulses circle{ transform-box:fill-box; transform-origin:center; animation:beacon-pulse 4.2s ease-in-out infinite; }
  .faq-underground .roundel-pulses circle:nth-child(2){ animation-delay:2.1s; }

  /* Lampião — luz que respira */
  .guide-lamp .lamp-glow{ transform-box:fill-box; transform-origin:center; animation:lamp-breathe 6s ease-in-out infinite; }
}
@keyframes est-line-draw{ to{ stroke-dashoffset:0; } }
@keyframes est-fade-soft{ from{ opacity:0; } to{ opacity:1; } }
@keyframes clock-spin{ to{ transform:rotate(360deg); } }
@keyframes skyline-rise{
  0%{ stroke-dashoffset:620; opacity:0; }
  14%{ opacity:.6; }
  72%{ opacity:.5; }
  100%{ stroke-dashoffset:0; opacity:0; }
}
@keyframes beacon-pulse{
  0%,100%{ opacity:.2; transform:scale(.8); }
  50%{ opacity:.85; transform:scale(1.4); }
}
@keyframes thames-current{ to{ stroke-dashoffset:-184; } }
@keyframes thames-node-pulse{
  0%,100%{ opacity:.28; transform:scale(.82); }
  50%{ opacity:.9; transform:scale(1.35); }
}
@keyframes scale-balance{
  0%,100%{ transform:rotate(-2.4deg); }
  50%{ transform:rotate(2.4deg); }
}
@keyframes finial-shimmer{
  0%,100%{ opacity:.35; }
  50%{ opacity:.85; }
}
@keyframes roundel-turn{ to{ transform:rotate(360deg); } }
@keyframes lamp-breathe{
  0%,100%{ opacity:.1; transform:scale(.9); }
  50%{ opacity:.3; transform:scale(1.12); }
}
@media (prefers-reduced-motion:reduce){
  .strategy-clock .clock-hand-min,.strategy-clock .clock-hand-hour,
  .lance-skyline .rise-light,.lance-skyline .skyline-beacon,
  .analysis-thames .thames-flow,.analysis-thames .thames-nodes circle,
  .compare-scales .scales-beam,.fit-gates .gate-finial,
  .faq-underground .roundel-orbit,.faq-underground .roundel-pulses circle,.guide-lamp .lamp-glow{
    animation:none !important;
  }
  .strategy-clock .clock-draw,.lance-skyline .skyline-draw,.compare-scales .scales-draw,
  .fit-gates .gates-draw,.faq-underground .roundel-draw,.guide-lamp .lamp-draw{
    stroke-dasharray:none !important; stroke-dashoffset:0 !important;
  }
}

/* Resultados: conquista em três marcos de Londres */
@media (prefers-reduced-motion:no-preference){
  /* Arco triunfal desenha no load; hero permanece sempre visível */
  .results-arch .arch-draw{
    stroke-dasharray:1; stroke-dashoffset:1;
    animation:est-line-draw 2.8s var(--ease-out) forwards;
  }
  .results-arch .arch-glow-lights circle{ transform-box:fill-box; transform-origin:center; animation:beacon-pulse 4.8s ease-in-out infinite; }
  .results-arch .arch-glow-lights circle:nth-child(2){ animation-delay:1.4s; }
  .results-arch .arch-glow-lights circle:nth-child(3){ animation-delay:2.8s; }

  /* Catedral e guindaste desenham ao rolar */
  .method-cathedral.is-visible .cathedral-draw,
  .empty-crane.is-visible .crane-draw{
    stroke-dasharray:1; stroke-dashoffset:1;
    animation:est-line-draw 2.6s var(--ease-out) forwards;
  }
  .method-cathedral.is-visible .cathedral-drum-cols{ animation:est-fade-soft 1.6s var(--ease-out) 1.1s both; }

  /* Guindaste — leve balanço da lança, como obra em andamento */
  .empty-crane .crane-jib{ transform-box:view-box; transform-origin:553px 128px; animation:crane-sway 7s ease-in-out infinite; }
}
@keyframes crane-sway{
  0%,100%{ transform:rotate(-1.3deg); }
  50%{ transform:rotate(1.3deg); }
}
@media (prefers-reduced-motion:reduce){
  .results-arch .arch-glow-lights circle,.empty-crane .crane-jib{ animation:none !important; }
  .results-arch .arch-draw,.method-cathedral .cathedral-draw,.empty-crane .crane-draw{
    stroke-dasharray:none !important; stroke-dashoffset:0 !important;
  }
}

/* Mobile: presença mantida, movimento contido para poupar bateria (sem desligar) */
@media (max-width:768px){
  .tower-bridge-bg,.tube-map-bg,.london-eye-bg{ opacity:.48; }
  .solution-atmosphere{ opacity:.1; }

  .london-finale .eye-rotor{ animation-duration:220s; }
  .london-finale .eye-light-ring{ animation-duration:46s; }
  .tube-route,.tube-route-b,.tube-route-c,.tube-route-d{ animation-duration:60s; }
  .tube-pulses circle{ animation-duration:8s; }
  .bridge-water{ animation-duration:34s; }
  .bridge-lamps circle{ animation-duration:9s; }
  .solution-stage--business.is-visible .business-route,
  .solution-stage--business.is-visible .business-route--b,
  .solution-stage--business.is-visible .business-route--c{ animation-duration:46s; }
  .solution-stage--mobility.is-visible .headlight-beam--one{ animation-duration:16s; }
  .solution-stage--mobility.is-visible .headlight-beam--two{ animation-duration:19s; }
  .strategy-bridge.is-visible .tower-bridge-bg::after{ animation-duration:20s; }

  .strategy-clock .clock-hand-min{ animation-duration:24s; }
  .lance-skyline .rise-light{ animation-duration:11s; }
  .analysis-thames.is-visible .thames-flow{ animation-duration:16s; }
  .compare-scales .scales-beam{ animation-duration:14s; }
  .faq-underground .roundel-orbit{ animation-duration:120s; }
}

/* Skeleton (uso pontual, ex. mapa antes do carregamento) */
.skeleton{
  background:linear-gradient(90deg,var(--charcoal) 25%,var(--charcoal-2) 37%,var(--charcoal) 63%);
  background-size:400% 100%;
  animation:skeleton-loading 1.4s ease infinite;
}
@keyframes skeleton-loading{
  0%{ background-position:100% 50%; }
  100%{ background-position:0 50%; }
}
@media (prefers-reduced-motion:reduce){
  .skeleton{ animation:none; }
}