/* ==========================================================================
   UP AL — Portfolio (העבודות שלנו)
   A responsive grid of premium glass project cards — real client work,
   not a slideshow. This file defines the card exactly once (project 01,
   Eden Phone); every future project is another <li class="portfolio-card">
   in the same <ul>, with no new markup patterns or CSS needed.

   Card anatomy: the site's own canonical glass-card recipe (same
   four-layer gradient surface, --radius-lg, --shadow-card used by
   Process/Testimonials/Contact) wraps a square media block on top and a
   name/tags footer below, on the same glass. The whole card is a single
   <button> (see js/portfolio.js) — a self-contained showcase, not a
   link. It doesn't navigate anywhere yet: it's the future hook for an
   internal project page or modal, keyed off each button's
   data-portfolio-trigger value.

   Hover/focus: the cover photo zooms slightly, a soft dark overlay
   deepens, and the client's own real project video crossfades in over
   it, muted and looped, lazy-loaded on first interaction (see
   js/portfolio.js) — the media itself stays clear of any static overlay
   throughout. Where a project has a real, clean logo asset, a small
   mark sits inline beside the business name in the card body
   (.portfolio-card__identity — same "icon beside wordmark" convention
   as the site's header/footer brand), not floating over the media.
   It's optional per project: Eden Phone ships without one, since no
   standalone logo file exists for it yet — the business name alone
   identifies it.

   Sizing: at ≥561px (2-up and wider), the grid itself is capped to 76%
   width and centered, combined with a slightly larger inter-card gap —
   together roughly another 10–15% smaller than the previous pass, on
   top of that round's own reduction, without changing the column count
   at any breakpoint. Mobile's single column stays full-width.

   Branding: a project's own logo only ever appears once. Where the
   cover photo/video already carries the business's real-world signage
   or branding in frame (Eden Phone), no separate mark is added — the
   business name below the cover is enough. Where the cover is generic
   content with no branding visible in it (Tomikomi, א. מתן, Fuxya),
   the small integrated logo in .portfolio-card__identity carries that
   job instead. One or the other, never both, kept consistent as more
   projects are added.
   ========================================================================== */

.portfolio {
  position: relative;
  padding-block: var(--space-10);
  scroll-margin-top: var(--header-height);
  border-top: 1px solid var(--color-border-soft);
  overflow: hidden;
  overflow: clip;
}

.portfolio__orb {
  width: 700px;
  height: 700px;
  inset-inline-end: -260px;
  top: -160px;
  background: radial-gradient(circle, rgba(158, 207, 247, 0.13), transparent 70%);
  opacity: 0.8;
}

.portfolio__intro {
  position: relative;
  z-index: 1;
  max-width: 680px;
}

.portfolio__heading {
  font-size: var(--fs-h2);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  color: var(--color-text-primary);
  text-wrap: balance;
  margin-block-end: var(--space-5);
}

.portfolio__lead {
  font-size: var(--fs-lead);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
  max-width: 60ch;
}

/* ---------- Grid ----------
   Two columns from tablet width up, one column on phones — the same
   560px small-screen threshold every other section already uses, so no
   new breakpoint value is introduced. At 561px and up the grid itself
   is narrowed to 76% and centered — the direct lever for "smaller cards,
   more air between them" without touching the column count. */

.portfolio__grid {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  margin-block-start: var(--space-9);
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--space-8) + var(--space-3));
}

@media (min-width: 561px) {
  .portfolio__grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 76%;
    margin-inline: auto;
  }
}

/* ---------- Card ---------- */

.portfolio-card {
  position: relative;
}

/* Ambient halo — the same recipe as every other card on the site,
   already separating the card from the background at rest and
   blooming further on hover/focus. */

.portfolio-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -16px;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(158, 207, 247, 0.15), transparent 65%);
  opacity: 0.4;
  filter: blur(22px);
  pointer-events: none;
  transition: opacity var(--duration-slow) var(--ease-premium);
}

.portfolio-card:hover::before,
.portfolio-card:focus-within::before {
  opacity: 0.9;
}

.portfolio-card__trigger {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  text-align: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--radius-lg);
  appearance: none;
  -webkit-appearance: none;
}

.portfolio-card__trigger:focus-visible {
  outline-offset: 4px;
}

.portfolio-card__surface {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: radial-gradient(120% 90% at 16% -12%, rgba(255, 255, 255, 0.1), transparent 55%),
    radial-gradient(36% 28% at 84% 4%, rgba(255, 255, 255, 0.06), transparent 62%),
    linear-gradient(205deg, rgba(255, 255, 255, 0.035) 0%, transparent 42%),
    radial-gradient(130% 85% at 50% 125%, rgba(0, 0, 0, 0.34), transparent 60%), var(--color-bg-elevated);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease-premium), border-color var(--duration-base) var(--ease-premium),
    box-shadow var(--duration-base) var(--ease-premium);
}

.portfolio-card:hover .portfolio-card__surface,
.portfolio-card:focus-within .portfolio-card__surface {
  transform: translateY(-6px);
  border-color: rgba(158, 207, 247, 0.32);
  box-shadow: var(--shadow-card-hover);
}

/* ---------- Media ----------
   Square, matching the real cover asset's own aspect ratio — nothing is
   force-cropped. Cover photo and video occupy the same box; only one is
   ever visible at a time (crossfade), driven by the .is-active class
   js/portfolio.js toggles once the video has real playable data. */

.portfolio-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--color-bg);
}

.portfolio-card__cover,
.portfolio-card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.portfolio-card__cover {
  display: block;
  transition: transform 900ms var(--ease-premium), opacity 700ms var(--ease-premium);
}

.portfolio-card__video {
  opacity: 0;
  transition: opacity 700ms var(--ease-premium);
  pointer-events: none;
}

.portfolio-card:hover .portfolio-card__cover,
.portfolio-card:focus-within .portfolio-card__cover {
  transform: scale(1.06);
}

.portfolio-card__media.is-video-active .portfolio-card__video {
  opacity: 1;
}

.portfolio-card__media.is-video-active .portfolio-card__cover {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-card:hover .portfolio-card__cover,
  .portfolio-card:focus-within .portfolio-card__cover {
    transform: none;
  }
}

/* Soft dark overlay — deepens on hover/focus, part of the premium
   crossfade into the video preview. */

.portfolio-card__overlay {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 12, 16, 0.05) 0%, rgba(8, 12, 16, 0.5) 100%);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-premium);
  pointer-events: none;
}

.portfolio-card:hover .portfolio-card__overlay,
.portfolio-card:focus-within .portfolio-card__overlay {
  opacity: 1;
}

/* ---------- Ambient cinematic zoom ----------
   A continuous, very slow breathing scale on the whole media frame —
   lives on .portfolio-card__media (the container), while the existing
   hover-triggered zoom above lives on .portfolio-card__cover (the
   image itself). Two different elements, so the two transforms never
   compete for the same property. Barely perceptible on its own; it
   only reads once you watch a card for a few seconds. */

@media (prefers-reduced-motion: no-preference) {
  .portfolio-card__media {
    animation: portfolio-media-breathe 20s ease-in-out infinite;
  }

  .portfolio__grid .portfolio-card:nth-child(2) .portfolio-card__media {
    animation-delay: -5s;
  }

  .portfolio__grid .portfolio-card:nth-child(3) .portfolio-card__media {
    animation-delay: -10s;
  }

  .portfolio__grid .portfolio-card:nth-child(4) .portfolio-card__media {
    animation-delay: -15s;
  }
}

@keyframes portfolio-media-breathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.025);
  }
}

/* ---------- Glass reflection sweep ----------
   A slow diagonal highlight crossing the media roughly once every 13
   seconds, resting invisible for the rest of the cycle — a glass-like
   sheen, not a loading shimmer. Sits above the dark hover/active
   overlay (z-index: 2 vs. the overlay's 1) so it still glints through
   a deepened frame. Staggered per card so all four never sweep in
   sync. Clipped to the media's own frame by .portfolio-card__media's
   existing overflow: hidden — no new markup needed. */

.portfolio-card__media::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -20% -70%;
  background: linear-gradient(
    115deg,
    transparent 42%,
    rgba(255, 255, 255, 0.1) 48%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.1) 52%,
    transparent 58%
  );
  opacity: 0;
  transform: translateX(-55%);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .portfolio-card__media::after {
    animation: portfolio-media-sheen 13s ease-in-out infinite;
  }

  .portfolio__grid .portfolio-card:nth-child(2) .portfolio-card__media::after {
    animation-delay: 3.2s;
  }

  .portfolio__grid .portfolio-card:nth-child(3) .portfolio-card__media::after {
    animation-delay: 6.4s;
  }

  .portfolio__grid .portfolio-card:nth-child(4) .portfolio-card__media::after {
    animation-delay: 9.6s;
  }
}

@keyframes portfolio-media-sheen {
  0%,
  6% {
    opacity: 0;
    transform: translateX(-55%);
  }
  10% {
    opacity: 1;
  }
  30% {
    opacity: 1;
    transform: translateX(55%);
  }
  36%,
  100% {
    opacity: 0;
    transform: translateX(55%);
  }
}

/* ---------- Active media glow ----------
   A soft blue bloom rooted near the top of the card (where the media
   sits), visible only while that card's video is actually playing —
   .is-video-active is the same class js/portfolio.js already toggles
   for the cover/video crossfade, now also read here via :has(). Idle
   cards (paused, or the no-video א. מתן card) are completely
   unaffected. Lives on .portfolio-card itself, the one layer in this
   stack with no overflow: hidden, so it can bloom softly around the
   frame instead of being clipped inside it — same technique as the
   card's existing ambient halo above. */

.portfolio-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -18px -18px 46% -18px;
  border-radius: 32px;
  background: radial-gradient(65% 65% at 50% 38%, rgba(120, 190, 245, 0.38), transparent 72%);
  filter: blur(26px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 900ms var(--ease-premium);
}

.portfolio-card:has(.portfolio-card__media.is-video-active)::after {
  opacity: 0.7;
}

/* ---------- Body: name + tags, on the card's own glass ---------- */

.portfolio-card__body {
  position: relative;
  z-index: 1;
  padding: var(--space-5) var(--space-6) var(--space-6);
}

/* Identity row — logo mark beside the business name, same "icon beside
   wordmark" convention used site-wide (header/footer brand). Optional:
   cards with no clean logo asset (Eden Phone) skip this wrapper and
   use a bare .portfolio-card__name instead, no empty-state needed. */

.portfolio-card__identity {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
}

.portfolio-card__identity .portfolio-card__name {
  margin: 0;
}

.portfolio-card__logo-mark {
  display: block;
  flex: none;
  height: 32px;
  width: auto;
}

/* Fuxya's mark is a full wide wordmark (not a compact icon like
   Tomikomi's or א. מתן's), so at the shared 32px height it reads
   heavier than the business name beside it. Scoped down slightly here
   so the hierarchy stays name-first, without touching the shared rule
   the other two cards rely on. */

.portfolio-card__trigger[data-portfolio-trigger="fuxya"] .portfolio-card__logo-mark {
  height: 24px;
}

.portfolio-card__name {
  font-size: 1.25rem;
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-3);
}

.portfolio-card__tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.portfolio-card__tag {
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-accent-soft);
  font-size: 0.8125rem;
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  transition: border-color var(--duration-base) var(--ease-premium), color var(--duration-base) var(--ease-premium);
}

.portfolio-card:hover .portfolio-card__tag,
.portfolio-card:focus-within .portfolio-card__tag {
  border-color: rgba(158, 207, 247, 0.4);
  color: var(--color-text-primary);
}

/* ---------- Small screens ----------
   Matches the same padding-block reduction used across every other
   section at this breakpoint. */

@media (max-width: 560px) {
  .portfolio {
    padding-block: var(--space-8);
  }
}

/* ---------- Scroll reveal stagger ---------- */

.portfolio__grid .portfolio-card:nth-child(1) { transition-delay: 30ms; }
.portfolio__grid .portfolio-card:nth-child(2) { transition-delay: 60ms; }
.portfolio__grid .portfolio-card:nth-child(3) { transition-delay: 90ms; }
.portfolio__grid .portfolio-card:nth-child(4) { transition-delay: 120ms; }