/* ==========================================================================
   Elena Isnenghi | 3D + motion layer
   Everything here is progressive: the page is complete and readable
   with this stylesheet removed, and with prefers-reduced-motion on.
   ========================================================================== */

/* ---------- Shared 3D scene settings ---------- */
.scene {
  perspective: var(--persp, 1100px);
  perspective-origin: 50% 45%;
}

.scene-3d {
  transform-style: preserve-3d;
  will-change: transform;
}

/* ---------- Extruded display type (the "E" mark motif) ---------- */
.extrude {
  --ex-x: 0.055em;
  --ex-y: 0.055em;
  text-shadow:
    calc(var(--ex-x) * 0.2) calc(var(--ex-y) * 0.2) 0 var(--accent),
    calc(var(--ex-x) * 0.4) calc(var(--ex-y) * 0.4) 0 var(--accent),
    calc(var(--ex-x) * 0.6) calc(var(--ex-y) * 0.6) 0 var(--accent),
    calc(var(--ex-x) * 0.8) calc(var(--ex-y) * 0.8) 0 var(--accent),
    var(--ex-x) var(--ex-y) 0 var(--accent-2);
  transition: text-shadow var(--dur-slow) var(--ease);
}

.extrude--hover:hover {
  --ex-x: 0.1em;
  --ex-y: 0.1em;
}

/* ---------- Hero word cascade ---------- */
.word {
  display: inline-block;
  /* Extra right padding: negative tracking otherwise clips the last glyph */
  padding-right: 0.06em;
  margin-right: -0.06em;
}

html.motion .hero__title .word,
html.motion .hero__name,
html.motion .hero__lede,
html.motion .hero__actions {
  opacity: 0;
  transform: translate3d(0, 0.5em, -60px) rotateX(-32deg);
  transform-origin: 50% 100%;
  animation: word-in 900ms var(--ease-spring) forwards;
  animation-delay: calc(var(--i, 0) * 55ms + 120ms);
}

@keyframes word-in {
  to { opacity: 1; transform: translate3d(0, 0, 0) rotateX(0deg); }
}

/* ---------- Hero deck: floating project plates in 3D space ---------- */
.deck {
  position: relative;
  aspect-ratio: 1 / 1;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 8deg)) rotateY(var(--ry, -14deg));
  transition: transform 600ms var(--ease);
}

.deck__plate {
  position: absolute;
  inset: auto;
  left: var(--x, 0%);
  top: var(--y, 0%);
  width: var(--w, 62%);
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -20px rgb(11 10 16 / 0.35);
  transform: translate3d(0, 0, calc(var(--z, 0px) * var(--zscale, 1)));
  transform-style: preserve-3d;
  animation: float-plate var(--float, 9s) var(--ease) infinite alternate;
  animation-delay: calc(var(--i, 0) * -1.7s);
}

.deck__plate img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.deck__plate--label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 650;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  border: none;
  box-shadow: 0 18px 40px -14px rgb(217 0 110 / 0.6);
}

@keyframes float-plate {
  from { transform: translate3d(0, -0.9%, calc(var(--z, 0px) * var(--zscale, 1))) rotateZ(var(--rz, 0deg)); }
  to   { transform: translate3d(0, 1.4%, calc(var(--z, 0px) * var(--zscale, 1) + 26px * var(--zscale, 1))) rotateZ(calc(var(--rz, 0deg) * -1)); }
}

.deck__glow {
  position: absolute;
  inset: 12% 8% 18%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 68%);
  filter: blur(46px);
  transform: translateZ(-160px);
  opacity: 0.75;
  pointer-events: none;
}

/* ---------- Pointer tilt cards ---------- */
.tilt {
  perspective: 900px;
  perspective-origin: var(--px, 50%) var(--py, 50%);
}

.tilt__inner {
  transform: rotateX(var(--trx, 0deg)) rotateY(var(--try, 0deg));
  transform-style: preserve-3d;
  transition: transform 500ms var(--ease);
  will-change: transform;
}

/* Depth is applied to the inner media only, never to the link box itself:
   translateZ on a hovered anchor under perspective breaks hit-testing. */
.tilt__layer { transform: translateZ(var(--layer-z, 0px)); transform-style: preserve-3d; }


/* ---------- Flip cards (services) ---------- */
.flip { perspective: 1200px; }
.flip__inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 700ms var(--ease-spring);
  min-height: 100%;
}
.flip:hover .flip__inner,
.flip:focus-within .flip__inner,
.flip[data-flipped="true"] .flip__inner { transform: rotateY(180deg); }

.flip__face {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flip__face--back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.flip__face--back .card__text { color: color-mix(in srgb, var(--paper) 78%, transparent); }
.flip__face--back .card__index { color: var(--accent); }

/* ---------- Scroll reveal (depth) ---------- */
html.motion .reveal {
  opacity: 0;
  transform: translate3d(0, 26px, -50px) rotateX(-8deg);
  transform-origin: 50% 0%;
  transition:
    opacity 700ms var(--ease),
    transform 900ms var(--ease-spring);
  transition-delay: var(--delay, 0ms);
}

/* Resting state must stay last in source order so it wins the cascade. */
html.motion .reveal.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotateX(0deg);
}

/* ---------- Scroll-driven depth (progressive) ---------- */
@supports (animation-timeline: view()) {
  html.motion .depth-scroll {
    animation: depth-pass linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 62%;
  }
  @keyframes depth-pass {
    from { transform: perspective(1200px) translate3d(0, 34px, -120px) rotateX(6deg); opacity: 0.35; }
    to   { transform: perspective(1200px) translate3d(0, 0, 0) rotateX(0deg); opacity: 1; }
  }

  @media (min-width: 900px) {
    html.motion .parallax-slow {
      animation: parallax-slow linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
  @keyframes parallax-slow {
    from { translate: 0 5%; }
    to   { translate: 0 -5%; }
  }
}

/* ---------- Rotating cube (about / stats accent) ---------- */
.cube-wrap { --half: 60px; perspective: 900px; width: calc(var(--half) * 2); height: calc(var(--half) * 2); }
.cube {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(var(--cx, -22deg)) rotateY(var(--cy, 0deg));
  animation: cube-spin 16s linear infinite;
}
.cube-wrap[data-touched="true"] .cube { animation: none; }
.cube__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 2px solid var(--ink);
  background: var(--surface);
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--ink);
}
.cube__face:nth-child(1) { transform: translateZ(var(--half)); }
.cube__face:nth-child(2) { transform: rotateY(90deg) translateZ(var(--half)); background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.cube__face:nth-child(3) { transform: rotateY(180deg) translateZ(var(--half)); }
.cube__face:nth-child(4) { transform: rotateY(-90deg) translateZ(var(--half)); background: var(--accent-2); color: var(--accent-2-ink); border-color: var(--accent-2); }
.cube__face:nth-child(5) { transform: rotateX(90deg) translateZ(var(--half)); }
.cube__face:nth-child(6) { transform: rotateX(-90deg) translateZ(var(--half)); }

@keyframes cube-spin {
  from { transform: rotateX(-22deg) rotateY(0deg); }
  to   { transform: rotateX(-22deg) rotateY(360deg); }
}

/* ---------- Image reveal mask ---------- */
html.motion .img-reveal { overflow: hidden; }
html.motion .img-reveal img {
  scale: 1.12;
  opacity: 0;
  transition: scale 1200ms var(--ease), opacity 800ms var(--ease);
}
html.motion .img-reveal.is-in img { scale: 1; opacity: 1; }

/* ---------- Page transition veil ---------- */
.veil {
  position: fixed;
  inset: 0;
  z-index: 150;
  background:
    radial-gradient(120% 90% at 25% 15%, #ff5fb0 0%, transparent 60%),
    linear-gradient(155deg, #e5107c 0%, #b2007c 52%, #24078e 100%);
  transform-origin: 50% 100%;
  scale: 1 0;
  pointer-events: none;
}
html.leaving .veil {
  scale: 1 1;
  transform-origin: 50% 0%;
  transition: scale 360ms var(--ease);
}

/* ---------- Scroll progress ---------- */
.progress {
  position: fixed;
  left: 0; top: 0;
  height: 3px;
  width: 100%;
  transform-origin: 0 50%;
  scale: var(--p, 0) 1;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  z-index: calc(var(--z-nav) + 1);
  pointer-events: none;
}

/* ---------- Mobile: flatten the heavy 3D, keep the character ---------- */
@media (max-width: 700px) {
  .deck { --rx: 3deg; --ry: -5deg; --zscale: 0.24; --wscale: 0.84; aspect-ratio: 1 / 1.02; }
  .deck__plate { box-shadow: 0 18px 34px -16px rgb(11 10 16 / 0.4); }
  .deck__glow { filter: blur(34px); }
  .extrude { --ex-x: 0.035em; --ex-y: 0.035em; }
  html.motion .reveal { transform: translate3d(0, 18px, 0); }
  .tilt__inner { transform: none !important; }
  .cube-wrap { --half: 44px; }
  .cube__face { font-size: 1.4rem; }
}

/* Coarse pointers never get pointer tilt. */
@media (hover: none) {
  .tilt__inner { transform: none !important; }
  .flip:hover .flip__inner { transform: none; }
  .flip[data-flipped="true"] .flip__inner { transform: rotateY(180deg); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html.motion .reveal,
  html.motion .hero__title .word,
  html.motion .hero__name,
  html.motion .hero__lede,
  html.motion .hero__actions {
    opacity: 1 !important;
    transform: none !important;
  }
  html.motion .img-reveal img { opacity: 1 !important; scale: 1 !important; }
  .deck { transform: none; }
  .deck__plate { animation: none; }
  .cube { animation: none; transform: rotateX(-18deg) rotateY(-28deg); }
  .marquee__track { animation: none; transform: none !important; }
  .marquee__band { transform: none !important; }
  .veil { display: none; }
}

/* ---------- Page transition veil: same mark as the intro ---------- */
.veil {
  display: grid;
  place-items: center;
}
.veil__mark {
  width: clamp(72px, 14vw, 120px);
  opacity: 0;
  transform: translate3d(0, 18px, -120px) scale(0.86);
}
html.leaving .veil__mark {
  animation: veil-mark 420ms var(--ease-spring) 90ms forwards;
}
@keyframes veil-mark {
  to { opacity: 1; transform: none; }
}

/* ==========================================================================
   Deck preview: one plate grows, the rest line up, X sends them home
   ========================================================================== */
.deck__plate {
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    left 720ms var(--ease-spring),
    top 720ms var(--ease-spring),
    width 720ms var(--ease-spring),
    transform 720ms var(--ease-spring),
    box-shadow 320ms var(--ease),
    outline-color 200ms var(--ease);
  outline: 2px solid transparent;
  outline-offset: 3px;
}
.deck__plate:focus-visible { outline-color: var(--accent); }

/* The deck stays in flow so the hero never collapses: only the paint order changes.
   Plate coordinates are rewritten in JS from viewport space into deck space.
   perspective and will-change both make an element a containing block for fixed
   children, so both have to go while the preview is up, otherwise the scrim and
   the controls anchor to the hero cell instead of the viewport. */
html.deck-open .deck-scene,
html.deck-closing .deck-scene { perspective: none; }
html.deck-open .deck,
html.deck-closing .deck { will-change: auto; }
.deck[data-open="true"],
.deck[data-closing="true"] {
  z-index: 120;
  overflow: visible;
  transform: none;
  transform-style: flat;
  --wscale: 1;
}
html.deck-open .hero,
html.deck-closing .hero { overflow: visible; }

.deck__scrim {
  position: fixed;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  background: color-mix(in srgb, var(--paper) 93%, transparent);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  transition: opacity 420ms var(--ease), visibility 420ms var(--ease);
}
.deck[data-open="true"] .deck__scrim {
  opacity: 1;
  visibility: visible;
  transition-duration: 190ms;
}

.deck[data-open="true"] .deck__plate,
.deck[data-closing="true"] .deck__plate { animation: none; }
.deck[data-open="true"] .deck__glow { opacity: 0; }
.deck[data-open="true"] .deck__plate[aria-current="true"] {
  box-shadow: 0 40px 90px -30px rgb(11 10 16 / 0.45);
  border-color: var(--accent);
}
.deck[data-open="true"] .deck__plate:not([aria-current="true"]) { opacity: 0.62; }
.deck[data-open="true"] .deck__plate:not([aria-current="true"]):hover { opacity: 1; }

.deck__stage {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms var(--ease), visibility 220ms var(--ease);
}
.deck[data-open="true"] .deck__stage {
  opacity: 1;
  visibility: visible;
  transition-delay: 210ms;
}
.deck__stage > * { pointer-events: auto; }

.deck__close {
  position: absolute;
  top: clamp(0.9rem, 2.5vw, 1.6rem);
  right: clamp(0.9rem, 2.5vw, 1.6rem);
  width: 48px;
  height: 48px;
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  z-index: 3;
}
.deck__close:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.deck__close svg { width: 20px; height: 20px; }

.deck__slides {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  width: min(46rem, 92%);
  text-align: center;
  display: grid;
}
.deck__slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 14px, 0);
  transition: opacity 380ms var(--ease), transform 480ms var(--ease), visibility 380ms;
}
.deck__slide[data-active="true"] { opacity: 1; visibility: visible; transform: none; }
.deck__slide .work-card__tags { justify-content: center; margin-bottom: 0.7rem; }
.deck__slide-title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  letter-spacing: -0.025em;
  margin-bottom: 0.5rem;
}
.deck__slide-text {
  color: var(--ink-soft);
  font-size: 0.98rem;
  max-width: 42rem;
  margin-inline: auto;
}
.deck__slide-cta { margin-top: 1.1rem; }

.deck__controls {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  bottom: clamp(0.6rem, 2vw, 1.1rem);
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.deck__controls .icon-btn { background: var(--surface); }
.deck__counter {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  min-width: 5.5rem;
  text-align: center;
}

@media (max-width: 700px) {
  .deck__slide-text { display: none; }
  .deck__slide-title { font-size: var(--step-1); }
}

@media (prefers-reduced-motion: reduce) {
  .deck__plate { transition: none; }
}