/* Responsive atmospheric scenes. Copy and product UI remain the information layer. */
.site-nav{
  --lg-scene-background:url("assets/tatumo-backdrop-light-landscape-v6.png");
}

.hero-atmosphere{
  inset:0;
  opacity:1;
  filter:none;
  mask-image:none;
  background-image:url("assets/tatumo-backdrop-light-landscape-v6.png");
  background-position:56% center;
  background-size:cover;
}

.hero-atmosphere::after{
  background:
    linear-gradient(to bottom,transparent 65%,rgb(246 243 234 / .18) 76%,var(--paper) 100%);
}

:root[data-theme="dark"] .site-nav{
  --lg-scene-background:url("assets/tatumo-backdrop-dark-landscape-v6.png");
  --lg-opacity:.4;
}

:root[data-theme="dark"] .hero-atmosphere{
  background-image:url("assets/tatumo-backdrop-dark-landscape-v6.png");
  background-position:58% center;
}

:root[data-theme="dark"] .hero-atmosphere::after{
  background:linear-gradient(to bottom,transparent 75%,rgb(17 18 20 / .4) 88%,var(--paper) 100%);
}

.workflow-section::before{
  background-image:url("assets/tatumo-backdrop-dark-landscape-v6.png");
  background-position:66% 48%;
  background-size:cover;
  opacity:.94;
}

.workflow-section::after{
  background:linear-gradient(100deg,rgb(12 13 15 / .8) 0%,rgb(12 13 15 / .18) 68%,rgb(12 13 15 / .06) 100%);
}

@media (min-width:761px) and (max-width:1000px){
  .site-nav{
    --lg-scene-background:url("assets/tatumo-backdrop-light-portrait-v6.png");
  }

  .hero-atmosphere{
    inset:0;
    background-image:url("assets/tatumo-backdrop-light-portrait-v6.png");
    background-position:center top;
  }

  :root[data-theme="dark"] .site-nav{
    --lg-scene-background:url("assets/tatumo-backdrop-dark-portrait-v6.png");
  }

  :root[data-theme="dark"] .hero-atmosphere{
    inset:0;
    background-image:url("assets/tatumo-backdrop-dark-portrait-v6.png");
    background-position:center top;
  }
}

@media (max-width:760px){
  .site-nav{
    --lg-scene-background:url("assets/tatumo-backdrop-light-portrait-v6.png");
  }

  .hero-atmosphere{
    inset:0;
    background-image:url("assets/tatumo-backdrop-light-portrait-v6.png");
    background-position:34% top;
    background-size:cover;
  }

  :root[data-theme="dark"] .site-nav{
    --lg-scene-background:url("assets/tatumo-backdrop-dark-portrait-v6.png");
  }

  :root[data-theme="dark"] .hero-atmosphere{
    inset:0;
    background-image:url("assets/tatumo-backdrop-dark-portrait-v6.png");
    background-position:34% top;
  }

  .hero-atmosphere::after{
    background:linear-gradient(to bottom,transparent 72%,rgb(246 243 234 / .45) 87%,var(--paper) 100%);
  }

  :root[data-theme="dark"] .hero-atmosphere::after{
    background:linear-gradient(to bottom,transparent 72%,rgb(17 18 20 / .45) 87%,var(--paper) 100%);
  }

  .workflow-section::before{
    background-image:url("assets/tatumo-backdrop-dark-portrait-v6.png");
    background-position:center 42%;
  }

  .workflow-section::after{
    background:linear-gradient(100deg,rgb(12 13 15 / .82),rgb(12 13 15 / .14) 94%);
  }
}