/* Image layers from Mike Barton's portfolio:
   https://www.mikes.cv/window-back.webp
   https://www.mikes.cv/window-front.webp
   https://www.mikes.cv/window-shutter.webp
   Original rights remain with their owner; no open license is asserted.
   This independently authored stylesheet adapts the layers to a cool UI. */
@property --window-reading-light {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
.airplane-window {
  --window-travel: 172px;
  --window-reading-light: 0;
  width: 200px;
  height: 300px;
  user-select: none;
  transition: --window-reading-light .65s ease;
}
.reading-light-on .airplane-window { --window-reading-light: 1; }

.airplane-window .window-view {
  z-index: 0;
  inset: 59px 39px 81px 38px;
  width: auto;
  height: auto;
  border-radius: 51px;
  background: #bddff5;
  box-shadow: none;
}

.airplane-window .sky {
  background: linear-gradient(#83c3f4, #b8def6 38%, #e5f1f8 70%, #f5f8fb);
}

.airplane-window .sky-glow {
  inset: 105px 0 0;
  background: linear-gradient(transparent, #eef5fa66);
}

.airplane-window :is(.window-back, .window-frame, .window-shade) {
  position: absolute;
  inset: 0;
  display: block;
  width: 200px;
  height: 300px;
  max-width: none;
  border: 0;
  border-radius: 0;
  background: none;
  object-fit: contain;
  box-shadow: none;
  pointer-events: none;
  filter: grayscale(calc(1 - var(--theme-progress))) brightness(calc(1 - var(--theme-progress) * .80));
  transition: none;
  -webkit-user-drag: none;
}

.airplane-window .window-back {
  z-index: 1;
  filter: grayscale(calc(1 - var(--theme-progress))) brightness(calc(1 - var(--theme-progress) * .86));
}

.airplane-window .window-shade-track {
  position: absolute;
  z-index: 2;
  inset: 0;
  clip-path: inset(42px 25px 59px 24px round 59px);
  pointer-events: none;
}

.airplane-window .window-shade {
  z-index: auto;
  transform: translate3d(0, calc((var(--shade) - 1) * var(--window-travel)), 0);
  filter: grayscale(calc(1 - var(--theme-progress))) brightness(calc(1 - var(--theme-progress) * .82)) drop-shadow(-1px 3px 2px #11192350);
  transition: transform var(--theme-duration) var(--theme-ease);
  will-change: transform;
}

.airplane-window .window-shade-track::after {
  content: "";
  position: absolute;
  inset: 44px 26px 61px;
  border-radius: 56px;
  box-shadow: inset 0 0 9px #171c2340, inset 0 0 2px #171c232e;
  mask-image: url("./assets/window-shutter.webp");
  mask-repeat: no-repeat;
  mask-size: 200px 300px;
  mask-position: -26px calc(-44px + (var(--shade) - 1) * var(--window-travel));
  transition: mask-position var(--theme-duration) var(--theme-ease);
}

.airplane-window .window-shade::before,
.airplane-window .shade-handle {
  display: none;
}

.airplane-window .window-frame {
  z-index: 3;
}
.airplane-window .window-surface-light {
  position: absolute;
  inset: 0;
  width: 200px;
  height: 300px;
  max-width: none;
  pointer-events: none;
  object-fit: contain;
  mix-blend-mode: screen;
  filter: grayscale(1) sepia(.20) brightness(.72);
  opacity: calc(var(--window-reading-light) * (.18 + var(--theme-progress) * .30));
  mask-image: radial-gradient(ellipse 140px 185px at 82% 24%, #fff 0%, #ffffff9c 35%, #ffffff30 62%, transparent 92%);
  -webkit-mask-image: radial-gradient(ellipse 140px 185px at 82% 24%, #fff 0%, #ffffff9c 35%, #ffffff30 62%, transparent 92%);
}
.airplane-window .window-frame-light { z-index: 3; }
.airplane-window .window-shade-light {
  z-index: 1;
  transform: translate3d(0, calc((var(--shade) - 1) * var(--window-travel)), 0);
  transition: transform var(--theme-duration) var(--theme-ease);
}

.airplane-window .window-control {
  z-index: 4;
}

.airplane-window .window-hint {
  z-index: 5;
}

.airplane-window.dragging .window-shade,
.airplane-window.dragging .window-shade-light,
.airplane-window.dragging .window-shade-track::after {
  transition: none;
}

.airplane-window.clouds-paused .cloud {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .airplane-window .window-shade,
  .airplane-window .window-shade-light,
  .airplane-window .window-shade-track::after,
  .airplane-window .window-back,
  .airplane-window .window-frame {
    transition: none;
  }

  .airplane-window .cloud {
    animation: none;
  }
}