/*
 * Movimento do site público To You (carrega depois de site.css).
 * Regras: só transform, opacity e clip-path se animam; tudo que depende de JavaScript começa em ".js" (site.js);
 * com "reduzir movimento" nada se move e cada coisa aparece no estado final; sem JavaScript o conteúdo já está completo.
 */

@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ---------- Estampa de arcos da marca (linhas brancas finas sobre azul ou laranja) ---------- */
.hero, .band { position: relative; overflow: hidden; }
.hero::before, .band::before, .hero-arcs {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("img/estampa-arcos.svg") 0 0 / 48px 48px; opacity: .06;
}
.hero-in, .band-in { position: relative; z-index: 1; }
.hero-home::before { content: none; }

/* ---------- Botões: luz que corre pela borda ---------- */
.btn { position: relative; --sweep: #fff; }
.btn-primary { --sweep: var(--orange); }
.btn-outline { --sweep: var(--navy); }
.btn::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; opacity: 0;
  background: conic-gradient(from var(--angle), transparent 0 60%, var(--sweep) 80%, transparent 94%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity .2s;
}
@media (prefers-reduced-motion: no-preference) {
  .has-ap .btn.sweep-once::before { opacity: 1; animation: sweep-once 1.4s ease-in-out 1 both; }
}
@keyframes sweep { to { --angle: 360deg; } }
@keyframes sweep-once { from { --angle: 0deg; opacity: 1; } 85% { opacity: 1; } to { --angle: 360deg; opacity: 0; } }

/* ---------- Início: fundo do topo ---------- */
.hero-home .hero-in { padding-bottom: 176px; }
.hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-arcs { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 45%, transparent 85%); mask-image: linear-gradient(180deg, #000 0, #000 45%, transparent 85%); }
.sky { position: absolute; left: 0; right: 0; bottom: 0; height: 380px; }
.sky svg { position: absolute; right: 0; bottom: 0; display: block; height: 100%; width: auto; min-width: 100%; }
@media (min-width: 1440px) { .sky { height: min(26.4vw, 460px); } }
.sky-far path { fill: #0a0a82; }
.sky-near .bld { fill: #11119a; }
.sky-near .grid rect { fill: url(#hero-win); }
.sky-near .grid { opacity: .1; }
#hero-win rect { fill: #fff; }
.win { fill: #ff6201; opacity: 0; }
.win.wo { fill: #fff; }
.win.w1, .win.w4, .win.w6 { opacity: .55; }
.sky.is-moving { will-change: transform; }

/* título: palavras entram uma a uma e o traço laranja é desenhado (só CSS, sem esperar o JavaScript) */
.hero h1.hero-title { font-size: clamp(1.7rem, 7.4vw, 3.6rem); line-height: 1.12; letter-spacing: -.015em; max-width: none; text-wrap: balance; }
.hero-title .ht-line { display: block; }
.hero-title .ht-hl { position: relative; width: fit-content; max-width: 100%; }
.hero-title .brush { position: absolute; left: 0; bottom: -.14em; width: 100%; height: .22em; color: var(--orange); overflow: visible; pointer-events: none; }
.hero-home .lead { max-width: 560px; }
@media (prefers-reduced-motion: no-preference) {
  .hero-title .w { display: inline-block; animation: word-in .75s cubic-bezier(.2, .75, .2, 1) both; animation-delay: calc(.1s + var(--i, 0) * .09s); }
  .hero-title .w1 { --i: 0; } .hero-title .w2 { --i: 1; } .hero-title .w3 { --i: 2; }
  .hero-title .w4 { --i: 3; } .hero-title .w5 { --i: 5; } .hero-title .w6 { --i: 6; }
  .hero-title .brush { clip-path: inset(0 100% 0 0); animation: brush-in .8s cubic-bezier(.5, 0, .2, 1) 1s forwards; }
  .hero-home .search-card { animation: card-in .8s cubic-bezier(.2, .75, .2, 1) .45s both; }
  .js .win { animation: win-glow 11s ease-in-out infinite paused; }
  .js .win.w1 { animation-duration: 9s; animation-delay: -1s; } .js .win.w2 { animation-duration: 12s; animation-delay: -6s; }
  .js .win.w3 { animation-duration: 14s; animation-delay: -3s; } .js .win.w4 { animation-duration: 10s; animation-delay: -8s; }
  .js .win.w5 { animation-duration: 13s; animation-delay: -10s; } .js .win.w6 { animation-duration: 11s; animation-delay: -5s; }
  .js .hero.is-live .win { animation-play-state: running; }
}
@keyframes word-in { from { opacity: 0; transform: translate3d(0, .45em, 0); } to { opacity: 1; transform: none; } }
@keyframes brush-in { to { clip-path: inset(0 0 0 0); } }
@keyframes card-in { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
@keyframes win-glow { 0%, 100% { opacity: 0; } 22%, 58% { opacity: .62; } 80% { opacity: .05; } }

@media (max-width: 720px) {
  .hero-home .hero-in { padding-bottom: 188px; }
  .sky { height: 270px; }
}

/* ---------- Aparecer ao rolar (só depois que o JavaScript marca os blocos abaixo da dobra) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .rv:not(.is-in) { opacity: 0; transform: translate3d(0, 22px, 0); }
  .js .rv-run { transition: opacity .65s ease var(--rv-d, 0ms), transform .8s cubic-bezier(.2, .75, .2, 1) var(--rv-d, 0ms); }
}

.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }

/* ---------- Anuncie: topo (onda de luz e cartão ilustrativo). Base = estado final; o movimento só entra com "movimento liberado". ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-anuncie .wave, .hero-top .wave { display: block; opacity: 1; background: none; }
  .hero-anuncie .wave::before, .hero-top .wave::before, .hero-anuncie .wave::after, .hero-top .wave::after { content: ""; position: absolute; inset: 0; background: url("img/estampa.png") 0 0 / 640px auto; opacity: 0; transition: opacity 2.2s ease-in-out; --gr: 190px;
    -webkit-mask-image: radial-gradient(circle var(--gr) at var(--gx1, 30%) var(--gy1, 50%), #000 0, transparent 100%), radial-gradient(circle var(--gr) at var(--gx2, 70%) var(--gy2, 50%), #000 0, transparent 100%);
    mask-image: radial-gradient(circle var(--gr) at var(--gx1, 30%) var(--gy1, 50%), #000 0, transparent 100%), radial-gradient(circle var(--gr) at var(--gx2, 70%) var(--gy2, 50%), #000 0, transparent 100%); }
  .hero-anuncie .wave::after, .hero-top .wave::after { --gx1: var(--hx1, 60%); --gy1: var(--hy1, 40%); --gx2: var(--hx2, 20%); --gy2: var(--hy2, 60%); }
  .hero-anuncie .wave.g-a::before, .hero-top .wave.g-a::before, .hero-anuncie .wave.g-b::after, .hero-top .wave.g-b::after { opacity: .2; }
  .ha-card { animation: av-in .9s cubic-bezier(.2, .9, .2, 1) .3s both; }
  .av-dot { transform-box: fill-box; transform-origin: center; animation: av-pop .45s cubic-bezier(.3, 1.6, .5, 1) var(--d, 0s) both; }
  .av-dot.d1 { --d: .9s; } .av-dot.d2 { --d: 1.02s; } .av-dot.d3 { --d: 1.14s; } .av-dot.d4 { --d: 1.26s; } .av-dot.d5 { --d: 1.38s; } .av-dot.d6 { --d: 1.5s; } .av-dot.d7 { --d: 1.62s; }
  .av-link { animation: av-draw .7s ease var(--d, 0s) both; }
  .av-link.l1 { --d: 1s; } .av-link.l2 { --d: 1.12s; } .av-link.l3 { --d: 1.24s; } .av-link.l4 { --d: 1.36s; } .av-link.l5 { --d: 1.48s; } .av-link.l6 { --d: 1.6s; } .av-link.l7 { --d: 1.72s; }
  .av-pin { transform-box: fill-box; transform-origin: 50% 100%; animation: av-pin .7s cubic-bezier(.3, 1.6, .5, 1) .6s both; }
  .av-ring { transform-box: fill-box; transform-origin: center; animation: av-ring 2.4s ease-out 1.3s infinite; }
  .av-fade { animation: av-up .6s ease var(--d, 0s) both; }
  .av-fade.f1 { --d: 1s; } .av-fade.f2 { --d: 1.6s; } .av-fade.f3 { --d: 2.3s; } .av-fade.f4 { --d: 3.9s; } .av-ok.av-fade { --d: 3.7s; }
  .av-barfill { animation: av-grow 1.1s cubic-bezier(.2, .8, .3, 1) 1.8s both; }
  .av-zone { animation: av-grow .6s ease 3s both; }
  .av-nd { animation: av-sweep 1.5s cubic-bezier(.6, 0, .2, 1) 2.5s both, av-wobble 3s ease-in-out 4.2s infinite; }
  .av-pill { animation: av-pop .45s cubic-bezier(.3, 1.6, .5, 1) var(--d, 0s) both; }
  .av-pill.p1 { --d: 4s; } .av-pill.p2 { --d: 4.12s; } .av-pill.p3 { --d: 4.24s; } .av-pill.p4 { --d: 4.36s; } .av-pill.p5 { --d: 4.48s; }
  .doc-hidden .av-ring, .doc-hidden .av-nd { animation-play-state: paused; }
}
@keyframes av-in { from { opacity: 0; transform: translate3d(0, 26px, 0) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes av-pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }
@keyframes av-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes av-pin { from { opacity: 0; transform: translateY(-30px) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes av-ring { 0% { opacity: .7; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes av-up { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }
@keyframes av-grow { from { transform: scaleX(0); } to { transform: none; } }
@keyframes av-sweep { 0% { transform: translateX(4%); } 55% { transform: translateX(88%); } 100% { transform: translateX(60%); } }
@keyframes av-wobble { 0%, 100% { transform: translateX(60%); } 50% { transform: translateX(62%); } }

/* ---------- Anuncie: Como funciona (seis passos) ----------
   Estado de base = final (sem JavaScript e com "reduzir movimento" tudo já aparece completo).
   Com JavaScript e movimento liberado, ".cf:not(.play)" guarda o estado inicial e ".play" (motion.js, ao rolar até a seção) dispara as transições em sequência. */
.cf-sec { background: #f4f4fa; padding-bottom: 56px; }
.info-head { display: flex; flex-direction: column; gap: 6px; }
.cf { position: relative; margin-top: 12px; }
.cf-list { list-style: none; margin: 0; padding: 0; position: relative; display: flex; flex-direction: column; gap: 14px; }
.cf-track { display: none; }
.cf-step { position: relative; display: flex; align-items: flex-start; gap: 14px; text-align: left; min-width: 0; }
.cf-step:nth-child(1) { --t: .5s; } .cf-step:nth-child(2) { --t: 1.12s; } .cf-step:nth-child(3) { --t: 1.74s; }
.cf-step:nth-child(4) { --t: 2.36s; } .cf-step:nth-child(5) { --t: 2.98s; } .cf-step:nth-child(6) { --t: 3.6s; }
.cf-n { position: relative; z-index: 1; flex: none; width: 58px; height: 58px; border-radius: 50%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; background: var(--navy); border: 3px solid var(--navy); color: #fff; transform: scale(1.06); }
.cf-step.is-last .cf-n { background: var(--orange); border-color: var(--orange); color: var(--navy); transform: scale(1.1); }
.cf-card { flex: 1; min-width: 0; box-sizing: border-box; padding: 16px; border-radius: 18px; background: #fff; box-shadow: 0 1px 0 rgba(1, 0, 102, .05), 0 24px 44px -30px rgba(1, 0, 102, .45); display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; align-items: center; }
.cf-ic { grid-row: span 2; align-self: start; width: 40px; height: 40px; border-radius: 12px; background: #fff1e8; color: var(--orange-ink); display: flex; align-items: center; justify-content: center; }
.cf-ic svg { width: 22px; height: 22px; display: block; }
.cf-card h3 { margin: 0; font-size: 15.5px; line-height: 1.3; color: var(--navy); }
.cf-card p { margin: 0; grid-column: 2; font-size: 13.5px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.cf-step.is-last .cf-card { background: var(--orange); }
.cf-step.is-last .cf-ic { background: var(--navy); color: #fff; }
.cf-step.is-last .cf-card h3, .cf-step.is-last .cf-card p { color: var(--navy); }
/* celular: trilha em segmentos entre os números (o último passo não tem) */
.cf-step:not(.is-last)::before, .cf-step:not(.is-last)::after { content: ""; position: absolute; left: 27px; top: 29px; width: 4px; height: calc(100% + 14px); border-radius: 2px; }
.cf-step:not(.is-last)::before { background: #dcdcea; }
.cf-step:not(.is-last)::after { background: linear-gradient(180deg, var(--orange), #ff8a3d); transform-origin: top; }
@media (min-width: 1180px) {
  .cf { margin-top: 28px; }
  .cf-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
  .cf-track { display: block; position: absolute; left: calc(100% / 12); right: calc(100% / 12); top: 35px; height: 4px; border-radius: 2px; background: #dcdcea; overflow: hidden; }
  .cf-fill { position: absolute; inset: 0; background: linear-gradient(90deg, var(--orange), #ff8a3d); transform-origin: left; }
  .cf-step { flex-direction: column; align-items: center; text-align: center; gap: 0; }
  .cf-step:not(.is-last)::before, .cf-step:not(.is-last)::after { content: none; }
  .cf-n { width: 74px; height: 74px; font-size: 30px; }
  .cf-card { margin-top: 26px; width: 100%; flex: 1; padding: 24px 18px 26px; border-radius: 22px; display: flex; flex-direction: column; align-items: center; }
  .cf-ic { grid-row: auto; align-self: auto; width: 72px; height: 72px; border-radius: 20px; flex: none; }
  .cf-ic svg { width: 36px; height: 36px; }
  .cf-card h3 { margin-top: 16px; font-size: 17px; min-height: 2.6em; }
  .cf-card p { margin-top: 8px; font-size: 14px; }
}
@media (max-width: 1179.98px) { .cf-list { max-width: 760px; } .cf-fill { display: none; } }
.cf-step.is-last .cf-n::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 3px solid var(--orange); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .cf .cf-n { transition: background-color .5s ease var(--t), border-color .5s ease var(--t), color .5s ease var(--t), transform .5s cubic-bezier(.3, 1.6, .5, 1) var(--t); }
  .cf .cf-card { transition: opacity .7s ease calc(var(--t) + .1s), transform .7s cubic-bezier(.2, .9, .2, 1) calc(var(--t) + .1s); }
  .cf .cf-fill { transition: transform 3.4s cubic-bezier(.45, 0, .3, 1) .5s; }
  .cf .cf-step::after { transition: transform .6s linear calc(var(--t) + .3s); }
  .js .cf:not(.play) .cf-n { background: #fff; border-color: #dcdcea; color: #a0a0bf; transform: none; }
  .js .cf:not(.play) .cf-card { opacity: 0; transform: translate3d(0, 24px, 0); }
  .js .cf:not(.play) .cf-fill { transform: scaleX(0); }
  .js .cf:not(.play) .cf-step::after { transform: scaleY(0); }
  .js .cf.play .cf-step.is-last .cf-n::after { animation: cf-ring 2.2s ease-out calc(var(--t) + .5s) infinite; }
}
@keyframes cf-ring { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }

.num-strip { margin-top: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 48px; background: var(--navy); color: #fff; border-radius: 18px; padding: 26px 30px; position: relative; overflow: hidden; }
.num-strip > * { position: relative; }
.num-strip::before { content: ""; position: absolute; inset: 0; background: url("img/estampa-arcos.svg") 0 0 / 48px 48px; opacity: .07; pointer-events: none; }
.num-lead { font-size: 18px; font-weight: 600; flex: 1 1 160px; }
.num-list { display: flex; flex-wrap: wrap; gap: 18px 44px; margin: 0; }
.num-item { display: flex; flex-direction: column-reverse; gap: 2px; border-left: 3px solid var(--orange); padding-left: 14px; }
.num-item dd { margin: 0; font-size: 38px; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.num-item dt { font-size: 14px; color: #d4d4f4; max-width: 17ch; line-height: 1.35; }

/* ---------- Logotipo: entrada (uma vez por sessão), janelas que acendem, brilho suave e elevação ao passar o mouse ----------
   O desenho do logotipo nunca é alterado (sem cor, forma ou proporção novas). A imagem fica dentro de ".brand-mark" (do tamanho exato dela)
   e por cima dela ficam 4 luzes decorativas (".bw"), cada uma exatamente sobre uma das janelas laranja do "y": em repouso têm opacidade 0
   (aparece o logotipo original, intacto) e só a opacidade é animada. O brilho recortado usa a própria imagem como mask-image. */
.brand-mark { position: relative; display: inline-block; line-height: 0; }
.brand-mark img { display: block; }
.foot-col .brand-mark { margin-bottom: 4px; }
.foot-col .brand-mark img { margin: 0; }
.bws { position: absolute; inset: 0; pointer-events: none; }
.bw { position: absolute; width: 2.825%; height: 7.766%; opacity: 0; pointer-events: none; }
.bw1, .bw2 { height: 7.423%; }
.bw1 { left: 45.9625%; top: 29.107%; }
.bw2 { left: 49.4625%; top: 29.107%; }
.bw3 { left: 45.9625%; top: 38.727%; }
.bw4 { left: 49.4625%; top: 38.727%; }
.bw::before, .bw::after { content: ""; position: absolute; pointer-events: none; }
.bw::before { inset: 0; mix-blend-mode: screen; background: radial-gradient(closest-side, rgba(255, 210, 170, .95), rgba(255, 98, 1, 0) 70%); }
.bw::after { inset: -85%; background: radial-gradient(closest-side, rgba(255, 150, 70, .5), rgba(255, 98, 1, 0) 100%); }
.foot-col .bw::after { opacity: .6; }
@media (prefers-reduced-motion: no-preference) {
  .logo-intro .site-header { transform: translate3d(0, -14px, 0); opacity: 0; }
  .logo-intro .brand-mark { transform: translate3d(-10px, 0, 0); opacity: 0; }
  .logo-intro.logo-go .site-header { transform: none; opacity: 1; transition: transform .5s cubic-bezier(.2, .75, .2, 1), opacity .4s ease; }
  .logo-intro.logo-go .brand-mark { transform: none; opacity: 1; transition: transform .5s cubic-bezier(.2, .75, .2, 1), opacity .45s ease; }

  .brand-mark { transition: transform .28s cubic-bezier(.2, .75, .2, 1); }
  .brand:focus-visible .brand-mark { transform: translate3d(0, -2px, 0); }
  .bw { transition: opacity .25s ease; }
  .bw.bw-turn { animation: bw-turn .6s cubic-bezier(.3, 1.4, .5, 1) both; }
  .bw.bw-blink { animation: bw-blink .6s ease-in-out both; }
  .bw.bw-turn::before, .bw.bw-turn::after { animation: bw-pop .6s cubic-bezier(.3, 1.4, .5, 1) both; }
  .brand:focus-visible .bw { opacity: .85; }
  @media (hover: hover) {
    .brand:hover .brand-mark { transform: translate3d(0, -2px, 0); }
    .brand:hover .bw { opacity: .85; }
  }

  @supports ((mask-image: url("img/logo-toyou.png")) or (-webkit-mask-image: url("img/logo-toyou.png"))) {
    .brand-mark[data-logo-win=""]::after {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .8) 50%, rgba(255, 255, 255, 0) 62%) 100% 0 / 300% 100% no-repeat;
      -webkit-mask: url("img/logo-toyou.png") 0 0 / 100% 100% no-repeat;
      mask: url("img/logo-toyou.png") 0 0 / 100% 100% no-repeat;
      animation: logo-sheen 13s cubic-bezier(.45, 0, .25, 1) 3.5s infinite;
    }
  }
}
@keyframes logo-sheen {
  0% { background-position: 100% 0; }
  11%, 100% { background-position: 0 0; }
}
@keyframes bw-turn {
  0% { opacity: 0; }
  35% { opacity: 1; }
  60% { opacity: .55; }
  100% { opacity: 0; }
}
@keyframes bw-pop {
  0% { transform: scale(.7); }
  35% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
@keyframes bw-blink {
  0%, 100% { opacity: 0; }
  40% { opacity: 1; }
  60% { opacity: .9; }
}
.js.doc-hidden .bw, .js.doc-hidden .brand-mark::after { animation-play-state: paused; }

/* ---------- Inclinação 3D que assenta ao rolar (cartões de lançamento) ---------- */
.tilt-scene { perspective: 1100px; }
.tilt-on { rotate: 1 0 0 var(--tilt, 0deg); transform-origin: 50% 100%; }

/* ---------- Sem movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn.sweep-once::before { animation: none; opacity: 0; }
  .tilt-on { rotate: none; }
  .win { animation: none; }
}

/* aba em segundo plano: as janelas da cidade param de acender */
.js.doc-hidden .hero.is-live .win { animation-play-state: paused; }