/* SIVUSIIRTYMÄ — ks. assets/js/siirtyma.js */

/* Saapuessa punainen on ruudulla jo ensimmäisessä piirrossa. JS vaihtaa
   tämän SVG-verhoon heti kun body on olemassa. */
html.saapuu::after{
  content:''; position:fixed; inset:0; z-index:1000; background:var(--puna, #FF3600);
}

.siirtyma{
  position:fixed; inset:0; width:100%; height:100%; z-index:1000;
  display:none; pointer-events:none; overflow:visible;
}
.siirtyma__veto{
  fill:none; stroke:var(--puna, #FF3600);
  /* laatikon yksiköissä; venyy ruudun mukana */
  stroke-width:391; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:0 99999;
}
.siirtyma__taytto{ fill:var(--puna, #FF3600); opacity:0; }

/* KANSI-SIIRTYMÄ (ks. siirtyma.js): referenssin kuva on ruudulla jo
   ensimmäisessä piirrossa, samoin mitoin kuin etusivun avautunut kurkistus. */
html.saapuu-kansi::after{
  content:''; position:fixed; z-index:1000;
  left:clamp(6px,.6vw,10px); right:clamp(6px,.6vw,10px); top:clamp(6px,.6vw,10px); bottom:0;
  border-radius:clamp(22px,3.4vw,56px);
  background:var(--kansi-vari,#3a3a3a) var(--kansi-kuva) 50% 38% / cover no-repeat;
}
.kansi-siirto{ position:fixed; z-index:1000; overflow:hidden; pointer-events:none; background:#3a3a3a; }
.kansi-siirto img{ width:100%; height:100%; object-fit:cover; object-position:50% 38%; display:block; }

/* Sama fonttitiedosto kuin fonts.css:n Sunter Roughen, mutta font-display
   block: swap näytti nimen ensimmäisessä ruudussa varafontilla ennen
   kuin (välimuistissa oleva) fontti ehti latautua. */
@font-face{ font-family:'Sunter Kansi'; src:url('../fonts/SunterRoughen.woff2') format('woff2'); font-display:block; }

/* Nimi kortissa, samat mitat kuin etusivun .refet__kurkku-nimi
   (brandstein.css). --kansi-nosto tulee lähtösivulta. */
html.kansi-nimi.saapuu-kansi::after{
  background:linear-gradient(to bottom, rgba(25,25,25,.62), rgba(25,25,25,.28) calc(var(--kansi-nosto) * 1.2), rgba(25,25,25,0) calc(var(--kansi-nosto) * 2.4)),
             var(--kansi-vari,#3a3a3a) var(--kansi-kuva) 50% 38% / cover no-repeat;
  background-color:var(--kansi-vari,#3a3a3a);
  content:var(--kansi-nimi); box-sizing:border-box;
  padding:calc(var(--kansi-nosto) * .2 + .06em) 0 0 clamp(18px,2.2vw,40px);   /* .06em = kortin maskin ylätila */
  font-family:'Sunter Kansi','Sunter Roughen',sans-serif; font-weight:400; text-transform:uppercase;
  white-space:nowrap; font-size:calc(var(--kansi-nosto) * .62); line-height:.8; letter-spacing:-.015em;
  color:#E4DED0;
}
.kansi-siirto__savy{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(25,25,25,.62), rgba(25,25,25,.28) calc(var(--kansi-nosto) * 1.2), rgba(25,25,25,0) calc(var(--kansi-nosto) * 2.4));
}
.kansi-siirto__nimi{
  position:absolute; left:clamp(18px,2.2vw,40px); top:calc(var(--kansi-nosto) * .2); padding-top:.06em;
  font-family:'Sunter Kansi','Sunter Roughen',sans-serif; font-weight:400; text-transform:uppercase;
  white-space:nowrap; font-size:calc(var(--kansi-nosto) * .62); line-height:.8; letter-spacing:-.015em;
  color:#E4DED0;
}

/* Kermaiset reunat puhelimella lähdettäessä (siirtyma.js reunat): sivun
   pohja kerma ja body läpinäkyvä, jotta Safarin palkkien alla näkyy kerma
   eikä sivu, kuten valikon ollessa auki. */
html.siirtyma-reunat{ background:var(--kerma, #E4DED0) !important; }
html.siirtyma-reunat body{ background:transparent !important; }
html.siirtyma-reunat.saapuu body{ visibility:hidden; }   /* ennen JS:ää saapuessa */