/* The ideas page as a lantern festival: paper lanterns rise behind the cards, and one hangs beside the heading.
   The evening pocket is cool and still (moon, stars, clouds); this one is warm and rising. */

/* A zero-height sticky anchor keeps the sky in view while the page scrolls. */
.ideas-sky { position: sticky; top: 0; height: 0; pointer-events: none; }
.ideas-sky-glow, .ideas-sky-field { position: absolute; top: 0; left: 0; width: 100%; height: calc(100dvh - 80px); }
.ideas-sky-glow { background: linear-gradient(to top, rgba(255, 170, 84, .14), rgba(255, 170, 84, 0) 45%); }
.ideas-sky-field { overflow: hidden; container-type: size; mask-image: linear-gradient(to top, transparent, #000 14%, #000 80%, transparent); }

/* Every lantern, rising or floating, is one body: paper colour, a flame glowing low inside, and ribs. Its look comes from two
   classes: a shape (box, round, tall, drop, andon) and a paper colour. --depth (0..1) is distance: small and far means faint. */
:is(.lantern, .float-lantern) {
  --w: 1; --aspect: 1.28;
  --flame: radial-gradient(ellipse at 50% 80%, #fff7cf 0, rgba(255, 238, 170, .9) 14%, rgba(255, 190, 90, 0) 62%);
  --ribs: repeating-linear-gradient(90deg, transparent 0 calc(var(--size) * var(--w) / 4 - 1px), rgba(110, 40, 12, .18) calc(var(--size) * var(--w) / 4 - 1px) calc(var(--size) * var(--w) / 4));
  --paper: linear-gradient(to bottom, var(--hi), var(--mid) 66%, var(--lo));
  position: absolute; box-sizing: border-box; width: calc(var(--size) * var(--w)); height: calc(var(--size) * var(--aspect));
  border-radius: 26% 26% 34% 34% / 16% 16% 22% 22%;
  background: var(--flame), var(--ribs), var(--paper);
  box-shadow: 0 0 calc(var(--size) * .9) calc(var(--size) * .1) rgba(var(--glow), .42);
}
:is(.lantern, .float-lantern)::before, :is(.lantern, .float-lantern)::after { content: ""; position: absolute; left: 12%; width: 76%; background: #3a2418; }
:is(.lantern, .float-lantern)::before { top: -1px; height: calc(var(--size) * .07); border-radius: 40% 40% 0 0; }
:is(.lantern, .float-lantern)::after { bottom: -1px; height: calc(var(--size) * .08); border-radius: 0 0 50% 50%; opacity: .8; }

/* Shapes */
:is(.lantern, .float-lantern).round { --aspect: 1; border-radius: 50% / 46%;
  --ribs: repeating-linear-gradient(to bottom, transparent 0 calc(var(--size) * .15 - 1px), rgba(110, 40, 12, .32) calc(var(--size) * .15 - 1px) calc(var(--size) * .15)); }
:is(.lantern, .float-lantern).tall { --w: .58; --aspect: 2.1; border-radius: 20% / 7%; }
:is(.lantern, .float-lantern).drop { --w: .92; --aspect: 1.4; border-radius: 50% 50% 42% 42% / 58% 58% 42% 42%; }
:is(.lantern, .float-lantern).andon { --aspect: 1.15; border-radius: 6%; border: max(2px, calc(var(--size) * .07)) solid #3a2418;
  --ribs: linear-gradient(90deg, transparent calc(50% - 1px), rgba(58, 36, 24, .85) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
          linear-gradient(to bottom, transparent calc(62% - 1px), rgba(58, 36, 24, .85) calc(62% - 1px) calc(62% + 1px), transparent calc(62% + 1px)); }
:is(.lantern, .float-lantern).andon::before, :is(.lantern, .float-lantern).andon::after { display: none; }

/* Paper colours */
.paper-gold   { --hi: #ffd98a; --mid: #ff9e48; --lo: #e26f2a; --glow: 255, 150, 66; }
.paper-orange { --hi: #ffc27a; --mid: #ff8a3d; --lo: #d9561f; --glow: 255, 126, 56; }
.paper-red    { --hi: #ff9d82; --mid: #e8483a; --lo: #b02a24; --glow: 240, 78, 58; }
.paper-cream  { --hi: #fff3d6; --mid: #ffd9a0; --lo: #f0b46c; --glow: 255, 205, 130; }
.paper-rose   { --hi: #ffc2cf; --mid: #ee809b; --lo: #c2516e; --glow: 255, 128, 160; }

/* A rising lantern. Rise is transform, sway is translate, flicker is opacity. The far ones are blurred a touch. */
.lantern { left: var(--x); bottom: 0; filter: blur(calc((1 - var(--depth)) * 1.6px)); opacity: var(--depth); transform: translateY(var(--rest));
  animation: lantern-rise var(--rise) linear var(--delay) infinite, lantern-sway var(--sway-time) ease-in-out var(--delay) infinite alternate, lantern-flicker var(--flicker) ease-in-out infinite alternate; }
@keyframes lantern-rise { from { transform: translateY(14px); } to { transform: translateY(-112cqh); } }
@keyframes lantern-sway { from { translate: calc(var(--sway) * -1) 0; } to { translate: var(--sway) 0; } }
@keyframes lantern-flicker { from { opacity: calc(var(--depth) * .8); } to { opacity: var(--depth); } }

/* The lake. The box has headroom above the water for the sky and the moon, and clips everything else, so nothing spills out.
   Layers, back to front: moon (0), then the water surface (1) holding the water, shore glow, moon path, glints and lanterns.
   The water's haze covers the moon's lower half, so it seems to stand up out of the lake. It is the last thing on the page,
   and sits at the bottom of the screen when the page is short. */
.ideas-lake { --moon: clamp(252px, 27vw, 396px); --headroom: calc(var(--moon) * 1.05); --water: clamp(230px, 36vh, 360px); position: relative; flex: none; margin-top: auto; height: calc(var(--water) + var(--headroom)); overflow: hidden; isolation: isolate; mask-image: linear-gradient(to bottom, transparent, #000 110px); }
.lake-surface { position: absolute; z-index: 1; inset: var(--headroom) 0 0 0; overflow: hidden; }
.lake-water { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(22, 26, 46, 0) 0, rgba(22, 26, 46, .95) 2.5%, rgba(10, 13, 28, .92) 100%); }
.lake-surface::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent 20%, rgba(255, 226, 170, .38) 66%, transparent 92%); }
.lake-surface::before { content: ""; position: absolute; inset: 0 0 auto; height: 70%; background: radial-gradient(ellipse 55% 100% at 50% 20%, rgba(255, 170, 84, .15), transparent 72%);
  mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 55%, transparent); }

/* A big, still moon: a real-looking surface (moon.svg), set so exactly half of it stands above the water line; the water's
   haze covers the other half. Its glow is two soft shadows that fit inside the box's headroom. */
.lake-moon { position: absolute; z-index: 0; left: 66%; top: calc(var(--headroom) - var(--moon) / 2); width: var(--moon); height: var(--moon); translate: -50% 0; border-radius: 50%;
  box-shadow: 0 0 calc(var(--moon) * .22) calc(var(--moon) * .03) rgba(255, 226, 170, .4), 0 0 calc(var(--moon) * .42) calc(var(--moon) * .06) rgba(255, 210, 150, .16); }

/* The moon's light on the water: a soft glow in a column, and over it many short ripples that glimmer on their own. The column is
   centred under the moon; ripples are placed by percentages of its width. */
.moon-path { position: absolute; left: 66%; top: 2px; width: calc(var(--moon) * 1.7); height: 76%; translate: -50% 0; }
.moon-path::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 36% 100% at 50% 0, rgba(255, 226, 170, .24), rgba(255, 226, 170, .07) 55%, transparent 80%); }
.ripple-dash { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); translate: -50% 0; border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 232, 184, .95) 30%, rgba(255, 240, 205, 1) 50%, rgba(255, 232, 184, .95) 70%, transparent);
  opacity: var(--o); animation: ripple-glimmer var(--time) ease-in-out var(--delay) infinite alternate; }
@keyframes ripple-glimmer { from { opacity: calc(var(--o) * .2); scale: .78 1; } to { opacity: var(--o); scale: 1.12 1; } }

.glint { position: absolute; left: var(--x); top: var(--y); width: var(--width); height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 205, 150, .55), transparent);
  opacity: .15; animation: glint-shimmer var(--time) ease-in-out var(--delay) infinite alternate; }
@keyframes glint-shimmer { from { opacity: .08; translate: -12px 0; } to { opacity: .7; translate: 12px 0; } }

/* A floating lantern sits on a small wooden tray. Its reflection is the same body, flipped, blurred and fading down;
   a ripple spreads from the tray. Bob is transform, drift is translate, flicker is opacity. */
.float-lantern { left: var(--x); top: var(--y); opacity: var(--depth); animation: float-bob var(--bob) ease-in-out infinite alternate, float-drift var(--drift-time) ease-in-out var(--delay) infinite alternate, lantern-flicker var(--flicker) ease-in-out infinite alternate; }
.float-lantern::after { display: block; bottom: calc(var(--size) * -.12); left: -10%; width: 120%; height: max(2px, calc(var(--size) * .16)); border-radius: 2px; background: #4a2f1e; opacity: 1; }
.float-lantern.andon::after { display: block; }
.float-lantern .reflection { position: absolute; left: 0; top: 100%; width: 100%; height: 100%; margin-top: 8px; transform: scaleY(-1); background: inherit; border-radius: inherit;
  filter: blur(2.5px); opacity: .4; mask-image: linear-gradient(to top, #000, transparent 88%); animation: reflection-wobble 3.6s ease-in-out infinite alternate; }
.float-lantern .ripple { position: absolute; left: 50%; top: 100%; width: 170%; height: 34%; margin: 4px 0 0 -85%; border: 1px solid rgba(var(--glow), .5); border-radius: 50%; opacity: 0;
  animation: ripple-spread var(--ripple) ease-out infinite; }
@keyframes float-bob { from { transform: translateY(-2px); } to { transform: translateY(2px); } }
@keyframes float-drift { from { translate: calc(var(--drift) * -1) 0; } to { translate: var(--drift) 0; } }
@keyframes reflection-wobble { from { scale: .9 1; } to { scale: 1.08 1; } }
@keyframes ripple-spread { from { transform: scale(.4); opacity: .7; } to { transform: scale(1.5); opacity: 0; } }

/* The count line above the heading. */
.idea-lantern-row { display: flex; align-items: center; margin-bottom: 22px; }
.lantern-note { font: 10px 'DM Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #e8c89a; }

/* A lantern drifting behind a line of text shouldn't make it hard to read. */
#view-ideas .page-eyebrow, #view-ideas .page-heading, #view-ideas .page-subtitle, #view-ideas .lantern-note, #view-ideas .pending-ideas .labelcaps, #view-ideas .pending-ideas .fine-print { text-shadow: 0 0 16px rgba(20, 14, 18, .75), 0 0 4px rgba(20, 14, 18, .5); }

/* Cards arrive one after another, and warm up under the pointer. */
.idea-grid .idea-card { animation: appear .5s ease both; animation-delay: calc(var(--i, 0) * 70ms); }
.idea-card:hover { box-shadow: 0 22px 48px #07151a3d, 0 0 0 1px rgba(244, 170, 90, .42), 0 0 38px rgba(255, 160, 70, .22); }
.idea-card .icon { transition: color .25s, filter .25s; }
.idea-card:hover .icon { color: #d98a2e; filter: drop-shadow(0 0 5px rgba(255, 170, 80, .85)); }

/* Ideas still waiting get a small ember beside their heading. */
.pending-ideas .labelcaps::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 9px; vertical-align: middle; border-radius: 50%; background: #ffb457; box-shadow: 0 0 10px 2px rgba(255, 170, 80, .7); animation: ember-pulse 2s ease-in-out infinite alternate; }
@keyframes ember-pulse { from { opacity: .45; } to { opacity: 1; } }

/* Motion off, or reduced motion: the lanterns hold still where they are. */
.motion-off .lantern, .motion-off .float-lantern, .motion-off .float-lantern .reflection, .motion-off .float-lantern .ripple, .motion-off .glint, .motion-off .ripple-dash, .motion-off .idea-grid .idea-card, .motion-off .pending-ideas .labelcaps::before { animation: none; }
@media (prefers-reduced-motion: reduce) { .lantern, .float-lantern, .float-lantern .reflection, .float-lantern .ripple, .glint, .ripple-dash, .idea-grid .idea-card, .pending-ideas .labelcaps::before { animation: none; } }
@media (max-width: 640px) { .ideas-sky-glow, .ideas-sky-field { height: calc(100dvh - 58px); } }