/* Living shore — public WATCH glass.
   Hero-night is the town. Other cabinet plates glaze weather and props.
   Motion is PEI night (slow gyre, tide, a lamp that turns) — not mouse parallax. */

.shore,
#shore-stage {
  --shore-void: #0d0b14;
  --shore-gold: #d4a03c;
  --shore-brass: #b8924a;
  --shore-parchment: #e8d5a3;
  --shore-ember: #e2703a;
  --tide: 0.5;
  --hearth: 0.8;
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--shore-void);
  color: var(--shore-parchment);
  touch-action: pan-y;
  container-type: inline-size;
  container-name: shore;
}

.stage > .shore,
.stage #shore-stage {
  aspect-ratio: auto;
  width: 100%;
  max-width: none;
  height: 100%;
}

/* The night town — 60% of the well is this void plate. */
.shore::before {
  content: "";
  position: absolute;
  inset: -6%;
  z-index: 0;
  background-color: var(--shore-void);
  background-image: url("../art/hero-night.jpg");
  background-size: cover;
  background-position: 50% 58%;
  transform-origin: 42% 46%;
  animation: shore-night-air 64s ease-in-out infinite;
  pointer-events: none;
}

.shore-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.shore-world {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  max-width: 100%;
  background: transparent;
  pointer-events: none;
}

.shore-feed {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.shore[data-truth="live"] .shore-feed {
  display: block;
}

.shore-par {
  position: absolute;
  pointer-events: none;
}

.shore-drift {
  position: absolute;
  inset: -10%;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Sky plate — sidereal creep, deckles cropped by the oversize. */
.shore-sky {
  left: -6%;
  right: -6%;
  top: -8%;
  height: 62%;
  z-index: 1;
  mix-blend-mode: soft-light;
  opacity: 0.4;
  -webkit-mask-image: linear-gradient(to bottom, #000 48%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 48%, transparent 100%);
}

.shore-sky .shore-drift {
  background-image: url("../art/sky.jpg");
  background-size: 148% 148%;
  background-position: 46% 28%;
  animation: shore-sky-turn 110s linear infinite alternate;
}

/* Night sea, left bowl of the painting. Tide rides --tide. */
.shore-ocean {
  left: -8%;
  width: 64%;
  bottom: calc(-8% + var(--tide) * 3.2%);
  height: calc(44% + var(--tide) * 5.5%);
  z-index: 2;
  mix-blend-mode: overlay;
  opacity: 0.36;
  -webkit-mask-image: linear-gradient(to top, #000 38%, transparent 90%);
  mask-image: linear-gradient(to top, #000 38%, transparent 90%);
}

.shore-ocean .shore-drift {
  background-image: url("../art/ocean-night.jpg");
  background-size: 128% 128%;
  background-position: 36% 74%;
  animation: shore-swell-a 29s ease-in-out infinite;
}

.shore-ocean-swell {
  z-index: 3;
  left: -7%;
  width: 58%;
  bottom: calc(-6% + var(--tide) * 2.4%);
  height: calc(40% + var(--tide) * 4%);
  opacity: 0.24;
  mix-blend-mode: soft-light;
}

.shore-ocean-swell .shore-drift {
  background-image: url("../art/ocean.jpg");
  background-size: 132% 132%;
  background-position: 62% 70%;
  animation: shore-swell-b 41s ease-in-out infinite;
}

/* Watercolor clapboard glazed onto the painted row — lamps, not a second town. */
.shore-houses {
  left: 3%;
  width: 94%;
  bottom: 35%;
  height: 30%;
  z-index: 4;
  mix-blend-mode: soft-light;
  opacity: 0.26;
  animation: shore-lamps 8.4s ease-in-out infinite;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 28%,
    #000 72%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 28%,
    #000 72%,
    transparent 100%
  );
}

.shore-houses:empty,
.shore-lighthouse:empty {
  display: none;
}

.shore-houses canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center 62%;
}

/* Keyed tower seated as the lantern — rocks clipped, lamp on the painted light. */
.shore-lighthouse {
  left: 25.6%;
  top: 27.2%;
  width: 4.4%;
  height: 8.5%;
  z-index: 6;
  mix-blend-mode: screen;
  opacity: 0.78;
}

.shore-lighthouse canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center 6%;
}

/* Lamp origin. The living wedge is canvas; this is the honey bloom. */
.shore-beam {
  position: absolute;
  z-index: 5;
  left: 27.6%;
  top: 33.2%;
  width: 2px;
  height: 2px;
  pointer-events: none;
}

.shore-beam::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11cqi;
  height: 11cqi;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(232, 213, 163, 0.55) 0%,
    rgba(212, 160, 60, 0.18) 34%,
    transparent 70%
  );
  mix-blend-mode: screen;
  animation: shore-lamp-breathe 3.6s ease-in-out infinite;
}

.shore-beam::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 52cqi;
  height: 14cqi;
  transform-origin: 0 50%;
  background: linear-gradient(
    90deg,
    rgba(255, 238, 198, 0.34) 0%,
    rgba(246, 233, 206, 0.1) 42%,
    transparent 100%
  );
  clip-path: polygon(0 44%, 100% 8%, 100% 92%, 0 56%);
  mix-blend-mode: screen;
  filter: blur(0.5px);
  animation: shore-beam-css 9s linear infinite;
}

.shore[data-life="1"] .shore-beam::after {
  display: none;
}

.shore-fire {
  left: 48.5%;
  width: 12%;
  bottom: 10%;
  height: 24%;
  z-index: 8;
}

.shore-fire-pulse {
  position: absolute;
  inset: 0;
  transform-origin: 50% 88%;
  animation: shore-fire-pulse 2.35s ease-in-out infinite;
}

.shore-fire::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 118%;
  height: 58%;
  transform: translateX(-50%) scale(calc(0.88 + var(--hearth) * 0.28));
  background: radial-gradient(
    ellipse at 50% 70%,
    rgba(226, 112, 58, calc(0.28 + var(--hearth) * 0.38)),
    rgba(184, 146, 74, 0.1) 42%,
    transparent 74%
  );
  mix-blend-mode: screen;
  animation: shore-fire-glow 1.9s ease-in-out infinite;
  z-index: 0;
}

.shore-fire canvas {
  display: none;
}

.shore-embers,
.shore-life {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
}

.shore[data-truth="live"]::before,
.shore[data-truth="live"] .shore-sky,
.shore[data-truth="live"] .shore-ocean,
.shore[data-truth="live"] .shore-houses,
.shore[data-truth="live"] .shore-lighthouse,
.shore[data-truth="live"] .shore-beam,
.shore[data-truth="live"] .shore-fire,
.shore[data-truth="live"] .shore-embers {
  opacity: 0.28;
}

/* Fallback crawl if the fascia ticker is absent. Copy is the law. */
.shore-ticker {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  height: 2.15em;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(13, 11, 20, 0.9) 0%,
    rgba(13, 11, 20, 0.4) 72%,
    transparent 100%
  );
  font-family: "VT323", ui-monospace, monospace;
  font-size: clamp(0.78rem, 2vw, 1rem);
  letter-spacing: 0.18em;
  line-height: 2.15em;
  text-transform: uppercase;
  color: var(--shore-gold);
}

.shore-ticker__track {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: shore-ticker 96s linear infinite;
}

.shore-truth {
  position: absolute;
  top: 0.55em;
  left: 0.65em;
  z-index: 22;
  margin: 0;
  padding: 0.38em 0.58em;
  border: 1px solid rgba(184, 146, 74, 0.55);
  background: rgba(13, 11, 20, 0.52);
  color: var(--shore-gold);
  font-family: "VT323", ui-monospace, monospace;
  font-size: clamp(0.7rem, 1.6vw, 0.86rem);
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
}

.shore[data-truth="live"] .shore-truth {
  color: var(--shore-ember);
  border-color: rgba(226, 112, 58, 0.55);
}

@media (max-width: 720px) {
  .shore,
  #shore-stage {
    max-width: 100%;
  }

  .shore-ocean,
  .shore-ocean-swell {
    width: 70%;
  }

  .shore-ticker {
    height: 1.9em;
    line-height: 1.9em;
    letter-spacing: 0.14em;
  }
}

@keyframes shore-night-air {
  0%, 100% { transform: scale(1.02) translate3d(0, 0, 0); }
  38% { transform: scale(1.045) translate3d(-0.7%, 0.35%, 0); }
  71% { transform: scale(1.03) translate3d(0.45%, -0.2%, 0); }
}

@keyframes shore-sky-turn {
  from { transform: translate3d(-1.1%, 0.25%, 0) scale(1.04); }
  to { transform: translate3d(1.4%, -0.4%, 0) scale(1.04); }
}

@keyframes shore-swell-a {
  0%, 100% { transform: translate3d(-1.6%, 0.7%, 0) scale(1.06); }
  27% { transform: translate3d(0.4%, -0.35%, 0) scale(1.08); }
  61% { transform: translate3d(2.1%, 0.55%, 0) scale(1.05); }
}

@keyframes shore-swell-b {
  0%, 100% { transform: translate3d(1.8%, -0.4%, 0) scale(1.07); }
  44% { transform: translate3d(-1.2%, 0.9%, 0) scale(1.04); }
  78% { transform: translate3d(0.6%, 0.15%, 0) scale(1.08); }
}

@keyframes shore-lamps {
  0%, 100% { opacity: 0.18; }
  42% { opacity: 0.32; }
  63% { opacity: 0.22; }
}

@keyframes shore-lamp-breathe {
  0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
}

@keyframes shore-beam-css {
  0% { transform: rotate(-22deg); opacity: 0.08; }
  14% { opacity: 0.7; }
  36% { transform: rotate(24deg); opacity: 0.22; }
  50% { opacity: 0.04; }
  100% { transform: rotate(338deg); opacity: 0.08; }
}

@keyframes shore-fire-pulse {
  0%, 100% { transform: scale(1, 1); }
  16% { transform: scale(1.04, 1.09); }
  33% { transform: scale(0.99, 0.96); }
  51% { transform: scale(1.025, 1.06); }
  70% { transform: scale(1.01, 0.98); }
  86% { transform: scale(1.03, 1.045); }
}

@keyframes shore-fire-glow {
  0%, 100% { opacity: 0.72; }
  28% { opacity: 1; }
  47% { opacity: 0.78; }
  69% { opacity: 0.94; }
}

@keyframes shore-ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.shore--still::before,
.shore--still .shore-drift,
.shore--still .shore-houses,
.shore--still .shore-fire-pulse,
.shore--still .shore-beam::before,
.shore--still .shore-beam::after,
.shore--still .shore-ticker__track,
.shore--still .shore-fire::before {
  animation: none !important;
}

.shore--still::before {
  transform: none;
  inset: 0;
}

.shore--still .shore-drift {
  transform: none;
}

.shore--still .shore-ocean,
.shore--still .shore-ocean-swell {
  bottom: -6%;
  height: 44%;
}

@media (prefers-reduced-motion: reduce) {
  .shore::before,
  .shore-drift,
  .shore-houses,
  .shore-fire-pulse,
  .shore-beam::before,
  .shore-beam::after,
  .shore-ticker__track,
  .shore-fire::before {
    animation: none !important;
  }

  .shore::before {
    transform: none;
    inset: 0;
  }

  .shore-drift {
    transform: none;
  }
}