/*
Theme Name: REMCO's ontwerp en fotografie (update 1.0.6)
Theme URI: https://remcovanessen.nl/
Author: REMCO's ontwerp en fotografie
Description: A custom, lightweight one-page theme based on the supplied billboard artwork.
Version: 1.0.6
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: remcos-ontwerp-fotografie
*/
html, body { margin:0; min-height:100%; }
body.remco-home { overflow:hidden; }
.scene { position:relative; width:100%; height:100svh; min-height:420px; overflow:hidden; background:#B2DCD6; }
.sky {
  position:absolute; inset:0;
  background:linear-gradient(to bottom, #B2DCD6 0%, #8CCFC7 72%, #3FB0A8 100%);
  overflow:hidden; isolation:isolate;
}
.billboard { position:absolute; z-index:3; left:3.7vw; top:0; height:100%; width:auto; }
.billboard__art { display:block; height:100%; width:auto; max-width:42vw; object-fit:contain; object-position:top left; }
.cloud { position:absolute; pointer-events:none; will-change:transform; }
.cloud img { display:block; width:100%; height:auto; }
.cloud--small { z-index:1; width:12vw; min-width:110px; left:101%; animation:drift-small 70s linear infinite; opacity:.78; }
.cloud--small-a { top:5%; animation-delay:0s; }
.cloud--small-b { top:24%; animation-delay:5s; }
.cloud--small-c { top:34%; animation-delay:12s; }
.cloud--medium { z-index:2; width:20vw; min-width:190px; left:101%; animation:drift-medium 55s linear infinite; opacity:.78; }
.cloud--medium-a { top:40%; animation-delay:1s; }
.cloud--medium-b { top:13%; animation-delay:8s; }
.cloud--medium-c { top:53%; animation-delay:15s; }
.cloud--large { z-index:4; width:42vw; min-width:360px; left:101%; animation:drift-large 90s linear infinite; opacity:.62; }
.cloud--large-a { top:45%; animation-delay:0s; }
.cloud--large-b { top:3%; animation-delay:15s; }
.contact-link { position:absolute; z-index:5; left:60%; top:30.5%; width:19%; display:block; transform-origin:center; animation:button-float 5.5s ease-in-out infinite; transition:transform .22s ease; }
.contact-link img { display:block; width:100%; height:auto; }
.contact-link:hover, .contact-link:focus-visible { transform:scale(1.2); animation-play-state:paused; }
.contact-link:focus-visible { outline:2px solid #333; outline-offset:6px; }
.mobile-contact-shelf { display:none; }
.mobile-contact-link { display:none; }
@keyframes drift-small { from { transform:translateX(0); } to { transform:translateX(-220vw); } }
@keyframes drift-medium { from { transform:translateX(0); } to { transform:translateX(-230vw); } }
@keyframes drift-large { from { transform:translateX(0); } to { transform:translateX(-240vw); } }
@keyframes button-float { 0%,100% { translate:0 0; } 50% { translate:0 -7px; } }
@media (max-width: 700px) {
  body.remco-home { overflow:auto; }
  .scene { height:100svh; min-height:520px; display:flex; flex-direction:column; background:#fff; }
  .sky { position:relative; inset:auto; height:82svh; min-height:430px; flex:0 0 82svh; }
  .billboard { left:50%; top:0; height:100%; transform:translateX(-50%); }
  .billboard__art { height:100%; max-width:none; }
  .cloud--small { z-index:2; width:26vw; min-width:85px; animation-name:drift-small; animation-duration:30s; animation-delay:0s; animation-timing-function:linear; animation-iteration-count:infinite; }
  .cloud--small-a { top:4%; animation-delay:0s; }
  .cloud--small-b { top:19%; animation-delay:3s; }
  .cloud--small-c { top:27%; animation-delay:10s; }
  .cloud--medium { z-index:3; width:42vw; min-width:145px; animation-name:drift-medium; animation-duration:20s; animation-delay:6s; animation-timing-function:linear; animation-iteration-count:infinite; }
  .cloud--medium-a { top:32%; }
  .cloud--medium-b { top:11%; animation-delay:0s; }
  .cloud--medium-c { top:48%; animation-delay:5s; }
  .cloud--large { z-index:4; width:72vw; min-width:270px; animation-name:drift-large; animation-duration:40s; animation-delay:16s; animation-timing-function:linear; animation-iteration-count:infinite; }
  .cloud--large-a { top:39%; animation-delay:0s; }
  .cloud--large-b { top:49%; animation-delay:10s; }
  .contact-link { display:none; }
  .mobile-contact-shelf { display:none; }
  /* Mobile contact is shown as an extra sign below the main billboard artwork. */
  .mobile-contact-link { position:absolute; z-index:5; display:block; left:50%; top:43%; transform:translateX(-50%); width:min(42vw, 210px); line-height:0; transform-origin:center; transition:transform .22s ease; }
  .mobile-contact-link img { display:block; width:100%; height:auto; }
  .mobile-contact-link:hover, .mobile-contact-link:focus-visible { transform:translateX(-50%) scale(1.12); }
  .mobile-contact-link:focus-visible { outline:2px solid #333; outline-offset:5px; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-link { animation:none !important; transition:none; }
  .mobile-contact-link { transition:none; }
}