/* ==========================================================================
   Envision Creative — portfolio sections
   Branding deck, social grid, reels rail, screens. Class names are plain and
   readable so they can be targeted from Elementor custom CSS.
   ========================================================================== */

.portfolio-section { position: relative; padding-block: var(--bay); }
.portfolio-section + .portfolio-section { padding-top: 0; }
.portfolio-section__head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.portfolio-section__head h2 { font-size: var(--step-3); margin-bottom: .8rem; }
.portfolio-section__head p { color: var(--paper-70); font-size: var(--step-1); line-height: 1.55; font-weight: 300; }

/* --------------------------------------------------------------------------
   1. The deck
   A pile of pages, not a slideshow. The brand book and every social carousel
   use it, because they are the same object: pages stacked one on top of the
   next, the ones underneath peeking out at the bottom edge. You drag the top
   page aside and the page below it is already there. Nothing opens, nothing
   wipes across: the sheet you were holding leaves and the next one is what
   was always under it.
   -------------------------------------------------------------------------- */

.ec-deck {
  --deck-ar: 4 / 3;
  --deck-step: 14px;   /* how much of each page behind shows below the one above */
  max-width: 980px;
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* The window clips a page on its way out, so a dismissed sheet leaves the
   frame instead of flying across the section. The padding is the room the
   pile underneath needs. */
.ec-deck__frame {
  position: relative;
  padding: 2px 2px 42px;
  overflow: hidden;
}

.ec-deck__stack {
  position: relative;
  aspect-ratio: var(--deck-ar);
  margin: 0;
  padding: 0;
  list-style: none;
  touch-action: pan-y;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.ec-deck__stack:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; }
.ec-deck__stack.is-dragging { cursor: grabbing; }
.ec-deck__stack.is-dragging .ec-deck__slide { transition: none; }

/* --o is the page's depth in the pile: 0 is the sheet in your hand, 1 the one
   directly under it. It is a plain number so a drag can ease it between the
   two and the pile lifts as the top page leaves. */
.ec-deck__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--ink-2);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .38), 0 0 0 1px var(--line);
  /* Scaled from the bottom edge, so a page behind keeps its foot on the pile
     and the step pushes it clear: you see its bottom lip and its narrower
     sides, which is what makes it read as paper rather than a slideshow. */
  transform-origin: 50% 100%;
  transform:
    translate3d(0, calc(var(--o, 0) * var(--deck-step)), 0)
    scale(calc(1 - var(--o, 0) * .045));
  transition: transform .46s var(--ease-out), opacity .3s linear;
}
/* Only the first few sheets are drawn; a 26 page book should not paint 26
   shadows for the sake of an edge nobody can see. */
.ec-deck__slide.is-deep {
  opacity: 0;
  visibility: hidden;
  content-visibility: hidden;
  pointer-events: none;
  transition: none;
}
.ec-deck__slide.is-leaving { transition: transform .42s var(--ease-out), opacity .42s linear; }

/* The pages underneath sit in the shade of the one above. */
.ec-deck__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  opacity: calc(var(--o, 0) * .22);
  pointer-events: none;
}

.ec-deck__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* The arrows are the keyboard and trackpad way through; the drag is the
   point, so they stay quiet until the eye is on the deck. */
.ec-deck__nav {
  position: absolute;
  top: calc(50% - 15px);
  z-index: 40;
  width: 42px;
  height: 42px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(8, 12, 18, .86);
  cursor: pointer;
  opacity: 0;
  transition: opacity .3s var(--ease-soft), background .3s, border-color .3s;
}
.ec-deck__nav--prev { left: 14px; }
.ec-deck__nav--next { right: 14px; }
.ec-deck__nav svg {
  width: 15px; height: 15px;
  fill: none;
  stroke: var(--paper);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ec-deck:hover .ec-deck__nav,
.ec-deck__nav:focus-visible { opacity: 1; }
.ec-deck__nav:hover { background: var(--blue); border-color: var(--blue); }
@media (hover: none) { .ec-deck__nav { opacity: .8; } }

.ec-deck__bar {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-top: .7rem;
}
.ec-deck__dots { display: flex; gap: 6px; flex-wrap: wrap; }
.ec-deck__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--paper-25);
  cursor: pointer;
  transition: background .3s, transform .3s var(--ease-out);
}
.ec-deck__dot.is-on { background: var(--blue); transform: scale(1.5); }

.ec-deck__count {
  margin-left: auto;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper-45);
  font-variant-numeric: tabular-nums;
}
.ec-deck__hint {
  margin-top: .5rem;
  font-size: .8rem;
  color: var(--paper-45);
}

/* Carousels: two posts are two posts. Each keeps its own pile, label and
   counter, side by side once there is room, never merged into one run. */
.portfolio-carousels {
  display: grid;
  gap: clamp(2.2rem, 4vw, 3.4rem);
  margin-top: 1.2rem;
}
@media (min-width: 1000px) {
  .portfolio-carousels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.portfolio-carousel-post { min-width: 0; }
.portfolio-carousel-post .ec-deck { margin-top: 0; max-width: none; }
.portfolio-carousel-post__label {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin: 0 0 .7rem;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--paper);
}
.portfolio-carousel-post__n { color: var(--paper-45); letter-spacing: .1em; }

@media (prefers-reduced-motion: reduce) {
  .ec-deck__slide,
  .ec-deck__nav,
  .ec-deck__dot { transition: none !important; }
}

/* --------------------------------------------------------------------------
   2. Social grid
   Feed designs arrive as 1:1, 4:5 and 9:16. Forcing one crop ruins them, so
   the grid sets a column width and lets every image keep its own height.
   -------------------------------------------------------------------------- */

.portfolio-social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: clamp(.7rem, 1.5vw, 1.1rem);
  align-items: start;
}
.portfolio-social-grid img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--ink-2);
}
.portfolio-social-group + .portfolio-social-group { margin-top: clamp(2rem, 4vw, 3rem); }
.portfolio-social-group__label {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--paper-45); margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   3. Reels rail
   -------------------------------------------------------------------------- */

.portfolio-reels-grid {
  display: flex;
  gap: clamp(.8rem, 1.6vw, 1.3rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.portfolio-reel {
  position: relative;
  flex: none;
  width: clamp(210px, 22vw, 280px);
  aspect-ratio: 9 / 16;
  border-radius: 18px;
  overflow: hidden;
  background: var(--ink-2);
  border: 1px solid var(--line);
  scroll-snap-align: start;
  cursor: pointer;
}
.portfolio-reel video,
.portfolio-reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portfolio-reel__label {
  position: absolute; inset: auto 0 0 0; z-index: 3; padding: 1rem;
  background: linear-gradient(to top, rgba(3,17,30,.94) 12%, transparent);
  font-size: .9rem; font-family: var(--display); font-weight: 700;
}
.portfolio-reel__play {
  position: absolute; z-index: 4; left: 50%; top: 50%;
  width: 58px; height: 58px; translate: -50% -50%;
  transition: opacity .35s;
}
.portfolio-reel__play circle:first-child { fill: none; stroke: var(--paper); stroke-width: 2.4; }
.portfolio-reel__play circle:last-child { fill: var(--paper); }
.portfolio-reel.is-playing .portfolio-reel__play { opacity: 0; }

.portfolio-reels-embeds { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.2rem; margin-top: 1.6rem; }
.portfolio-reels-embeds iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 14px; }

/* --------------------------------------------------------------------------
   4. Screens (UI/UX and Website)
   -------------------------------------------------------------------------- */

.portfolio-uiux-gallery,
.portfolio-website-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(.8rem, 1.6vw, 1.4rem);
  align-items: start;
}
.portfolio-uiux-gallery img,
.portfolio-website-gallery img {
  width: 100%; height: auto; display: block;
  border-radius: 12px; border: 1px solid var(--line); background: var(--ink-2);
}
/* Phone screens are tall; a narrower track keeps them from towering. */
.portfolio-screens--mobile { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }

.portfolio-screens-group + .portfolio-screens-group { margin-top: clamp(2rem, 4vw, 3rem); }
.portfolio-screens-group__label {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--paper-45); margin-bottom: 1rem;
}
.portfolio-website-link {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.4rem;
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-hi);
  border-bottom: 1px solid currentColor; padding-bottom: .25rem;
}

/* --------------------------------------------------------------------------
   5. Section jump nav
   -------------------------------------------------------------------------- */

.portfolio-jump { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.6rem; }
.portfolio-jump a {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--paper-45); border: 1.5px solid var(--line);
  border-radius: var(--wonk-a); padding: .5rem 1.1rem; rotate: -.5deg;
  transition: color .35s, border-color .35s, rotate .35s var(--ease-pop);
}
.portfolio-jump a:nth-child(even) { rotate: .6deg; border-radius: var(--wonk-b); }
.portfolio-jump a:hover { color: var(--paper); border-color: rgba(16,149,221,.5); rotate: 0deg; }

/* --------------------------------------------------------------------------
   6. Client wall
   One optical weight per logo. Every cell is the same size, carries the same
   padding and the same 11:6 frame, so no mark shouts louder than its
   neighbour. Hover one and the rest go quiet, which is the same eye motion
   the rest of the site uses.
   -------------------------------------------------------------------------- */

.wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: var(--line-soft);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 600px)  { .wall { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 860px)  { .wall { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1180px) { .wall { grid-template-columns: repeat(5, 1fr); } }

.wall__cell {
  position: relative;
  /* Grid items size to min-content by default, and a 300px logo would inflate
     that, pushing the last column out of its track. */
  min-width: 0;
  min-height: 0;
  aspect-ratio: 11 / 6;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 2.2vw, 1.9rem);
  background: var(--ink);
  isolation: isolate;
  transition: background .55s var(--ease-soft), opacity .5s var(--ease-soft);
}
/* The cell is a grid item, and a grid item's automatic minimum size is its
   content, which would let a tall logo push one cell past the 11:6 frame and
   break the row. min-height:0 hands the height back to aspect-ratio, and the
   logo then fits inside whatever that leaves. */
.wall__cell img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: .55;
  transition: opacity .45s var(--ease-soft), transform .6s var(--ease-out);
}
@media (hover: hover) {
  .wall:hover .wall__cell { opacity: .32; }
  .wall:hover .wall__cell:hover { opacity: 1; }
}
.wall__cell:hover { background: var(--ink-2); }
.wall__cell:hover img { opacity: 1; transform: scale(1.05); }

/* The iris ring draws itself around whichever logo the eye is on. */
.wall__iris {
  position: absolute;
  inset: 8%;
  z-index: -1;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease-soft);
}
.wall__iris ellipse {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: var(--len, 300);
  stroke-dashoffset: var(--len, 300);
  transition: stroke-dashoffset .85s var(--ease-out);
}
.wall__cell:hover .wall__iris { opacity: .5; }
.wall__cell:hover .wall__iris ellipse { stroke-dashoffset: 0; }

.wall__name {
  position: absolute;
  inset: auto 0 .55rem 0;
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  color: var(--paper-25);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .4s, transform .4s var(--ease-out);
}
.wall__cell:hover .wall__name { opacity: 1; transform: none; }

/* Closes the last row rather than leaving a hole in the grid. */
.wall__cell--you {
  gap: .5rem;
  background: var(--ink-2);
  text-decoration: none;
}
.wall__cell--you svg {
  width: 34px;
  height: 22px;
  fill: none;
  stroke: var(--paper-45);
  stroke-width: 1.6;
  transition: stroke .4s;
}
.wall__cell--you span {
  font-family: var(--hand);
  font-weight: 700;
  font-size: clamp(1rem, .9rem + .5vw, 1.35rem);
  line-height: 1.1;
  text-align: center;
  color: var(--paper-45);
  transform: rotate(-3deg);
  transition: color .4s;
}
.wall__cell--you:hover span { color: var(--paper); }
.wall__cell--you:hover svg { stroke: var(--blue-hi); }

@media (prefers-reduced-motion: reduce) {
  .wall__cell,
  .wall__cell img,
  .wall__iris,
  .wall__iris ellipse,
  .wall__name { transition: none; }
}

/* The grid blinks between filter states rather than snapping. */
.works[data-ec-grid] { transition: opacity .26s ease; }
.works[data-ec-grid].is-blinking { opacity: .3; transition: opacity .12s ease; }
.works__none { margin-top: 2rem; color: var(--paper-45); font-size: var(--step-0); }
@media (prefers-reduced-motion: reduce) { .works[data-ec-grid] { transition: none; } }


/* == websites == */
.ec-web { margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.ec-web__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.4rem, 3vw, 2.2rem);
  align-items: end;
}
@media (min-width: 900px) {
  .ec-web__stage { grid-template-columns: minmax(0, 1fr) clamp(180px, 17vw, 230px); }
  .ec-web__stage--solo { grid-template-columns: minmax(0, 1fr); }
}
.ec-web__browser {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--ink-2);
  box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 0 1px var(--line);
}
.ec-web__chrome {
  display: flex; align-items: center; gap: .8rem;
  padding: .62rem .9rem;
  background: rgba(255,255,255,.045);
  border-bottom: 1px solid var(--line);
}
.ec-web__dots { display: inline-flex; gap: .38rem; flex: none; }
.ec-web__dots i {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--paper-25, rgba(255,255,255,.25));
}
.ec-web__addr {
  flex: 1 1 auto; min-width: 0;
  font-size: .72rem; letter-spacing: .04em;
  color: var(--paper-45);
  background: rgba(0,0,0,.28);
  border-radius: 999px;
  padding: .3rem .8rem;
  text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ec-web__phone {
  margin: 0 auto;
  width: 100%; max-width: 230px;
  border-radius: 26px;
  overflow: hidden;
  background: var(--ink-2);
  box-shadow: 0 18px 44px rgba(0,0,0,.45), 0 0 0 1px var(--line);
  padding: 8px;
}
.ec-web__bar {
  display: block; width: 34%; height: 4px; margin: 2px auto 7px;
  border-radius: 999px; background: var(--paper-25, rgba(255,255,255,.25));
}
.ec-web__phone .ec-web__viewport { border-radius: 18px; aspect-ratio: 9 / 19.5; }
.ec-web__viewport {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ink);
  scrollbar-width: none;
}
.ec-web__viewport::-webkit-scrollbar { width: 0; height: 0; }
.ec-web__viewport img {
  display: block; width: 100%; height: auto;
  transform: translateY(0);
  transition: transform var(--pan-dur, 12s) ease-in-out;
  will-change: transform;
}
@media (hover: hover) {
  .ec-web__browser:hover .ec-web__viewport img,
  .ec-web__browser:focus-visible .ec-web__viewport img,
  .ec-web__phone:hover .ec-web__viewport img,
  .ec-web__phone:focus-visible .ec-web__viewport img { transform: translateY(var(--pan, 0)); }
}
@media (hover: none) {
  .ec-web__viewport { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .ec-web__viewport img { transition: none; will-change: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ec-web__viewport { overflow-y: auto; }
  .ec-web__viewport img { transition: none; transform: none; will-change: auto; }
}
.ec-web__browser:focus-visible, .ec-web__phone:focus-visible { outline: 2px solid var(--accent, #4da3ff); outline-offset: 3px; }
.ec-web__hint {
  margin: .9rem 0 0;
  font-size: .72rem; letter-spacing: .04em;
  color: var(--paper-45);
}
@media (hover: none) { .ec-web__hint { display: none; } }
.ec-web__meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .7rem 1.1rem;
  margin-top: 1.1rem;
}
.ec-web__tech {
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--paper-45);
  border: 1px solid var(--line); border-radius: 999px;
  padding: .34rem .8rem;
}
.ec-web__visit {
  font-size: .82rem; letter-spacing: .04em;
  color: var(--paper); text-decoration: none;
  border-bottom: 1px solid var(--paper-45);
  padding-bottom: 2px;
}
.ec-web__visit:hover, .ec-web__visit:focus-visible { border-bottom-color: var(--paper); }