/* Motion layer for the store and the student area (driven by js/efeitos.js): hero showcase,
   scroll reveals, card shine, border beam, the "ilha" toast and progress celebrations.
   Only transform/opacity animate, so it stays smooth on cheap phones; reduced motion turns it off. */

/* Hero: drifting light blobs behind the text and a lesson showcase in a browser window. */
.hero-loja { position: relative; overflow: hidden; isolation: isolate; }
.hero-loja::before, .hero-loja::after { content: ''; position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); pointer-events: none; }
.hero-loja::before { width: 46vw; height: 46vw; max-width: 560px; max-height: 560px; left: -12vw; top: -18vw; background: rgba(109, 74, 255, .20); animation: fxDeriva 14s ease-in-out infinite alternate; }
.hero-loja::after { width: 38vw; height: 38vw; max-width: 460px; max-height: 460px; right: -8vw; bottom: -16vw; background: rgba(198, 244, 50, .32); animation: fxDeriva 17s ease-in-out -6s infinite alternate-reverse; }
@keyframes fxDeriva { to { transform: translate(6vw, 4vw) scale(1.15); } }

.hero-grid > div:first-child > * { animation: fxSobe .7s cubic-bezier(.2, .8, .2, 1) both; }
.hero-grid > div:first-child > :nth-child(2) { animation-delay: .08s; }
.hero-grid > div:first-child > :nth-child(3) { animation-delay: .16s; }
.hero-grid > div:first-child > :nth-child(4) { animation-delay: .24s; }
.hero-grid > div:first-child > :nth-child(n+5) { animation-delay: .32s; }
@keyframes fxSobe { from { opacity: 0; transform: translateY(18px); } }
.hero-loja .hl { background: linear-gradient(var(--lima), var(--lima)) 0 100% / 0 45% no-repeat; animation: fxMarca .8s .55s cubic-bezier(.6, 0, .2, 1) forwards; }
@keyframes fxMarca { to { background-size: 100% 45%; } }

.hero-numeros { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 18px 0 0; font-size: .92rem; color: var(--suave); }
.hero-numeros b { display: block; font-family: 'Bricolage Grotesque', Inter, sans-serif; font-size: 1.7rem; line-height: 1.1; color: var(--texto); font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .hero-numeros { gap: 4px 16px; font-size: .8rem; } .hero-numeros b { font-size: 1.45rem; } }

.hero-grid > * { min-width: 0; }
.hero-vitrine { perspective: 1200px; animation: fxSobe .9s .2s cubic-bezier(.2, .8, .2, 1) both; }
.janela { background: #fff; border-radius: 14px; border: 1px solid var(--linha); box-shadow: 0 30px 60px -18px rgba(59, 30, 143, .35), 0 10px 22px rgba(28, 27, 34, .10); overflow: hidden; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2, .8, .2, 1); will-change: transform; }
.janela-top { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #f6f5f8; border-bottom: 1px solid var(--linha); }
.janela-top i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; flex: none; }
.janela-top i:nth-child(2) { background: #febc2e; }
.janela-top i:nth-child(3) { background: #28c840; }
.janela-top span { flex: 1; min-width: 0; margin-left: 8px; background: #fff; border: 1px solid var(--linha); border-radius: 99px; padding: 2px 12px; font-size: .74rem; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.janela-tela { position: relative; aspect-ratio: 16 / 9; background: #fff; }
.vit-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.vit-slide.on { opacity: 1; z-index: 1; }
.vit-slide img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 5s ease-out; }
.vit-slide.on img { transform: scale(1); }
.vit-play { position: absolute; left: 3%; bottom: 5%; z-index: 2; display: inline-flex; align-items: center; gap: 6px; background: var(--escuro); color: #fff; font-weight: 700; font-size: .82rem; border-radius: 99px; padding: 7px 14px 7px 10px; pointer-events: none; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.vit-play .ic { color: var(--lima); }
.vit-slide:hover ~ .vit-play, .vit-slide:focus-visible ~ .vit-play { background: var(--roxo); }
.vit-barras { display: flex; gap: 4px; padding: 10px 2px 0; }
.vit-barras button { flex: 1; height: 14px; padding: 5px 0; border: 0; background: none; cursor: pointer; }
.vit-barras button b { display: block; height: 4px; border-radius: 9px; background: #e3def0; overflow: hidden; }
.vit-barras button b::after { content: ''; display: block; height: 100%; width: 100%; background: var(--roxo); transform: scaleX(0); transform-origin: left; }
.vit-barras .feita b::after { transform: none; }
.vit-barras .on b::after { animation: fxStory var(--vit-ms, 4.5s) linear forwards; }
.hero-vitrine:hover .vit-barras .on b::after { animation-play-state: paused; }
@keyframes fxStory { to { transform: none; } }
.vit-leg { margin: 6px 2px 0; font-size: .9rem; color: var(--suave); min-height: 2.9em; }
.vit-leg b { color: var(--texto); }
@media (max-width: 899px) { .hero-vitrine { max-width: 560px; } }

/* Scroll reveal: efeitos.js hides only what starts below the fold, so nothing flashes or stays hidden without JS. */
.fx-oculto { opacity: 0; transform: translateY(26px); }
.fx-oculto.fx-in { opacity: 1; transform: none; transition: opacity .6s ease, transform .75s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--fx-i, 0) * 80ms); }

/* Course cards: the cover lifts and a light sweeps across it. */
.capa-brilho { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .38) 50%, transparent 65%); transform: translateX(-120%); }
@media (hover: hover) {
  .curso-card .capa { transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, filter .35s; }
  .curso-card:hover .capa { transform: translateY(-5px); box-shadow: 0 16px 30px -8px rgba(28, 27, 34, .35); }
  .curso-card:hover .capa-brilho { transform: translateX(120%); transition: transform .8s ease; }
}
.curso-card:active .capa { transform: scale(.98); }

/* Category tiles: a soft spotlight follows the pointer. */
.cat-tile { position: relative; overflow: hidden; isolation: isolate; }
.cat-tile::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(109, 74, 255, .16), transparent 70%); }
.cat-tile:hover::before { opacity: 1; }

/* Border beam: a light runs around the box that holds the purchase. */
@property --fx-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.beam { position: relative; }
.beam::before { content: ''; position: absolute; inset: 0; z-index: 5; border-radius: inherit; padding: 2px; pointer-events: none; background: conic-gradient(from var(--fx-ang), transparent 0 62%, var(--roxo2) 76%, var(--lima) 88%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: fxGira 4.5s linear infinite; }
@keyframes fxGira { to { --fx-ang: 360deg; } }

/* Shine on the main purchase buttons, every few seconds. */
.btn.brilha { position: relative; overflow: hidden; isolation: isolate; }
.btn.brilha::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); transform: translateX(-130%); animation: fxReflexo 4s 1.5s ease-in-out infinite; }
@keyframes fxReflexo { 0% { transform: translateX(-130%); } 30%, 100% { transform: translateX(130%); } }

/* End of a free lesson: the purchase card asks for attention once. */
.pl-cta.fx-chama { animation: fxChama 1s cubic-bezier(.2, .8, .2, 1) 2; }
@keyframes fxChama { 40% { transform: scale(1.025); box-shadow: 0 0 0 6px rgba(198, 244, 50, .55); } }

/* "Ilha": a dark pill at the top that opens into a message (cart, lesson done, milestones). */
.ilha { position: fixed; z-index: 200; top: 10px; left: 50%; width: min(440px, calc(100vw - 24px)); transform: translate(-50%, -140%) scale(.5); opacity: 0; background: #0f0e13; color: #fff; border-radius: 26px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); padding: 12px 16px; transition: transform .55s cubic-bezier(.2, 1.35, .4, 1), opacity .25s, border-radius .4s; pointer-events: none; }
.ilha.on { transform: translate(-50%, 0) scale(1); opacity: 1; pointer-events: auto; border-radius: 22px; }
.ilha-in { display: flex; align-items: center; gap: 12px; opacity: 0; transition: opacity .25s .15s; }
.ilha.on .ilha-in { opacity: 1; }
.ilha-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--lima); color: #0f0e13; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; }
.ilha-txt { flex: 1; min-width: 0; font-size: .92rem; line-height: 1.35; }
.ilha-txt b { display: block; font-size: .98rem; }
.ilha-txt span { color: #c9c5d3; }
.ilha a { color: var(--lima); font-weight: 700; white-space: nowrap; text-decoration: none; font-size: .9rem; }
.ilha-barra { height: 6px; border-radius: 9px; background: #2b2933; margin-top: 8px; overflow: hidden; }
.ilha-barra i { display: block; height: 100%; border-radius: 9px; background: var(--lima); width: var(--de, 0%); transition: width 1.1s .35s cubic-bezier(.2, .8, .2, 1); }

/* Right answer in "Sua vez!": emojis rise from the "+XP" badge, each in its own direction, then fall and fade. */
.fx-emojis { position: fixed; z-index: 300; width: 0; height: 0; pointer-events: none; }
.fx-emojis span { position: absolute; left: -.5em; top: -.5em; font-size: 26px; line-height: 1; opacity: 0; animation: fxEmoji 1.3s cubic-bezier(.2, .7, .3, 1) forwards; }
@media (max-width: 600px) { .fx-emojis span { font-size: 21px; } }
@keyframes fxEmoji {
  0% { opacity: 0; transform: translate(0, 0) scale(.4); }
  15% { opacity: 1; transform: translate(calc(var(--dx) * .35), calc(var(--dy) * .35)) scale(1.15); }
  55% { opacity: 1; transform: translate(calc(var(--dx) * .8), var(--dy)) rotate(var(--gira)); }
  100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 90px)) scale(.9) rotate(var(--gira)); }
}

/* Lesson loading: until player.js builds the stage, the box shows the brand and a running bar
   instead of a blank rectangle (the player replaces this markup when it starts). */
.aa-carregando { aspect-ratio: 16 / 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: #fff; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--linha); color: var(--suave); font-size: .9rem; }
.aa-carregando .marca { font: 800 clamp(20px, 3.6vw, 36px)/1 'Bricolage Grotesque', Inter, sans-serif; letter-spacing: -.03em; color: var(--texto); }
.aa-carregando .marca span { background: var(--lima); padding: 0 .16em; border-radius: .16em; display: inline-block; transform: rotate(-3deg); }
.aa-carregando i { width: min(220px, 42%); height: 5px; border-radius: 9px; background: #ece8f6; overflow: hidden; position: relative; }
.aa-carregando i::after { content: ''; position: absolute; inset: 0; width: 40%; border-radius: inherit; background: linear-gradient(90deg, var(--roxo2), var(--lima)); animation: fxCarrega 1.1s ease-in-out infinite; }
@keyframes fxCarrega { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

.cart-count.pula { animation: fxPula .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes fxPula { 40% { transform: scale(1.6); } }

/* Student area: progress bars fill when the page opens. */
.barra div { animation: fxEnche 1.1s .2s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes fxEnche { from { width: 0; } }
.pl-cert.fx-chama { animation: fxChama 1s cubic-bezier(.2, .8, .2, 1) 3; }

@media (prefers-reduced-motion: reduce) {
  .hero-loja::before, .hero-loja::after, .hero-grid > div:first-child > *, .hero-vitrine, .beam::before, .btn.brilha::after, .barra div, .pl-cta.fx-chama, .pl-cert.fx-chama, .aa-carregando i::after { animation: none !important; }
  .hero-loja .hl { animation: none; background-size: 100% 45%; }
  .vit-slide img, .janela { transform: none !important; transition: none; }
  .vit-barras .on b::after { animation: none; transform: none; }
  .ilha { transition: opacity .2s; }
}