/* ============================================================
   Presidio Vibes
   The video is the interface.
   ============================================================ */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: hidden;
  background: #1a1a2e;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Video Background ---- */

#video-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
}

#poster,
.bg-video-clip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#poster {
  z-index: 1;
  transition: opacity 1.2s ease;
}

#poster.hidden {
  opacity: 0;
  pointer-events: none;
}

.bg-video-clip {
  z-index: 0;
}

.bg-video-clip.active {
  z-index: 1;
}

/* ---- Overlays ---- */

#time-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transition: background 2s ease;
}

#ambient-overlay {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 30%,
    rgba(0, 0, 0, 0.3) 100%
  );
}

/* ---- Hotspot Layer (JS-positioned to match video) ---- */

#hotspot-layer {
  position: fixed;
  z-index: 5;
  overflow: hidden;
}

.hotspot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  overflow: hidden;
  background:
    linear-gradient(
      120deg,
      transparent 0%,
      transparent 100%
    );
  background-size: 250% 100%;
  background-position: -100% 0;
}

.hotspot-sky {
  clip-path: polygon(0.2% 0%, 0.2% 37%, 1.4% 36.7%, 3.3% 37.4%, 4.3% 37.6%, 5.4% 37.5%, 7.4% 37.8%, 7.6% 38.6%, 8.8% 39.8%, 9.4% 38.4%, 10.8% 37.3%, 12.9% 37.4%, 14.5% 38.1%, 16.8% 38.7%, 19.8% 39%, 20.8% 40.1%, 23.9% 41%, 23.3% 42.4%, 22.3% 42.8%, 22.9% 43.8%, 21.2% 44.3%, 23.3% 45.4%, 21.1% 46.8%, 23.1% 47.5%, 22.8% 48.9%, 21.9% 49.7%, 21.5% 51.3%, 21% 52.2%, 23.3% 53.1%, 25.1% 52%, 27.5% 50.8%, 30.2% 49.3%, 32.6% 47.8%, 34.3% 46.9%, 35.3% 47.7%, 42.4% 52.5%, 45.5% 53.7%, 48.7% 52.7%, 51.5% 52.2%, 55% 53.2%, 58.3% 54.6%, 62.4% 55.4%, 65.2% 55.7%, 67.6% 55.2%, 70.7% 53.6%, 74.5% 51.4%, 76.1% 52.1%, 79.8% 54.9%, 84% 54.4%, 89.5% 54.8%, 93.7% 55.5%, 99.9% 55.6%, 100% 0%);
}

.hotspot-water {
  clip-path: polygon(99.5% 62.7%, 99.5% 74%, 97.3% 73.8%, 95% 73.6%, 93.8% 74.5%, 92.9% 75.8%, 94.5% 76.8%, 95.7% 77%, 93.8% 77.2%, 92.3% 77.6%, 93.9% 78.3%, 95.5% 78.6%, 94.2% 79.3%, 94% 80.1%, 92.4% 80.7%, 91.4% 81.5%, 93.9% 81.4%, 94.9% 81.9%, 96.1% 82.1%, 96.7% 83%, 97.4% 84.4%, 90.6% 85.8%, 90.7% 84.8%, 90.1% 83.8%, 89% 83.5%, 90.4% 82.7%, 89.8% 80.6%, 86.9% 81.8%, 85.3% 82.7%, 84.5% 81.7%, 86% 81.4%, 87.5% 81%, 88.2% 78.8%, 87% 77.6%, 86.4% 76.6%, 86.1% 74.5%, 84.7% 73.5%, 83.5% 72.6%, 82% 72.5%, 80.6% 71.9%, 79.4% 72.6%, 76.8% 72.9%, 74% 73.8%, 73.4% 74.7%, 71.5% 76.1%, 70.2% 77.3%, 69.2% 78.8%, 67.3% 80.2%, 66.5% 81.2%, 66.6% 79.5%, 67.3% 78.6%, 68.3% 77.3%, 68.3% 76.2%, 69.6% 76.2%, 69.6% 75.1%, 69.5% 74%, 69.4% 72.6%, 68% 73%, 67.2% 71.6%, 65.7% 71.9%, 65.9% 73.4%, 64.4% 73.6%, 64.1% 75%, 65.5% 75.5%, 63.3% 76.2%, 64.8% 77.1%, 65.6% 78%, 65.5% 78.9%, 65.2% 80.2%, 64.8% 81.4%, 63.1% 81.1%, 63.8% 79.4%, 63.6% 78%, 62.2% 77.1%, 60.2% 77.5%, 58.1% 77.9%, 56.4% 78.3%, 55.5% 77%, 54.1% 77.1%, 53% 76%, 50.8% 75.3%, 49.3% 74.1%, 48.2% 74.6%, 47% 73.3%, 44.5% 73.5%, 44.1% 72.1%, 55.3% 71.1%, 58.8% 71.2%, 61% 71.5%, 64% 70.8%, 62.9% 69.3%, 61.3% 68.2%, 59.8% 67.4%, 57.9% 67.7%, 52.5% 69.2%, 49.3% 66.7%, 48.7% 65.9%, 47.3% 66.3%, 45.2% 65.2%, 43.5% 64.6%, 41% 63.3%, 39.8% 62.1%);
}

.hotspot-bridge {
  clip-path: polygon(91.5% 59.2%, 83.2% 58.6%, 75.8% 52.3%, 74.2% 52.1%, 67.6% 55.8%, 63.1% 57.3%, 58% 57.8%, 49.3% 55.9%, 41.4% 52.4%, 34.7% 48%, 33.5% 48%, 31.6% 49.5%, 24.1% 53.8%, 25% 54.8%, 27.9% 54.8%, 29.4% 55.4%, 30.6% 56.2%, 34% 56.7%, 34.9% 57.8%, 36.4% 58.4%, 36.9% 58.9%, 73.6% 59.5%, 74% 61.4%, 75.3% 62.3%, 75.4% 59.6%, 91.2% 60.1%);
}

.hotspot-building {
  clip-path: polygon(0.2% 89.8%, 4.1% 89.5%, 4.3% 89.7%, 4.3% 89.8%, 4.5% 81.9%, 4.8% 77.2%, 5% 74.3%, 5.2% 70.9%, 5.2% 66.3%, 0.6% 61.7%, 2% 60%, -0.3% 58.9%, -0.2% 74.5%, 0% 83.7%);
}

.hotspot-building-2 {
  clip-path: polygon(20.9% 62.5%, 22% 65.1%, 20.9% 65.6%, 20.9% 67.8%, 28.2% 68.1%, 29.1% 70.6%, 27.6% 70.7%, 26.6% 72.8%, 27.6% 73.7%, 27.1% 76.2%, 27.1% 77.5%, 28.9% 78.1%, 31.7% 78.5%, 34.2% 79%, 36.5% 79%, 38.8% 80.6%, 39.4% 81.7%, 37% 82.7%, 36% 83.9%, 34.4% 84.2%, 27.8% 86.6%, 24.8% 87.5%, 23% 88.5%, 21.2% 88.8%, 18.1% 89.6%, 13.3% 90.5%, 10% 91%, 7.9% 90.4%, 7.9% 88.2%, 8.1% 71.9%, 7.9% 69.4%, 8.7% 67.9%, 10.4% 67%, 12.6% 67.3%, 15% 68.3%, 17.1% 68%, 18.1% 67.8%, 17.7% 66.9%, 18.7% 65.9%, 17.7% 65.1%, 18.3% 64.3%, 20% 63.2%, 19.7% 62.3%);
}

.hotspot-bush {
  clip-path: polygon(52.7% 84.7%, 53.6% 83.4%, 54.7% 82.2%, 55.4% 81.1%, 56.7% 80.8%, 57.8% 81.1%, 59% 80.5%, 60.2% 80.8%, 61.1% 79.8%, 61.9% 80.4%, 62.5% 81.3%, 63.6% 82.3%, 65.5% 83.4%, 65.5% 84.2%, 65.7% 85%, 67.4% 86.1%, 68.1% 88.1%, 66.2% 88.2%, 63.3% 87.8%, 61.9% 87.8%, 60.8% 88.6%, 59.5% 87.8%, 58.3% 87.8%, 57.5% 86.4%, 56.2% 85.6%, 54.4% 85.5%);
}

.hotspot-tree {
  clip-path: polygon(7.7% 91.1%, 8% 68.7%, 11.2% 66.4%, 14.9% 66.7%, 17.2% 66.9%, 19.3% 62.1%, 22% 60.7%, 23% 59.1%, 18.2% 58.3%, 17.4% 56.3%, 19.5% 55.2%, 18.1% 54.1%, 19.5% 53.3%, 17.4% 52.1%, 20% 50.8%, 18.9% 50.1%, 20.7% 48.2%, 18.6% 48%, 20.2% 45.8%, 19.5% 43.9%, 21.4% 43.5%, 20.8% 42.5%, 22.4% 41.6%, 19.7% 40.9%, 14.4% 39.6%, 10.9% 39%, 10.4% 40.5%, 7.9% 40.1%, 5.8% 38.4%, 2.8% 38.4%, 1.4% 38.1%, 0.3% 38.3%, 0.3% 56.7%, 2.5% 59%, 4.2% 59.6%, 5% 61.2%, 4.6% 63.5%, 2.7% 62.2%, 1.7% 60.6%, 0.8% 61.5%, 2.6% 63.2%, 4.8% 65.6%, 5.2% 68.7%, 4.6% 90.5%);
}

.hotspot:hover,
.hotspot.building-hover {
  animation: shimmerSweep 2.5s ease-out infinite;
}

.hotspot.active {
  background: rgba(255, 255, 255, 0.02);
}

@keyframes shimmerSweep {
  0% {
    background:
      linear-gradient(
        120deg,
        transparent 15%,
        rgba(255, 255, 255, 0.13) 40%,
        rgba(255, 255, 255, 0.19) 50%,
        rgba(255, 255, 255, 0.13) 60%,
        transparent 85%
      );
    background-size: 250% 100%;
    background-position: 150% 0;
  }
  100% {
    background:
      linear-gradient(
        120deg,
        transparent 15%,
        rgba(255, 255, 255, 0.13) 40%,
        rgba(255, 255, 255, 0.19) 50%,
        rgba(255, 255, 255, 0.13) 60%,
        transparent 85%
      );
    background-size: 250% 100%;
    background-position: -50% 0;
  }
}

/* ---- Mobile: ambient pulse on hotspots ---- */

.hotspot.pulse-glow {
  backdrop-filter: brightness(1.25);
  -webkit-backdrop-filter: brightness(1.25);
  transition: backdrop-filter 1s ease-in-out, -webkit-backdrop-filter 1s ease-in-out;
}

.hotspot.pulse-dim {
  backdrop-filter: brightness(1);
  -webkit-backdrop-filter: brightness(1);
  transition: backdrop-filter 1s ease-in-out, -webkit-backdrop-filter 1s ease-in-out;
}

/* ---- Easter Egg: Crows ---- */

.easter-crow {
  position: absolute;
  pointer-events: none;
  z-index: 10;
  animation: crowFly var(--crow-dur, 1.6s) ease-out forwards;
}

.easter-crow svg {
  display: block;
  animation: crowFlap 0.18s ease-in-out infinite;
}

@keyframes crowFly {
  0%   { opacity: 1; transform: translate(0, 0) scale(var(--crow-s, 1)); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--crow-dx, 60px), var(--crow-dy, -180px)) scale(var(--crow-s, 1)); }
}

@keyframes crowFlap {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(0.35); }
}

/* ---- Easter Egg Modal ---- */

.egg-modal {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.egg-modal.open {
  opacity: 1; pointer-events: auto;
}
.egg-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
}
.egg-modal-content {
  position: relative; z-index: 1;
  border-radius: 14px; overflow: hidden;
  background: #000;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  transform: scale(0.92); transition: transform 0.3s ease;
  max-width: 90vw; max-height: 80vh;
}
.egg-modal.open .egg-modal-content {
  transform: scale(1);
}
.egg-modal-close {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 32px; height: 32px; border: none; border-radius: 50%;
  background: rgba(0,0,0,0.6); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.egg-modal-close:hover { background: rgba(255,255,255,0.2); }
#egg-modal-body iframe {
  display: block; border: none;
  width: 560px; height: 315px;
  max-width: 90vw; max-height: 70vh;
}

/* ---- Hero: Temperature + Sentiment ---- */

#hero {
  position: fixed;
  z-index: 10;
  top: 22%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

.hero-inner {
  display: inline-block;
  text-align: center;
  padding: 0;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  border-radius: 14px;
  opacity: 1;
  transition: opacity 0.5s ease-in-out, padding 0.5s ease-in-out,
              background 0.5s ease-in-out, backdrop-filter 0.5s ease-in-out,
              -webkit-backdrop-filter 0.5s ease-in-out;
}

#hero.hero-region .hero-inner {
  padding: 1.25rem 2rem;
  max-width: 520px;
  background: rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

#hero-week {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1rem;
  font-size: clamp(12px, 1.5vw, 14px);
  font-weight: 300;
  opacity: 0.9;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

#hero-week:empty {
  display: none;
}

.hero-week-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 2.5rem;
}

.hero-week-day-name {
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.8;
}

.hero-week-day-temp {
  font-weight: 500;
}

.hero-week-day-icon {
  font-size: 1.1em;
  line-height: 1;
}

#hero-headline {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow:
    0 2px 20px rgba(0, 0, 0, 0.5),
    0 8px 40px rgba(0, 0, 0, 0.25);
  transition: opacity 0.5s ease-in-out, font-size 0.5s ease-in-out;
}

#hero.hero-region #hero-headline {
  font-size: clamp(22px, 3.5vw, 32px);
}

#hero-subtitle {
  font-size: clamp(14px, 2vw, 20px);
  font-weight: 300;
  opacity: 0.85;
  margin-top: 8px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-shadow:
    0 1px 12px rgba(0, 0, 0, 0.6),
    0 4px 20px rgba(0, 0, 0, 0.3);
  transition: opacity 0.5s ease-in-out;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

#hero.hero-fade .hero-inner {
  opacity: 0;
}

/* ---- Corner: Clock & Date ---- */

#corner-time {
  position: fixed;
  bottom: clamp(16px, 3vw, 36px);
  left: clamp(16px, 3vw, 36px);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: opacity 0.3s ease;
}

.corner-clock {
  font-size: clamp(14px, 1.8vw, 18px);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6), 0 4px 20px rgba(0, 0, 0, 0.3);
  opacity: 0.85;
}

.corner-date {
  font-size: clamp(11px, 1.2vw, 13px);
  font-weight: 300;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6), 0 4px 20px rgba(0, 0, 0, 0.3);
  opacity: 0.6;
}

/* ---- Sound Toggle ---- */

#sound-area {
  position: fixed;
  top: clamp(16px, 3vw, 36px);
  right: clamp(16px, 3vw, 36px);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-direction: row-reverse;
}

#sound-toggle {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  padding: 11px;
  border-radius: 50%;
  transition: background 0.3s ease, opacity 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  box-shadow: 
    0 0 25px rgba(255, 255, 255, 0.4), 
    0 0 50px rgba(255, 255, 255, 0.2), 
    0 0 75px rgba(255, 255, 255, 0.1);
}

#sound-toggle:hover {
  background: rgba(0, 0, 0, 0.45);
  border-color: rgba(255, 255, 255, 0.25);
  opacity: 1;
  box-shadow: 
    0 0 30px rgba(255, 255, 255, 0.5), 
    0 0 60px rgba(255, 255, 255, 0.3), 
    0 0 90px rgba(255, 255, 255, 0.15);
}

body.audio-playing #sound-toggle {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.08);
}

#sound-waves { opacity: 0; transition: opacity 0.3s ease; }
#sound-mute { opacity: 1; transition: opacity 0.3s ease; }

body.audio-playing #sound-waves { opacity: 1; }
body.audio-playing #sound-mute { opacity: 0; }

.sound-wave {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transition: stroke-dashoffset 0.5s ease;
}

body.audio-playing .sound-wave { stroke-dashoffset: 0; }
body.audio-playing .wave-1 { animation: wavePulse 2s ease-in-out infinite; }
body.audio-playing .wave-2 { animation: wavePulse 2s ease-in-out 0.3s infinite; }

@keyframes wavePulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.stream-label {
  font-size: clamp(9px, 1vw, 11px);
  font-weight: 300;
  opacity: 0;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
  transition: opacity 0.5s ease;
}

body.audio-playing .stream-label { opacity: 0.5; }

#sound-toggle.pulse {
  animation: gentlePulse 1.5s ease 2s 1;
}

@keyframes gentlePulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3); }
  70% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* ---- Entrance Animations ---- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Override for hero — needs to keep its centering transform */
#hero.reveal {
  transform: translate(-50%, -50%) translateY(16px);
}

#hero.reveal.visible {
  transform: translate(-50%, -50%) translateY(0);
}

.reveal-delay-1 { transition-delay: 0.6s; }
.reveal-delay-2 { transition-delay: 1.2s; }
.reveal-delay-3 { transition-delay: 1.8s; }

/* ---- Board Overlay ---- */

.board-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.board-overlay.open {
  opacity: 1;
  visibility: visible;
}

.board-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.board-panel {
  position: relative;
  width: 92vw;
  max-width: 960px;
  height: 85vh;
  max-height: 720px;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(145deg, #3a6e6e 0%, #3d7a8a 35%, #4a8a7a 65%, #3a6078 100%);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.08);
  transform: translateY(30px) scale(0.97);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.board-overlay.open .board-panel {
  transform: translateY(0) scale(1);
}

.board-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 28px 32px 20px;
  flex-shrink: 0;
}

.board-header-text {
  flex: 1;
  min-width: 0;
}

.board-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(24px, 3.5vw, 34px);
  font-weight: 600;
  color: #fff;
  line-height: 1.15;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
  margin: 0;
}

.board-description {
  font-size: clamp(12px, 1.4vw, 14px);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 6px;
  line-height: 1.5;
  max-width: 480px;
}

.board-close {
  background: rgba(0, 0, 0, 0.15);
  border: none;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 16px;
  margin-top: 2px;
  transition: background 0.2s ease, color 0.2s ease;
}

.board-close:hover {
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
}

/* Wall — masonry layout */

.board-wall {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 24px 24px;
  columns: 3;
  column-gap: 14px;
}

.board-wall::-webkit-scrollbar {
  width: 6px;
}

.board-wall::-webkit-scrollbar-track {
  background: transparent;
}

.board-wall::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
}

.board-error {
  padding: 24px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

/* Post card */

.post-card {
  break-inside: avoid;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(16px);
  animation: postReveal 0.5s ease forwards;
}

@keyframes postReveal {
  to { opacity: 1; transform: translateY(0); }
}

.post-card-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.post-card-body {
  padding: 14px 14px 12px;
}

.post-mood {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 3px 10px;
  border-radius: 100px;
  margin-bottom: 8px;
  color: #fff;
}

.post-caption {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.45;
  margin-bottom: 10px;
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.post-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 500;
  color: #fff;
  flex-shrink: 0;
}

.post-author {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
}

.post-time {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  margin-left: auto;
}

/* Emoji reactions row */

.post-reactions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.post-reaction {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  user-select: none;
  line-height: 1;
}

.post-reaction:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}

.post-reaction.reacted {
  background: rgba(46, 125, 126, 0.2);
  border-color: rgba(46, 125, 126, 0.4);
}

.post-reaction-count {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
}

.post-reaction-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  background: transparent;
  font-size: 13px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.35);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.post-reaction-add:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.6);
}

/* Compose FAB */

.board-compose-btn {
  position: absolute;
  bottom: 24px;
  right: 24px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: #2e7d7e;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(46, 125, 126, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  z-index: 2;
}

.board-compose-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 28px rgba(46, 125, 126, 0.5);
}

.board-compose-btn:active {
  transform: scale(0.95);
}

/* Composer panel */

.board-composer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  background: rgba(20, 30, 45, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 18px 18px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.3);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.board-composer.open {
  transform: translateY(0);
}

.composer-inner {
  padding: 20px 24px 24px;
  position: relative;
}

.composer-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  display: flex;
  transition: color 0.15s ease;
}

.composer-close:hover {
  color: rgba(255, 255, 255, 0.8);
}

.composer-photo-placeholder {
  width: 100%;
  aspect-ratio: 16 / 7;
  background: rgba(255, 255, 255, 0.04);
  border: 2px dashed rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.35);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
  margin-bottom: 14px;
}

.composer-photo-placeholder:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.6);
}

.composer-photo-placeholder.has-photo {
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.12);
  padding: 0;
  overflow: hidden;
}

.composer-photo-placeholder.has-photo .composer-photo-icon,
.composer-photo-placeholder.has-photo .composer-photo-label {
  display: none;
}

.composer-photo-preview {
  position: absolute;
  top: 0;
  left: 0;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.composer-photo-preview:active {
  cursor: grabbing;
}

.composer-photo-placeholder.has-photo {
  position: relative;
}

.composer-crop-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.4);
}

.composer-crop-controls[hidden] {
  display: none;
}

.composer-crop-hint {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  margin-left: auto;
}

.composer-zoom-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  max-width: 160px;
  height: 3px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  outline: none;
}

.composer-zoom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #2e7d7e;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.composer-zoom-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #2e7d7e;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.composer-moods {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.composer-mood-pill {
  font-size: 12px;
  font-weight: 500;
  padding: 5px 14px;
  border-radius: 100px;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.15s ease;
}

.composer-mood-pill:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

.composer-mood-pill.selected {
  border-color: transparent;
  color: #fff;
}

.composer-name,
.composer-caption {
  width: 100%;
  border: none;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.12);
  padding: 10px 0;
  font-family: inherit;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
  background: transparent;
  display: block;
  outline: none;
  transition: border-color 0.2s ease;
}

.composer-name {
  margin-bottom: 4px;
}

.composer-name::placeholder,
.composer-caption::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.composer-name:focus,
.composer-caption:focus {
  border-color: #2e7d7e;
}

.composer-caption {
  outline: none;
  margin-bottom: 16px;
  transition: border-color 0.2s ease;
}

.composer-status {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  min-height: 18px;
  margin-bottom: 10px;
  transition: color 0.2s ease;
}

.composer-status.status-blocked {
  color: #d48a7e;
}

.composer-submit {
  background: #2e7d7e;
  color: #fff;
  border: none;
  padding: 10px 28px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.2s ease;
}

.composer-submit:hover {
  background: #267070;
}

.composer-submit:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: #2e7d7e;
}


/* ---- Responsive ---- */

@media (max-width: 768px) {
  #hero {
    top: 10%;
    transform: translate(-50%, 0);
  }

  #hero.reveal {
    transform: translate(-50%, 0) translateY(16px);
  }

  #hero.reveal.visible {
    transform: translate(-50%, 0) translateY(0);
  }

  #hero-headline {
    font-size: clamp(40px, 10vw, 72px);
  }

  #hero {
    width: 96vw;
    left: 2vw;
    transform: translateY(0);
  }

  #hero.reveal {
    transform: translateY(16px);
  }

  #hero.reveal.visible {
    transform: translateY(0);
  }

  #hero.hero-region .hero-inner {
    padding: 0.75rem 1rem;
    max-width: 88vw;
  }

  #hero.hero-region #hero-headline {
    font-size: clamp(15px, 3.8vw, 22px);
  }

  #hero-subtitle {
    max-width: 88vw;
  }

  .board-panel {
    width: 96vw;
    height: 90vh;
    border-radius: 14px;
  }

  .board-header {
    padding: 20px 20px 16px;
  }

  .board-wall {
    columns: 2;
    padding: 0 16px 16px;
    column-gap: 10px;
  }
}

@media (max-width: 480px) {
  #hero-headline {
    font-size: clamp(36px, 12vw, 56px);
  }

  #hero.hero-region .hero-inner {
    padding: 0.5rem 0.5rem;
  }

  #hero.hero-region #hero-headline {
    font-size: clamp(13px, 3.5vw, 18px);
  }

  #hero-subtitle {
    font-size: 12px;
    line-height: 1.4;
  }

  #sound-toggle {
    padding: 12px;
  }

  .board-wall {
    columns: 1;
  }

  .board-panel {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
}