/* River photography, fine paper grain and contours give the page a setting. */
:root {
  --paper-grain: url("assets/grain.svg");
  --river-contours: url("assets/river-contours.svg");
}

body {
  background-image: var(--paper-grain), var(--river-contours);
  background-size: 160px 160px, 1280px auto;
  background-position: left top, center 620px;
}

.header-shell {
  background-image: var(--paper-grain), linear-gradient(105deg, #193e32, #25483b 65%, #17382e);
}

.hero-atmosphere {
  isolation: isolate;
  overflow: hidden;
}

.hero-atmosphere::before,
.hero-atmosphere::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.hero-atmosphere::before {
  z-index: -2;
  inset: -7%;
  background: url("assets/otava.jpg") center 69% / cover no-repeat;
  filter: saturate(.65) blur(1px);
  transform: scale(1.07);
  animation: river-drift 28s ease-in-out infinite alternate;
}

.hero-atmosphere::after {
  z-index: -1;
  inset: 0;
  background-image:
    var(--paper-grain),
    linear-gradient(0deg, #193b32 0%, #193b3215 32%, #14352b20 72%, #193b3280 100%),
    linear-gradient(90deg, #102d23e8 0%, #173a2fd1 33%, #14372b8c 64%, #132f255c 100%);
  background-size: 160px 160px, cover, cover;
}

.hero .river-lines {
  color: #e3cc95;
  opacity: .22;
}

.hero h1 {
  text-shadow: 0 5px 35px #061d1740;
}

.hero-description {
  color: #e3e9dc;
}

.hero-photo {
  box-shadow: 0 30px 85px #051e1760;
  border: 1px solid #eee6c51f;
}

.booking-form {
  background-image: var(--paper-grain);
  background-size: 160px 160px;
}

.rooms {
  background-image: var(--paper-grain), var(--river-contours), radial-gradient(ellipse at 100% 0%, #d0dbbf95, transparent 62%);
  background-size: 160px 160px, 1150px auto, cover;
  background-position: left top, 140% 55%, center;
  background-repeat: repeat, no-repeat, no-repeat;
}

.dining {
  background-image:
    var(--paper-grain),
    linear-gradient(100deg, #123229ed 0%, #193b32ee 46%, #12362ada 100%),
    url("assets/terasa.jpg");
  background-size: 160px 160px, cover, cover;
  background-position: left top, center, center 55%;
  background-repeat: repeat, no-repeat, no-repeat;
}

.gallery-section {
  background-image: var(--paper-grain), var(--river-contours), radial-gradient(ellipse at 0% 0%, #f9f5e9, transparent 65%);
  background-size: 160px 160px, 1400px auto, cover;
  background-position: left top, 50% 30%, center;
}

.contact {
  background-image:
    var(--paper-grain),
    linear-gradient(90deg, #0d2b22f0 0%, #102f25e5 42%, #173a2ec9 100%),
    linear-gradient(0deg, #102d24 0%, transparent 45%),
    url("assets/otava.jpg");
  background-size: 160px 160px, cover, cover, cover;
  background-position: left top, center, center, center 65%;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
}

@keyframes river-drift {
  from { transform: scale(1.07) translate3d(-.8%, .4%, 0); }
  to { transform: scale(1.12) translate3d(.8%, -1%, 0); }
}

@media (max-width: 700px) {
  body { background-size: 160px 160px, 780px auto; }
  .hero-atmosphere::before {
    background-position: 52% center;
    animation: none;
    transform: scale(1.05);
  }
  .hero-atmosphere::after {
    background-image:
      var(--paper-grain),
      linear-gradient(180deg, #13372ce8 0%, #14392bd1 30%, #173a2f92 64%, #193b32f0 100%);
    background-size: 160px 160px, cover;
  }
  .rooms { background-position: left top, 70% 40%, center; }
  .contact { background-position: left top, center, center, 54% center; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-atmosphere::before { animation: none; transform: none; }
}