/* Forsidens nye udseende: toppen med rebknuden (knude.js), signalet og lyset i teksten. Kun forsiden bruger filen.
   Skriften, de bløde overgange og stregerne står i style.css, så alle sider ser ud som forsiden. */

/* ---------- toppen ---------- */
/* Toppen går i fuld bredde, så lyset ikke sidder i en kasse midt på en bred skærm. */
.hero-band{position:relative;padding-block:0}
.hero-band .hero{background:none}
/* Lyset i maven, når 3D-knuden ikke kan vises: det rækker ned i næste afsnit og toner blødt ud. */
.hero-lys{position:absolute;left:0;top:0;width:100%;height:calc(100% + 18rem);pointer-events:none;z-index:-1;
  background:
    radial-gradient(56% 30% at 50% 72%,rgba(208,112,60,.30),rgba(208,112,60,0) 72%),
    radial-gradient(110% 42% at 50% 78%,rgba(208,112,60,.10),rgba(208,112,60,0) 70%)}
/* Lærredet med knuden ligger bag hele siden. Afsnit med egen baggrund dækker det. Knuden toner frem, når siden åbner. */
#reb{position:fixed;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:-1;display:none;opacity:0;transition:opacity 1.4s ease}
#reb.vist{opacity:1}
.med-reb #reb{display:block}
.med-reb .hero-lys{display:none}
/* ---------- signalet ---------- */
/* Et lille lys under knuden. Når man ruller, glider det ned langs teksten og tegner en løkke om citatet (knude.js). */
#signal{position:absolute;left:0;top:0;pointer-events:none;z-index:-1;overflow:visible;display:none}
.med-signal #signal{display:block}
:is(#signal,.markering) path{fill:none;stroke-linecap:round;stroke-linejoin:round}
:is(#signal,.markering) .s-loekke{stroke:var(--accent-soft);stroke-width:1.6}
:is(#signal,.markering) .s-loekke-glod{stroke:rgba(208,112,60,.22);stroke-width:7}
#signal .s-hale1{stroke:rgba(224,140,92,.16);stroke-width:2}
#signal .s-hale2{stroke:rgba(224,140,92,.3);stroke-width:2}
#signal .s-hale3{stroke:rgba(240,170,120,.6);stroke-width:2}
:is(#signal,.markering) .s-prik{fill:#ffe1c6}
:is(#signal,.markering) .s-halo{fill:rgba(224,140,92,.3)}
/* Lyset markerer også "Det, du starter på nu, kan ændre resten af dit liv til det bedre.". Afsnittet har sin egen
   baggrund, så løkken ligger i afsnittets eget lag, bag teksten. */
.markeret{position:relative;isolation:isolate}
.markering{position:absolute;left:0;top:0;pointer-events:none;z-index:-1;overflow:visible;display:none}
.med-signal .markering{display:block}

/* ---------- citatet ---------- */
/* Løkken overtager den orange streg. Når den er lukket, tænder "Den er dit signal." (og længere nede "kan ændre resten af dit liv til det bedre."). */
.pull .signal{display:block}
.med-signal .pull{border-left-color:transparent}
.med-signal .pull .signal{
  color:color-mix(in srgb,#fff,var(--accent-soft) calc(var(--signal,0) * 100%));
  text-shadow:0 0 calc(var(--signal,0) * 1.1em) rgba(208,112,60,calc(var(--signal,0) * .45))}
.med-signal .pull.signal-taendt .signal{animation:signal 1.6s ease-out}
.med-signal .beat.markeret span{
  color:color-mix(in srgb,#fff,var(--accent-soft) calc(var(--signal,0) * 100%));
  text-shadow:0 0 calc(var(--signal,0) * 1.1em) rgba(208,112,60,calc(var(--signal,0) * .45))}
.med-signal .beat.markeret.signal-taendt span{animation:signal 1.6s ease-out}
@keyframes signal{
  0%{text-shadow:0 0 .2em rgba(208,112,60,.2)}
  35%{text-shadow:0 0 1.6em rgba(224,140,92,.75)}
  100%{text-shadow:0 0 1.1em rgba(208,112,60,.45)}}

/* ---------- samme mand, andre svar ---------- */
/* Svarene fra manden, der mærker, tænder ét ad gangen, når man ruller forbi, og træmandens svar falmer (forside.js).
   Før de tænder, er de stadig til at læse. */
.med-lys .pair .before,.med-lys .pair .after{transition:color .8s ease}
.med-lys .pair .after{color:var(--muted)}
.med-lys .pair.taendt .after{color:#fff}
.med-lys .pair.taendt .before{color:var(--svag)}
.med-lys .pair.taendt .after{animation:gloed 1.8s ease-out forwards}
@keyframes gloed{
  0%{text-shadow:0 0 .2em rgba(208,112,60,0)}
  35%{text-shadow:0 0 1.3em rgba(224,140,92,.6)}
  100%{text-shadow:0 0 .9em rgba(208,112,60,.22)}}

/* ---------- luft ---------- */
/* De bløde overgange og stregerne står i style.css (--baand og --streg). Uden kanter blev den fulde luft under et afsnit
   og over det næste til ét stort hul. Forsidens afsnit har derfor lidt mindre luft end de andre siders. */
:root{--section:clamp(3.5rem,7vw,5.5rem)}

@media(prefers-reduced-motion:reduce){
  .med-signal .pull.signal-taendt .signal,.med-signal .beat.markeret.signal-taendt span,.med-lys .pair.taendt .after{animation:none}
}