/* Calibrated natural light. Original artwork is the loading/failure baseline. */
:root {
  --cream-rgb: 247 228 201;
  --sage-rgb: 235 229 207;
  --value-rgb: 225 224 197;
}

.page-atmosphere { background: #f7e4c9; }
.page-paper { display: none; }
.page-sunlight::before {
  display: block;
  background-image: url('/assets/natural-light-desktop.png');
  background-position: center;
  background-size: cover;
}
/* Soften the botanical shadows behind the foreground content, including fallbacks. */
.page-sunlight::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgb(var(--cream-rgb) / .06);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.sunlight-canvas { display: none; }
.page-sunlight.is-rendered::before { display: none; }
.page-sunlight.is-rendered .sunlight-canvas { display: block; }
html[data-light-mode="original"] .page-sunlight::before { display: block; }
html[data-light-mode="original"] .page-sunlight .sunlight-canvas { display: none; }

.phone {
  background: linear-gradient(105deg, #dddccc, #737969 16%, #b5b8a8 34%, #ecebdd 63%, #7b806e);
  box-shadow:
    1px 1px 0 #f0eee0 inset,
    -1px -1px 0 #535c4d inset,
    3px 6px 7px -4px #3a38294a,
    10px 18px 23px -9px #4b453d52,
    20px 30px 36px -15px #5f54472e;
}
.phone::before,
.phone::after { background: #7c806d; }
.call-screen {
  background:
    radial-gradient(ellipse at 12% 4%, #e6ddbd20, #e6ddbd00 65%),
    linear-gradient(155deg, #858e70, #50684f 48%, #183b2c);
}
.screen { border-color: #19251d; }
.scene h2 .heading-olive { font-weight: 600; }

@media (max-width: 999px) and (orientation: portrait) {
  .page-sunlight::before,
  .page-sunlight.is-rendered::before {
    background-image: url('/assets/natural-light-mobile.png');
  }
}

/* Keep the call-section grouping shown in the approved mobile reference. */
@media (max-width: 759px) {
  .call-scene .scene-copy { display: block; }
  .call-scene .scene-copy > * { transform: none; opacity: 1; }
  .call-scene .device-area { order: 0; }
  .call-scene .scene-description { margin-top: 24px; }
  .call-scene .warm-accent { color: var(--terracotta); }
}

@media (max-width: 759px) and (min-height: 651px) {
  .call-scene { gap: 24px; }
}

/* Optional review controls float above the page without changing its layout. */
.light-comparison { position: fixed; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 100; display: flex; gap: 4px; padding: 5px; border: 1px solid #1e403466; border-radius: 24px; background: #fff5e5f2; box-shadow: 0 2px 14px #263e3020; }
.light-comparison button { appearance: none; min-height: 36px; margin: 0; padding: 6px 11px; border: 0; border-radius: 18px; background: transparent; color: #1e4034; font: 500 12px/1.3 sans-serif; cursor: pointer; }
.light-comparison button[aria-pressed="true"] { color: #fff5e5; background: #1e4034; }
.light-comparison button:focus-visible { outline: 2px solid #b26342; outline-offset: 2px; }
.light-comparison-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Default sunlight: fixed warm ground with a separate, slowly drifting wash.
   The same atmosphere covers the homepage, creation and loading curtain. */
html[data-background="sunlight"] {
  --cream-rgb: 247 234 212;
}
html[data-background="sunlight"] .page-atmosphere { background: var(--cream); }
html[data-background="sunlight"] .page-sunlight::before {
  display: block;
  background-image: url('/assets/sunlit-ground.webp');
  background-position: center;
  background-size: cover;
}
html[data-background="sunlight"] .page-sunlight::after {
  /* A light veil keeps the ground grain quiet behind smaller text. */
  background: rgb(var(--cream-rgb) / .14);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-background="sunlight"] .page-sunlight .sunlight-canvas { display: none; }
html[data-background="sunlight"] .sunlight-drift {
  position: absolute;
  inset: -18%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 88% 12%, #fff9dfb3, #fff9df00 64%),
    linear-gradient(132deg, #776b5014 6%, #fffbe600 30%, #fffbe687 48%, #fffbe638 59%, #fffbe600 78%);
  transform: translate3d(3%, -2%, 0) rotate(-2deg);
  opacity: .42;
}
html[data-background="sunlight"] .phone {
  /* A narrow contact edge grounds the device; the broader, lighter penumbra
     falls down-left, away from the upper-right source. All layers inherit the
     phone's existing rotation, scale, entrance and exit opacity. */
  --sun-shadow-rest:
    inset 1px 1px 0 #f0eee0,
    inset -1px -1px 0 #535c4d,
    -3px 5px 6px -2px rgb(66 57 41 / .26),
    -13px 18px 16px -5px rgb(78 65 44 / .20),
    -35px 44px 29px -10px rgb(91 74 47 / .15),
    -57px 66px 43px -15px rgb(101 82 52 / .09);
  --sun-shadow-bright:
    inset 1px 1px 0 #f0eee0,
    inset -1px -1px 0 #535c4d,
    -4px 6px 6px -2px rgb(66 57 41 / .29),
    -17px 22px 16px -5px rgb(78 65 44 / .22),
    -45px 53px 31px -10px rgb(91 74 47 / .17),
    -71px 79px 47px -15px rgb(101 82 52 / .10);
  box-shadow: var(--sun-shadow-rest);
}