/* ── RULVAS · WORK PAGE · v4 ── */

/* ═══ 1. PAGE BASE ═══ */
.work-page {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 18% 10%, rgba(84,131,179,0.18), transparent 26%),
    radial-gradient(circle at 82% 18%, rgba(125,160,202,0.12), transparent 24%),
    linear-gradient(180deg, #010a18 0%, #031427 45%, #021024 100%);
}
.work-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 28%, rgba(193,232,255,0.05), transparent 42%),
    linear-gradient(180deg, rgba(2,16,36,0) 0%, rgba(2,16,36,0.42) 100%);
}
.work-page__particles {
  position: fixed;
  inset: 0;
  z-index: -2;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.95;
}
.page-load-mask {
  position: fixed;
  inset: 0;
  z-index: 2500;
  background: #000;
  pointer-events: none;
  animation: page-mask-fade 0.6s ease forwards;
}
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  z-index: 1600;
  width: 100%; height: 2px;
  pointer-events: none;
}
.scroll-progress__bar {
  display: block;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, rgba(84,131,179,0.4) 0%, var(--mid) 45%, var(--lightest) 100%);
  transform: scaleX(0);
  transform-origin: left center;
}
.motion-cursor { display: none; }

/* ═══ 2. INTRO SECTION ═══ */
.work-main { position: relative; overflow: hidden; }

.work-intro {
  position: relative;
  padding: clamp(5rem, 13vh, 8.5rem) 0 clamp(3.5rem, 6vh, 5rem);
  text-align: center;
  overflow: hidden;
}

/* ambient glow behind the text */
.work-intro__glow {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 72vw; height: 72vw;
  max-width: 900px; max-height: 900px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 44%,
    rgba(84,131,179,0.22) 0%,
    rgba(84,131,179,0.08) 34%,
    transparent 68%
  );
  pointer-events: none;
  z-index: 0;
}

.work-intro__shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  padding-top: clamp(1rem, 3vh, 2rem);
}

.work-intro__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.35rem;
  max-width: 52rem;
}

.work-kicker {
  color: var(--light);
  font-size: .76rem;
  letter-spacing: .28em;
  text-transform: uppercase;
}

/* ═══ 3. TITLE + FILTER ═══ */
.work-title {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(5rem, 13vw, 10rem);
  line-height: .86;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.work-title .split-char,
.work-title .split-space { display: inline-block; }
.work-title .split-space  { width: .28em; }

.work-subtitle {
  margin: 0;
  color: rgba(193,232,255,.72);
  font-size: 1rem;
  line-height: 1.85;
  max-width: 38rem;
}

.work-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.4rem;
  margin-top: .4rem;
}
.work-filter__button {
  position: relative;
  padding: .35rem 0;
  border: 0;
  background: transparent;
  color: var(--light);
  font-size: .88rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .25s ease;
}
.work-filter__button::after {
  content: "";
  position: absolute;
  left: 0; bottom: -.18rem;
  width: 100%; height: 1px;
  background: var(--lightest);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s ease, opacity .3s ease;
}
.work-filter__button:hover,
.work-filter__button:focus-visible,
.work-filter__button.is-active { color: var(--lightest); outline: none; }
.work-filter__button.is-active::after { opacity: 1; transform: scaleX(1); }

/* ═══ 4. GALLERY ═══ */
.work-gallery { padding-top: 2.5rem; padding-bottom: 6rem; }

.work-gallery__header {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(18rem,34rem);
  gap: 1.5rem 2rem;
  align-items: end;
  margin-bottom: 2.4rem;
}
.work-gallery__header h2 {
  margin: 0;
  color: var(--lightest);
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.4rem, 4.8vw, 4rem);
  line-height: .92;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.work-gallery__header p {
  max-width: none; margin: 0;
  color: rgba(193,232,255,.7);
  font-size: .98rem; line-height: 1.85;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: 1.5rem;
  align-items: stretch;
}

/* ── Portfolio Cards ── */
.portfolio-card {
  position: relative;
  grid-column: span 5;
  display: grid;
  grid-template-rows: minmax(14rem,1fr) auto;
  min-height: 29rem;
  overflow: hidden;
  border: 1px solid rgba(84,131,179,.28);
  background: linear-gradient(180deg, rgba(5,38,89,.78) 0%, rgba(2,16,36,.52) 100%);
  color: inherit;
  text-decoration: none;
  isolation: isolate;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --enter-y: 0px;
  --hover-lift: 0px;
  transform: perspective(1600px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))
    translateY(calc(var(--enter-y) + var(--hover-lift)));
  transition: transform .22s ease, box-shadow .35s ease, border-color .35s ease, opacity .3s ease, filter .35s ease;
}
.portfolio-card--wide { grid-column: span 7; }
.portfolio-card--tall { min-height: 34rem; }

.portfolio-card::before {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: 2;
  border: 1px solid rgba(193,232,255,.08);
  pointer-events: none;
}
.portfolio-card::after {
  content: "";
  position: absolute;
  inset: auto 12% -1.5rem;
  z-index: -1;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(84,131,179,.24);
  filter: blur(26px);
  opacity: .7;
}

.portfolio-card__beam {
  position: absolute;
  inset: -40% auto auto -30%;
  z-index: 1;
  width: 42%; height: 180%;
  background: linear-gradient(115deg, transparent 0%, rgba(193,232,255,.16) 48%, transparent 100%);
  transform: rotate(18deg) translateX(-180%);
  transition: transform .65s ease;
  pointer-events: none;
}

.portfolio-card__media {
  position: relative;
  display: grid;
  place-items: end start;
  padding: 1.35rem;
  background:
    radial-gradient(circle at 76% 24%, rgba(193,232,255,.16), transparent 26%),
    linear-gradient(135deg, rgba(5,38,89,.95) 0%, rgba(84,131,179,.62) 100%);
  overflow: hidden;
}
.portfolio-card__media::before,
.portfolio-card__media::after { content: ""; position: absolute; pointer-events: none; }
.portfolio-card__media::before { inset: 1rem; border: 1px solid rgba(193,232,255,.12); }
.portfolio-card__media::after {
  inset: auto 1rem 1rem auto;
  width: 34%; aspect-ratio: 1;
  border: 1px solid rgba(193,232,255,.1);
  border-radius: 50%;
}
.portfolio-card__media span {
  position: relative; z-index: 1;
  max-width: 16rem;
  color: rgba(193,232,255,.92);
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.15rem, 2vw, 1.7rem);
  line-height: 1; letter-spacing: .08em; text-transform: uppercase;
}

.portfolio-card__body {
  position: relative; z-index: 1;
  display: grid; gap: .7rem;
  padding: 1.45rem;
}
.portfolio-card__label {
  color: var(--light);
  font-size: .76rem; letter-spacing: .2em; text-transform: uppercase;
}
.portfolio-card h2 {
  margin: 0; color: var(--lightest);
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2rem, 3vw, 2.8rem);
  line-height: .94; letter-spacing: .04em;
}
.portfolio-card__summary {
  margin: 0; max-width: 25rem;
  color: rgba(193,232,255,.72);
  font-size: .94rem; line-height: 1.8;
}

.portfolio-card__overlay {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: end start;
  padding: 1.45rem;
  background: linear-gradient(180deg, rgba(2,16,36,.05) 0%, rgba(2,16,36,.94) 82%);
  transform: translateY(102%);
  transition: transform .38s cubic-bezier(.22,1,.36,1);
}
.portfolio-card__cta {
  color: var(--lightest);
  font-size: .84rem; letter-spacing: 0; text-transform: uppercase;
  transform: translateY(10px);
  transition: letter-spacing .3s ease, transform .3s ease;
}

.portfolio-card:hover,
.portfolio-card:focus-visible,
.work-page.is-loaded .portfolio-card.is-visible:hover,
.work-page.is-loaded .portfolio-card.is-visible:focus-visible {
  --hover-lift: -14px;
  border-color: rgba(193,232,255,.52);
  box-shadow: 0 34px 80px rgba(2,16,36,.38), 0 0 34px rgba(84,131,179,.18);
  outline: none; filter: saturate(1.06);
}
.portfolio-card:hover .portfolio-card__beam,
.portfolio-card:focus-visible .portfolio-card__beam { transform: rotate(18deg) translateX(360%); }
.portfolio-card:hover .portfolio-card__overlay,
.portfolio-card:focus-visible .portfolio-card__overlay { transform: translateY(0); }
.portfolio-card:hover .portfolio-card__cta,
.portfolio-card:focus-visible .portfolio-card__cta { letter-spacing: .32em; transform: translateY(0); }

/* ═══ 5. ENTRANCE ANIMATIONS ═══ */
.work-page.is-scripted .work-kicker,
.work-page.is-scripted .work-subtitle,
.work-page.is-scripted .work-filter,
.work-page.is-scripted .work-title .split-char,
.work-page.is-scripted .work-title .split-space {
  opacity: 0;
}

.work-page.is-loaded .work-kicker {
  animation: simple-fade .8s ease .1s both;
}
.work-page.is-loaded .work-title .split-char,
.work-page.is-loaded .work-title .split-space {
  animation: simple-fade .8s ease .2s both;
}
.work-page.is-loaded .work-subtitle {
  animation: simple-fade .8s ease .35s both;
}
.work-page.is-loaded .work-filter {
  animation: simple-fade .8s ease .5s both;
}

/* Reveal scroll */
.work-page.is-scripted .reveal-on-scroll:not(.portfolio-card) {
  opacity: 0; transform: translateY(34px);
}
.work-page.is-scripted .reveal-on-scroll:not(.portfolio-card).is-visible {
  opacity: 1; transform: translateY(0);
  transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
}
.work-page.is-scripted .portfolio-card.reveal-on-scroll { opacity: 0; --enter-y: 42px; }
.work-page.is-scripted .portfolio-card.reveal-on-scroll.is-visible { opacity: 1; --enter-y: 0px; }
.portfolio-card.reveal-on-scroll {
  transition: transform .22s ease, box-shadow .35s ease, border-color .35s ease, filter .35s ease,
    opacity .8s cubic-bezier(.22,1,.36,1);
}
.portfolio-card.is-filtered-prep,
.portfolio-card.is-filtered-out {
  opacity: 0 !important;
  transform: perspective(1600px) scale(.88) !important;
  transition: transform .3s ease, opacity .3s ease, box-shadow .35s ease, border-color .35s ease !important;
}
.portfolio-card.is-filtered-in {
  opacity: 1 !important;
  transform: perspective(1600px) scale(1) !important;
  transition: transform .3s ease, opacity .3s ease, box-shadow .35s ease, border-color .35s ease !important;
}

/* ═══ 6. KEYFRAMES ═══ */
@keyframes page-mask-fade {
  from { opacity: 1; visibility: visible; }
  99%  { opacity: 0; visibility: visible; }
  to   { opacity: 0; visibility: hidden;  }
}
@keyframes simple-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ═══ 7. RESPONSIVE ═══ */
@media (max-width: 768px) {
  .work-intro  { padding: 4.5rem 0 2.5rem; }
  .work-title  { font-size: clamp(3.5rem, 18vw, 5.5rem); white-space: normal; }
  .work-gallery__header { grid-template-columns: 1fr; }
  .work-grid { grid-template-columns: 1fr; }
  .portfolio-card,
  .portfolio-card--wide { grid-column: span 1; min-height: 27rem; }
  .motion-cursor { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .work-page__particles { display: none; }
  .work-kicker,
  .work-title .split-char,
  .work-title .split-space,
  .work-subtitle,
  .work-filter,
  .reveal-on-scroll,
  .reveal-on-scroll.is-visible,
  .portfolio-card,
  .portfolio-card.is-filtered-prep,
  .portfolio-card.is-filtered-in,
  .portfolio-card.is-filtered-out {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .motion-cursor         { display: none; }
  .portfolio-card__overlay { transition: none; }
  .portfolio-card__cta   { transition: none; }
}