/* One repeated tile per 768px, matching the distance of one full loop. */
body { isolation: isolate; min-height: 100svh; }
.sticker-stage { position: fixed; inset: 0; overflow: clip; pointer-events: none; z-index: -1; }
.sticker-field { position: absolute; top: -768px; left: -768px; display: grid; width: max-content; opacity: .18; }
.sticker-tile { position: relative; width: 768px; height: 768px; }
.sticker-tile img { position: absolute; display: block; object-fit: contain; translate: -50% -50%; }
:root[data-theme="dark"] .sticker-field { opacity: .22; }
@keyframes sticker-drift { from { transform: translate(0, 0); } to { transform: translate(768px, 768px); } }
@media (prefers-reduced-motion: no-preference) {
 .sticker-field { animation: sticker-drift 120s linear infinite; will-change: transform; }
}

/* Paint the gradient on the document canvas, not the fixed sticker layer.
   Safari can then carry it behind its translucent browser controls. */
body {
  background-image:
    radial-gradient(ellipse at 0% 0%, #d8f49e 0%, transparent 67%),
    radial-gradient(ellipse at 100% 100%, #b7e4cf 0%, transparent 70%),
    linear-gradient(135deg, #e7f6c4 0%, #ddf0d0 48%, #cceade 100%);
}
:root[data-theme="dark"] body {
  background-image:
    radial-gradient(ellipse at 0% 0%, #30491b 0%, transparent 65%),
    radial-gradient(ellipse at 100% 100%, #103c34 0%, transparent 70%),
    linear-gradient(135deg, #192510 0%, #121e14 50%, #0e211e 100%);
}
/* Match the second goober's orange-blue palette in either theme. */
:root.easter-egg body {
  background-image:
    radial-gradient(ellipse at 0% 0%, #ffd0a1 0%, transparent 67%),
    radial-gradient(ellipse at 100% 100%, #9cc9ec 0%, transparent 70%),
    linear-gradient(135deg, #ffe6cc 0%, #edf0ef 50%, #c0dcf0 100%);
}

/* Keep the backdrop behind Safari's expanding and collapsing browser controls. */
.sticker-stage {
  bottom: auto;
  height: 100vh;
  height: 100lvh;
  min-height: 100%;
}
/* Let the backdrop reach screen edges while content clears the notch/home indicator. */
.website {
  --screen-gutter: 32px;
  padding-top: calc(var(--screen-gutter) + env(safe-area-inset-top, 0px));
  padding-right: calc(var(--screen-gutter) + env(safe-area-inset-right, 0px));
  padding-bottom: calc(var(--screen-gutter) + env(safe-area-inset-bottom, 0px));
  padding-left: calc(var(--screen-gutter) + env(safe-area-inset-left, 0px));
}
@media (min-width: 1600px) {
  .website {
    padding-top: calc(40px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  }
}
@media (max-width: 900px) { .website { --screen-gutter: 20px; } }
@media (max-width: 600px) { .website { --screen-gutter: 14px; } }

body {
  background-color: var(--browser-background);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}
/* iOS Safari clips fixed background images at the browser toolbar boundary.
   Use the scrolling document canvas there; the sticker animation stays fixed. */
@supports (-webkit-touch-callout: none) {
  @media (hover: none) and (pointer: coarse) {
    body { background-attachment: scroll; }
  }
}

/* Safari's chrome needs an opaque page color even when the visible canvas
   is a gradient. The gradient remains painted above this base color. */
:root { --browser-background: #d8f49e; }
:root[data-theme="dark"] { --browser-background: #30491b; }
:root.easter-egg { --browser-background: #ffd0a1; }