/* =========================================================
   PORTFOLIO — hero, stacking 3D cards, flip text, 3D ring
   ========================================================= */

/* ---------- Hero ---------- */
.phero {
  position: relative; min-height: 100vh; min-height: 100svh; overflow: clip;
  padding: calc(var(--gutter) * 2 + 3.6rem) var(--gutter) var(--gutter);
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem;
}
.phero__top { display: flex; gap: 1rem; align-items: center; position: relative; z-index: 2; }
.phero__star { position: absolute; right: -8vw; top: 6vh; width: min(52vw, 60vh); height: auto; z-index: 0; }
.phero__title { position: relative; z-index: 1; display: block; line-height: .76; white-space: nowrap; margin-left: -.03em; }
.phero__sub { position: relative; z-index: 2; max-width: 36ch; font-size: clamp(.95rem, 1.35vw, 1.3rem); font-weight: 700; line-height: 1.22; padding-right: 90px; }
@media (max-width: 800px) {
  .phero__star { width: 80vw; right: -30vw; top: 12vh; }
}

/* ---------- Stacking cards ---------- */
.stack { position: relative; perspective: 1800px; perspective-origin: 50% 0; }
.card {
  position: sticky; top: 0; height: auto;
  padding: .6rem var(--gutter) .8rem; display: flex;
}
.card__in {
  flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: clamp(.6rem, 1.6vh, 1.4rem);
  padding: clamp(1rem, 2vw, 2rem) clamp(1rem, 2vw, 2rem) clamp(1rem, 2vw, 2rem);
  border-radius: clamp(18px, 2.4vw, 36px);
  transform-origin: 50% 0; will-change: transform;
  background: var(--black); color: var(--red);
  position: relative;
}
.card--2 .card__in { background: var(--paper); color: var(--black); }
.card--3 .card__in { background: var(--red-deep); color: var(--paper); }
.card--4 .card__in { background: var(--black); color: var(--paper); }
.card--5 .card__in { background: var(--paper); color: var(--red-deep); }
.card--6 .card__in { background: var(--red); color: var(--black); box-shadow: inset 0 0 0 4px var(--black); }

.card__head { display: flex; gap: 1.2rem; align-items: center; font-size: clamp(.72rem, .9vw, .9rem); font-weight: 900; text-transform: uppercase; }
.card__n { font-size: 1.6em; line-height: 1; }
.card__y { opacity: .6; }
.card__tag { margin-left: auto; opacity: .8; padding-right: 7.5rem; }
.card__t { display: block; font-size: clamp(3rem, 9.4vw, 11rem); line-height: .82; white-space: nowrap; margin: .02em 0 0 -.03em; }
.card__grid { flex: none; display: grid; align-items: stretch; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--gutter); }
.card__txt { display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; }
.card__d { font-size: clamp(1rem, 1.7vw, 1.8rem); font-weight: 800; line-height: 1.12; max-width: 24ch; }
.card__link {
  display: inline-flex; align-items: center; gap: .6rem; align-self: flex-start;
  font-weight: 900; text-transform: uppercase; font-size: clamp(.78rem, .95vw, .95rem);
  border-bottom: 3px solid currentColor; padding-bottom: .3rem;
}
.card__link svg { width: 1.2em; height: 1.2em; transition: transform .5s var(--out); }
.card__link:hover svg { transform: translate(.25em, -.25em) rotate(0deg); }
.card__art { border-radius: clamp(10px, 1.4vw, 20px); min-height: 0; height: auto; aspect-ratio: 16 / 9; align-self: start; width: 100%; } /* every visual is 16:9, right under the title */
.card__art svg, .card__art img { transform: scale(1.18); will-change: transform; }
/* videos show the whole 16:9 frame, never cropped */
.card__art--video { position: relative; overflow: hidden; background: #000; }
.card__art--video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }

@media (max-width: 800px) {
  .card { padding: .4rem .5rem .5rem; }
  .card__in { padding: 1rem; }
  .card__head { flex-wrap: wrap; gap: .4rem 1rem; }
  .card__tag { margin-left: 0; padding-right: 0; flex-basis: 100%; order: 3; }
  .card__t { white-space: normal; font-stretch: 70%; font-size: min(21vw, 14vh); line-height: .84; }
  .card--2 .card__t, .card--4 .card__t, .card--6 .card__t { font-size: min(15.5vw, 11vh); } /* 10-letter words must fit */
  .card__grid { grid-template-columns: 1fr; grid-template-rows: auto auto; gap: .8rem; }
  .card__d { max-width: none; font-size: 1rem; }
  .card__txt { gap: .7rem; }
}

/* ---------- Flip text ---------- */
.flip { padding: clamp(5rem, 14vw, 14rem) var(--gutter); perspective: 1200px; overflow: clip; display: grid; gap: clamp(.4rem, 1vw, 1rem); }
.flip__line { display: block; line-height: .8; white-space: nowrap; transform-origin: 50% 0; will-change: transform; backface-visibility: hidden; }
.flip__line--o { -webkit-text-stroke: 3px var(--black); color: transparent; }
@media (max-width: 800px) { .flip__line--o { -webkit-text-stroke-width: 2px; } }

/* ---------- 3D ring ---------- */
.ring { height: 100vh; height: 100svh; position: relative; overflow: hidden; }
.ring__pin { position: relative; height: 100%; display: grid; place-items: center; }
.ring__label { position: absolute; top: calc(var(--gutter) * 2 + 3.4rem); left: var(--gutter); z-index: 3; }
.ring__title {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center; z-index: 0;
  padding: 0 var(--gutter); font-size: clamp(3rem, 10.5vw, 12rem); line-height: .86; opacity: .95;
}
.ring__scene { position: relative; z-index: 1; width: 100%; height: 100%; perspective: 1400px; perspective-origin: 50% 40%; display: grid; place-items: center; }
.ring__stage { position: relative; width: clamp(190px, 24vw, 360px); aspect-ratio: 1 / 1; transform-style: preserve-3d; }
.ring__item {
  position: absolute; inset: 0; border-radius: clamp(10px, 1.2vw, 18px); overflow: hidden;
  border: 3px solid var(--red); background: var(--black);
  backface-visibility: visible;
}
.ring__item .art { position: absolute; inset: 0; }
.ring__n, .ring__w { position: absolute; left: 1rem; font-weight: 900; text-transform: uppercase; color: var(--black); z-index: 1; }
.ring__n { top: .9rem; font-size: .9rem; background: var(--paper); padding: .15em .5em; border-radius: 99px; }
.ring__w { bottom: .6rem; font-size: clamp(1.3rem, 2.4vw, 2.6rem); font-stretch: 112%; letter-spacing: -.04em; line-height: .9; background: var(--paper); padding: .06em .22em; }
.ring__hint { position: absolute; bottom: var(--gutter); left: var(--gutter); z-index: 3; font-size: .8rem; font-weight: 900; text-transform: uppercase; }
@media (max-width: 800px) {
  .ring__stage { width: 58vw; }
  .ring__title { font-stretch: 78%; font-size: 21vw; }
  .ring__hint { right: calc(var(--gutter) + 90px); }
}

.band { padding: clamp(1rem, 2vw, 2rem) 0; overflow: hidden; }
.cta { padding: clamp(1.5rem, 4vw, 4rem) 0; overflow: hidden; }
.cta__link { display: block; transition: color .3s; }
.cta__link:hover { color: var(--paper); }

.card__shade { position: absolute; inset: 0; border-radius: inherit; background: #000; opacity: 0; pointer-events: none; z-index: 5; }
.ring__scene { background: transparent; }
.ring__pin { background-color: var(--black); }