/* ===========================================
   Projects page - project cards
   Each project in projects.html is a site-style .card inside a .proj
   wrapper. A project with its own look gets styles under .proj--<name>
   and can add decoration that sits *behind* the card (.proj-behind) -
   e.g. the ChooseAMovie popcorn bucket peeking over the top edge.
   =========================================== */

.proj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 4rem 1.75rem;
  padding-top: 3rem; /* headroom for decorations peeking over the first row */
  /* Cards in a row stretch to the same height. That only looks right
     because every card opens with a same-size .proj-media block. */
  align-items: stretch;
}

/* Picture area at the top of every card - a screenshot or an illustration.
   Same aspect ratio everywhere so the cards line up. */
.proj-media {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 10;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-deep);
  margin-bottom: 1.25rem;
}
.proj-media > img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.proj-note { margin-left: auto; white-space: nowrap; }

.proj { position: relative; isolation: isolate; display: flex; }
.proj-behind { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.proj-card {
  position: relative; z-index: 1;
  flex: 1;
  display: flex; flex-direction: column;
  color: inherit;
}
a.proj-card:hover { color: inherit; }
.proj-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.proj-card .card-meta { margin-top: auto; padding-top: 1.1rem; align-items: center; }
.proj-card p { margin-bottom: 0.25rem; }
.proj-go { margin-left: auto; color: var(--accent); font-weight: 600; white-space: nowrap; }
.proj-go .arrow { display: inline-block; transition: transform .3s var(--ease-out); }
.proj-card:hover .proj-go .arrow,
.proj-card:focus-visible .proj-go .arrow { transform: translate(3px, -3px); }

/* ========== CHOOSEAMOVIE ==========
   Colors, type and hover treatment taken from chooseamovie.app: its card
   color, red #E50914 wash + red glow on hover, popcorn yellow #FFCC33.
   The card stays dark in both site themes, like an embedded app tile. */
.proj--chooseamovie .proj-card {
  font-family: 'Manrope', var(--sans);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255, 204, 51, 0.07), transparent 55%),
    #121216;
  border-color: #2D2D37;
  color: #F5F5F8;
}
/* Red tinge, faded in via an overlay since gradients don't transition */
.proj--chooseamovie .proj-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(110% 80% at 50% 120%, rgba(229, 9, 20, 0.26), transparent 65%),
    rgba(229, 9, 20, 0.05);
  opacity: 0;
  transition: opacity .45s var(--ease-out);
}
.proj--chooseamovie .proj-card:hover,
.proj--chooseamovie .proj-card:focus-visible {
  border-color: rgba(229, 9, 20, 0.55);
  box-shadow: 0 14px 28px rgba(229, 9, 20, 0.32);
}
.proj--chooseamovie .proj-card:hover::before,
.proj--chooseamovie .proj-card:focus-visible::before { opacity: 1; }
.proj--chooseamovie .proj-card:focus-visible { outline-color: #E50914; }

.proj--chooseamovie .card-tag { color: #FFCC33; }
.proj--chooseamovie .proj-title { margin: 0.75rem 0 0.8rem; line-height: 0; }

/* Picture area: three posters being voted on, the middle one wins */
.cam-media {
  border-color: #2D2D37;
  background:
    radial-gradient(80% 90% at 50% 115%, rgba(229, 9, 20, 0.3), transparent 70%),
    #0B0B0E;
}
.cam-posters { display: flex; align-items: flex-end; gap: 12px; }
.cam-poster {
  position: relative;
  width: 58px; aspect-ratio: 2 / 3;
  border-radius: 6px;
  background: linear-gradient(160deg, #2C2C38, #17171E);
  border: 1px solid #34343F;
}
.cam-poster.is-winner {
  width: 78px;
  background: linear-gradient(160deg, #E50914, #6E040A);
  border-color: #FF4550;
  box-shadow: 0 10px 26px rgba(229, 9, 20, 0.45);
  transition: transform .45s var(--ease-out);
}
.proj--chooseamovie:hover .cam-poster.is-winner { transform: translateY(-6px); }
.cam-stars {
  position: absolute; left: 0; right: 0; bottom: 7px;
  text-align: center; font-size: 0.5rem; letter-spacing: 1px; line-height: 1;
  color: #FFCC33;
}
.is-winner .cam-stars { font-size: 0.6rem; color: #FFE08A; }
.cam-chip {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  padding: 3px 8px; border-radius: 999px;
  background: #FFCC33; color: #121216;
  font-size: 0.58rem; font-weight: 800; letter-spacing: 0.04em; line-height: 1.2;
  white-space: nowrap;
}
.proj-title [hidden] { display: none; }
.cam-logo { height: 46px; width: auto; margin-left: -6px; }
.cam-wordmark { font-family: 'Manrope', var(--sans); font-weight: 800; font-size: 1.6rem; letter-spacing: -0.02em; color: #FFFFFF; line-height: 1.2; }
.cam-wordmark b { color: #E50914; font-weight: 800; }
.proj--chooseamovie .proj-card p { color: #AAAAB4; }
.proj--chooseamovie .card-meta { color: rgba(255, 255, 255, 0.5); }
.proj--chooseamovie .proj-go { color: #FFCC33; font-weight: 700; }

/* Popcorn bucket tucked behind the card's top-right corner */
.cam-bucket {
  position: absolute; top: -62px; right: 30px;
  width: 84px;
  transform: rotate(8deg);
  transform-origin: 50% 100%;
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.cam-bucket svg {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.25));
  animation: cam-bob 4.5s ease-in-out infinite;
}
@keyframes cam-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.proj--chooseamovie:hover .cam-bucket,
.proj--chooseamovie:focus-within .cam-bucket { transform: translateY(-12px) rotate(3deg); }

/* A few kernels hop out when the card is hovered */
.cam-kernel {
  position: absolute; top: 4px; left: 50%;
  width: 11px; height: 10px; margin-left: -5px;
  border-radius: 45% 55% 50% 50% / 55% 45% 55% 45%;
  background: radial-gradient(circle at 35% 35%, #FFF6D6, #FFCC33 60%, #E0A800);
  opacity: 0;
}
.proj--chooseamovie:hover .cam-kernel {
  animation: cam-pop .9s cubic-bezier(.2, .7, .4, 1) forwards;
  animation-delay: var(--d);
}
@keyframes cam-pop {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5) rotate(0deg); }
  15% { opacity: 1; }
  55% { opacity: 1; transform: translate(calc(var(--x) * 0.6), var(--y)) scale(1) rotate(calc(var(--r) * 0.6)); }
  100% { opacity: 0; transform: translate(var(--x), calc(var(--y) * 0.35)) scale(0.9) rotate(var(--r)); }
}

/* ========== HOT SPRINGS CRM ==========
   Picture area: a little guest-list window floating over warm spring
   water, with steam drifting up. Fixed colors so it reads the same in
   both site themes. */
.crm-media {
  border-color: transparent;
  background:
    radial-gradient(90% 60% at 50% 115%, rgba(255, 176, 102, 0.35), transparent 70%),
    linear-gradient(170deg, #0E3F45 0%, #16666A 60%, #2A8A86 100%);
}
.crm-window {
  position: relative; z-index: 1;
  width: 68%;
  padding: 10px 12px 12px;
  border-radius: 8px;
  background: #F6FBFA;
  box-shadow: 0 12px 28px rgba(4, 30, 33, 0.45);
  transition: transform .45s var(--ease-out);
}
.proj--crm:hover .crm-window { transform: translateY(-5px); }
.crm-bar { display: flex; gap: 4px; margin-bottom: 9px; }
.crm-bar i { width: 6px; height: 6px; border-radius: 50%; background: #CFDCDA; }
.crm-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.crm-row + .crm-row { border-top: 1px solid #E3ECEA; }
.crm-av { flex: none; width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg, #2A8A86, #16666A); }
.crm-line { flex: 1; height: 6px; border-radius: 3px; background: #D5E2E0; }
.crm-line.short { flex: 0.6; margin-right: auto; }
.crm-pill { flex: none; width: 30px; height: 10px; border-radius: 999px; background: #BFE8D3; }
.crm-pill.warm { background: #FFD9B0; }
.crm-steam {
  position: absolute; bottom: -20px; left: var(--x);
  width: 60px; height: 60px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  filter: blur(14px);
  animation: crm-steam 5s ease-in infinite;
  animation-delay: var(--d);
  opacity: 0;
}
@keyframes crm-steam {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }
  30% { opacity: 0.8; }
  100% { opacity: 0; transform: translateY(-150px) scale(1.4); }
}

@media (prefers-reduced-motion: reduce) {
  .crm-steam { animation: none; opacity: 0.4; }
  .cam-bucket svg, .proj--chooseamovie:hover .cam-kernel { animation: none; }
  .cam-bucket { transition: none; }
  .proj--chooseamovie:hover .cam-bucket,
  .proj--chooseamovie:focus-within .cam-bucket { transform: rotate(8deg); }
}