/** * reveal.css — indtoning med stagger. * Elementer med klassen .tc-reveal toner blødt ind (op og ind), når de kommer * i syne (eller når forside-introen er færdig). JS armerer effekten ved at * sætte .tc-reveal-armed på ; uden JS og ved reduceret bevægelse er alt * synligt fra start, så intet skjules utilsigtet. */ .tc-reveal-armed .tc-reveal { /* Blød indtoning: fade (0→1) + glid op. Effekten armeres KUN af JS (.tc-reveal-armed sættes på ), så uden JS er alt synligt (opacity 1). prefers-reduced-motion nulstiller den nedenfor, så bevægelses-følsomme brugere ser indholdet med det samme. */ opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: opacity, transform; } .tc-reveal-armed .tc-reveal.is-visible { opacity: 1; transform: none; } /* Zoom-variant (fx hero-billedet): et roligt "settle" — starter en anelse indzoomet og lidt nede, og glider blødt på plads. Forbliver synligt hele vejen (ingen fade, intet flash), og bliver stående, når det er landet. Den lave zoom + lille drift giver bevægelse uden den hårde "punch". Står efter grund-reglen for at vinde. */ .tc-reveal-armed .tc-reveal--zoom { opacity: 1; transform: scale(1.07) translateY(14px); transition: transform 1.7s cubic-bezier(0.33, 1, 0.68, 1); } .tc-reveal-armed .tc-reveal--zoom.is-visible { transform: scale(1) translateY(0); } @media (prefers-reduced-motion: reduce) { .tc-reveal-armed .tc-reveal, .tc-reveal-armed .tc-reveal--zoom { opacity: 1; transform: none; transition: none; } }