body.bright-hours-collection {
  background:transparent!important;
  isolation:isolate;
}

body.bright-hours-collection > main {
  position:relative;
  z-index:1;
}

.bright-hours-atmosphere {
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  contain:strict;
  background:#f2f5f4;
}

.bright-hours-daylight-base,
.bright-hours-sky-reflection,
.bright-hours-sun-sweep,
.bright-hours-cloud-field,
.bright-hours-paper-light {
  position:absolute;
  pointer-events:none;
}

.bright-hours-daylight-base {
  z-index:0;
  inset:-15%;
  background:
    radial-gradient(ellipse 70% 85% at 84% 14%,rgba(164,215,244,.5) 0%,rgba(202,229,241,.26) 37%,transparent 68%),
    radial-gradient(ellipse 82% 70% at 8% 88%,rgba(248,224,171,.2) 0%,rgba(246,237,210,.12) 38%,transparent 70%),
    linear-gradient(124deg,#f4f5ef 0%,#eef4f4 46%,#e4eff3 100%);
  transform:translate3d(-2%,-1%,0) scale(1.06);
  animation:bright-hours-base-drift 42s cubic-bezier(.45,0,.55,1) infinite alternate;
  will-change:transform;
}

.bright-hours-sky-reflection {
  z-index:1;
  width:86%;
  height:104%;
  left:30%;
  top:-31%;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(107,190,235,.54) 0%,rgba(150,210,237,.31) 34%,rgba(202,231,240,.12) 58%,transparent 74%);
  filter:blur(38px);
  mix-blend-mode:multiply;
  opacity:.44;
  transform:translate3d(0,0,0) scale(1);
  animation:bright-hours-sky-drift 31s cubic-bezier(.42,0,.46,1) infinite alternate;
  will-change:transform;
}

.bright-hours-sun-sweep {
  z-index:2;
  width:116%;
  height:36%;
  left:-28%;
  top:18%;
  opacity:.68;
  background:linear-gradient(105deg,transparent 18%,rgba(255,244,194,.08) 32%,rgba(255,231,151,.48) 48%,rgba(255,249,222,.24) 58%,transparent 78%);
  filter:blur(30px);
  mix-blend-mode:screen;
  transform:translate3d(-13%,-3%,0) rotate(-12deg);
  animation:bright-hours-sun-passage 23s cubic-bezier(.38,0,.4,1) infinite alternate;
  will-change:transform;
}

.bright-hours-cloud-field {
  z-index:3;
  inset:-15%;
  overflow:hidden;
  opacity:.08;
  mix-blend-mode:multiply;
}

.bright-hours-cloud-shadow {
  position:absolute;
  display:block;
  left:0;
  top:0;
  width:58%;
  height:46%;
  border-radius:50%;
  opacity:0;
  background:radial-gradient(ellipse at center,rgba(102,126,137,.76) 0%,rgba(126,145,151,.39) 35%,rgba(160,172,170,.12) 58%,transparent 76%);
  filter:blur(48px);
  will-change:transform,opacity;
}

.bright-hours-paper-light {
  z-index:4;
  inset:0;
  background:
    radial-gradient(ellipse at 44% 40%,transparent 30%,rgba(77,104,111,.025) 100%),
    linear-gradient(180deg,rgba(255,255,255,.2),transparent 25%,transparent 78%,rgba(49,75,83,.035));
}

@keyframes bright-hours-base-drift {
  0% { transform:translate3d(-2%,-1%,0) scale(1.06); }
  52% { transform:translate3d(2.5%,1.5%,0) scale(1.1); }
  100% { transform:translate3d(-.5%,3%,0) scale(1.07); }
}

@keyframes bright-hours-sky-drift {
  0% { transform:translate3d(-10%,-4%,0) scale(.92); }
  48% { transform:translate3d(1%,5%,0) scale(1.08); }
  100% { transform:translate3d(13%,-1%,0) scale(1.16); }
}

@keyframes bright-hours-sun-passage {
  0% { transform:translate3d(-17%,-4%,0) rotate(-12deg) scaleX(.9); }
  46% { transform:translate3d(3%,4%,0) rotate(-10deg) scaleX(1.06); }
  100% { transform:translate3d(19%,10%,0) rotate(-8deg) scaleX(1.13); }
}

@media (prefers-reduced-motion:reduce) {
  .bright-hours-daylight-base,
  .bright-hours-sky-reflection,
  .bright-hours-sun-sweep {
    animation:none!important;
  }

  .bright-hours-cloud-shadow {
    display:none;
  }
}