/* =========================================================
   BASE
========================================================= */
html { scroll-behavior: auto; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: clamp(15px, 0.95vw, 17px);
  font-weight: 400;
  letter-spacing: -0.005em;
  overflow-x: hidden;
}

/* Brand gradient ambient glow on the page background */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(255, 94, 31, 0.18), transparent 55%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(200, 58, 10, 0.12), transparent 60%);
}

@media (hover: hover) and (pointer: fine) {
  body { cursor: none; }
  body a, body button, body [data-cursor] { cursor: none; }
}

main { position: relative; z-index: 2; }

strong { font-weight: 700; color: var(--fg); }

.t-white  { color: var(--fg); }
.t-grey   { color: var(--fg-grey); }
.t-accent { color: var(--accent); }

/* shared "dot" mini indicator */
.dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
  display: inline-block;
  flex-shrink: 0;
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 94, 31, 0.7), 0 0 12px var(--accent-glow); }
  70%  { box-shadow: 0 0 0 10px rgba(255, 94, 31, 0), 0 0 12px var(--accent-glow); }
  100% { box-shadow: 0 0 0 0 rgba(255, 94, 31, 0), 0 0 12px var(--accent-glow); }
}

/* =========================================================
   BACKGROUND LAYERS
========================================================= */
.particles {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  width: 100%; height: 100%;
}

.grid-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 200, 160, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 200, 160, 0.03) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

.noise {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.9'/></svg>");
}

.blob {
  position: fixed;
  top: 0; left: 0;
  width: 55vmax;
  height: 55vmax;
  border-radius: 50%;
  pointer-events: none;
  /* Sit above the nav (z:100) and hero text (z:2) so the glow is always
     visible. mix-blend-mode keeps content readable — it only brightens. */
  z-index: 150;
  mix-blend-mode: screen;
  background: radial-gradient(circle at center,
    rgba(255, 94, 31, 0.38) 0%,
    rgba(255, 138, 61, 0.18) 30%,
    rgba(255, 94, 31, 0.04) 55%,
    transparent 70%);
  filter: blur(55px);
  transform: translate(-50%, -50%);
  will-change: transform;
  opacity: 1;
}

/* =========================================================
   CURSOR
========================================================= */
.cursor {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .cursor { display: block; }
}

.cursor__dot {
  position: absolute;
  top: 0; left: 0;
  width: 6px; height: 6px;
  background: var(--fg);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
}

.cursor__ring {
  position: absolute;
  top: 0; left: 0;
  width: 36px; height: 36px;
  border: 1px solid var(--fg);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform, width, height;
  transition: width 0.35s var(--ease-out),
              height 0.35s var(--ease-out),
              background 0.35s var(--ease-out),
              border-color 0.35s var(--ease-out);
}

.cursor.is-hover .cursor__ring {
  width: 64px; height: 64px;
  background: var(--fg);
  border-color: var(--fg);
}

.cursor.is-view .cursor__ring {
  width: 100px; height: 100px;
  background: var(--accent);
  border-color: var(--accent);
  mix-blend-mode: normal;
  box-shadow: 0 0 40px var(--accent-glow);
}
.cursor.is-view { mix-blend-mode: normal; }
.cursor.is-view .cursor__dot { opacity: 0; }

.cursor__label {
  position: absolute;
  top: 0; left: 0;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--bg);
  opacity: 0;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity 0.25s ease;
}
.cursor.is-view .cursor__label { opacity: 1; }

/* =========================================================
   NAV
========================================================= */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1.25rem var(--container);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
}

.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.nav.is-scrolled::before { opacity: 1; }

.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--fg);
}

.nav__logo-mark {
  display: inline-grid;
  place-items: center;
  width: 32px; height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.nav__logo:hover .nav__logo-mark {
  border-color: var(--accent);
  box-shadow: 0 0 16px var(--accent-glow);
  color: var(--accent);
}

.nav__links {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--fg-grey);
}

.nav__links a {
  position: relative;
  padding: 0.5rem 0;
  display: inline-block;
}

/* Nav text — orange always, with a subtle lift + glow on hover so it
   keeps a sense of motion without the duplicated flip animation. */
.nav__logo-text,
.nav__links a > span,
.nav__cta > span {
  color: var(--accent);
  display: inline-block;
  white-space: nowrap; /* keep multi-word labels on a single line */
  line-height: 1;
  transition:
    transform 0.4s cubic-bezier(0.7, 0, 0.2, 1),
    text-shadow 0.4s ease,
    letter-spacing 0.4s ease;
  will-change: transform;
}

.nav__logo:hover .nav__logo-text,
.nav__links a:hover > span,
.nav__cta:hover > span {
  transform: translateY(-2px);
  text-shadow: 0 0 22px var(--accent-glow);
  letter-spacing: 0.005em;
}

.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1rem 0.6rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--bg-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--fg);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.nav__cta:hover {
  border-color: var(--accent);
  box-shadow: 0 0 24px var(--accent-glow);
  background: rgba(255, 94, 31, 0.08);
}

@media (max-width: 720px) {
  /* Drop the 3-col grid for mobile — with .nav__links display:none
     and only 2 visible items, plain flex with space-between gives
     reliable "logo left, CTA right" without grid-track surprises
     stretching the pill to the full available column width. */
  .nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
  }
  .nav__links { display: none; }
  .nav__logo-text { display: none; }
  .nav__cta {
    padding: 0.45rem 0.85rem 0.45rem 0.7rem;
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    width: max-content;
  }
  .nav__cta > span { white-space: nowrap; }
}

/* =========================================================
   HERO  (Luigi Franco — LIGHT / BLACK contrast, ref CV cover)
========================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 9rem var(--container) 4rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
}

.hero__badges {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 3.5rem;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1.1rem 0.55rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--bg-glass);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Downloadable CV pill — same shell, but interactive: glass shell glows on
   hover and the arrow nudges downward to telegraph "click to download". */
.hero__badge--cv {
  text-decoration: none;
  cursor: none;
  transition: border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
}
.hero__badge--cv:hover {
  border-color: var(--accent);
  background: rgba(255, 94, 31, 0.08);
  box-shadow: 0 0 22px var(--accent-glow);
}

.hero__badge-arrow {
  color: var(--accent);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  margin-left: 0.15rem;
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.7, 0, 0.2, 1);
}
.hero__badge--cv:hover .hero__badge-arrow {
  transform: translateY(3px);
}

/* Big two-line wordmark — LIGHT / BLACK weight contrast straight from the CV */
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(3.8rem, 14vw, 14rem);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0;
  display: inline-block;
  max-width: none;
}

/* Inline-block wrapper so the wordmark centers as a tight block inside .hero */
.hero__title-stack {
  display: inline-block;
}

.hero__title .line {
  display: block;
  overflow: hidden;
  padding-block: 0.06em;
}
.hero__title .word {
  display: inline-block;
  will-change: transform;
}
.hero__title .word--light {
  font-weight: 200;
  color: var(--fg);
  letter-spacing: 0.08em;
}
.hero__title .word--black {
  font-weight: 900;
  color: var(--fg);
  letter-spacing: -0.015em;
}

.hero__role {
  margin-top: 2.2rem;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.7vw, 28px);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.hero__role-sep { color: var(--accent); }

.hero__tagline {
  margin-top: 1.4rem;
  max-width: 100%;
  font-family: var(--font-display);
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-muted);
  text-align: left;
  line-height: 1.9; /* breathing space between the two rows */
}

/* Forces the 3 + 2 split: first three items in row one, last two in row two. */
.hero__tagline-row {
  display: block;
}

.hero__tagline-item {
  display: inline-block;
  white-space: nowrap; /* keep each specialty on a single line */
}
.hero__tagline-item:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
  margin: 0 1.1em;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.hero__visual {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.hero__canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Portrait — scroll-driven fade-in (handled by hero-portrait.js).
   Opacity lives on the container (not just the <picture>) so the dark
   fade overlays (::before / ::after) fade in WITH the photo. Otherwise
   at scrollY=0 those solid gradients render on top of the hero's
   warm radial bg and create a visible dark rectangle in the top-right. */
.hero__portrait {
  position: absolute;
  right: max(var(--container), 1rem);
  bottom: 0;
  width: clamp(340px, 42vw, 600px);
  height: clamp(460px, 85vh, 820px);
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  will-change: opacity;
}
.hero__portrait picture {
  display: block;
  width: 100%;
  height: 100%;
  filter: brightness(1.08) contrast(1.05);
}
.hero__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}
/* Top + bottom gradient overlays blend the cut-out edges into the page bg */
.hero__portrait::before,
.hero__portrait::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 2;
}
.hero__portrait::before {
  top: 0;
  height: 18%;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(10, 6, 4, 0) 100%);
}
.hero__portrait::after {
  bottom: 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(10, 6, 4, 0) 0%, var(--bg) 80%, var(--bg) 100%);
}

/* Lift hero text content above the portrait */
.hero > .hero__badges,
.hero > .hero__title,
.hero > .hero__role,
.hero > .hero__tagline {
  position: relative;
  z-index: 2;
}

/* Medium screens (laptop): anchor portrait to top-right so the face
   sits above the huge title instead of being covered by it */
@media (min-width: 901px) and (max-width: 1400px) {
  .hero__portrait {
    top: 6rem;
    bottom: auto;
    width: clamp(280px, 34vw, 440px);
    height: clamp(420px, 72vh, 600px);
  }
  .hero__portrait img {
    object-position: top center;
  }
  .hero__portrait::before {
    height: 10%;
  }
  /* On laptops the photo is top-anchored so its natural bottom edge falls
     inside the container — push the fade up so it always covers the cut. */
  .hero__portrait::after {
    height: 60%;
    background: linear-gradient(180deg, rgba(10, 6, 4, 0) 0%, var(--bg) 55%, var(--bg) 100%);
  }
}

/* Mobile: centered hero, portrait shown as a soft backdrop behind
   the text instead of as a sidecar like on desktop. Same scroll-fade
   logic applies (the JS targets .hero__portrait). */
@media (max-width: 900px) {
  .hero {
    align-items: center;
    text-align: center;
  }
  .hero__badges,
  .hero__role { justify-content: center; }
  .hero__tagline { text-align: center; }
  .hero__title { margin: 0 auto; }
  /* Portrait on mobile = larger bottom-anchored accent. We give the
     container a generous size, then use object-position > 100% to
     push the cut-out down inside it. The container already has
     overflow:hidden, so any extra falls cleanly off the bottom and
     the face stays well below the centred title/role. */
  .hero__portrait {
    display: block;
    position: absolute;
    inset: auto 0 0 0;
    margin: 0 auto;
    width: min(72vw, 290px);
    height: clamp(400px, 60vh, 500px);
    z-index: 0;
  }
  /* 165% pushes the image roughly halfway off the container's bottom,
     which lowers the visible head into the bottom half of the hero. */
  .hero__portrait img { object-position: center 165%; }
  /* Soft top fade so the cut-out head melts into the page bg even
     if the user scrolls and the photo gets revealed. */
  .hero__portrait::before {
    height: 32%;
    background: linear-gradient(180deg, var(--bg) 0%, rgba(10, 6, 4, 0.5) 60%, rgba(10, 6, 4, 0) 100%);
  }
  /* Hero text floats above the portrait on the same column */
  .hero > .hero__badges,
  .hero > .hero__title,
  .hero > .hero__role { position: relative; z-index: 2; }
}

/* =========================================================
   MARQUEE
========================================================= */
.marquee {
  border-block: 1px solid var(--line);
  padding: 1.75rem 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--fg-grey);
  background: rgba(10, 6, 4, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* Soft fade on both edges so words dissolve in / out instead of clipping.
     The right side has a longer ramp than the left for a more pronounced
     "fade-into-the-void" feel on the exit edge of the loop. */
  --marquee-fade-left: 14%;
  --marquee-fade-right: 28%;
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 var(--marquee-fade-left),
    #000 calc(100% - var(--marquee-fade-right)),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 var(--marquee-fade-left),
    #000 calc(100% - var(--marquee-fade-right)),
    transparent 100%
  );
}
.marquee__track {
  display: inline-flex;
  align-items: center;
  gap: 2rem;
  animation: marquee 40s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { cursor: none; transition: color 0.3s ease; }
.marquee__track .marquee__item:nth-child(4n+1) { color: var(--fg); }

.dot-sep {
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--accent-glow);
  display: inline-block;
  flex-shrink: 0;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* =========================================================
   SECTION HEAD
========================================================= */
.section-head {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 4rem;
}
.section-head__index {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--fg-grey);
}
.section-head__title {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(2.5rem, 6.5vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  /* Shrink the headline to the exact width of its text so the gradient
     stops align to the glyphs (otherwise on short titles like "Su di me."
     the orange end would fall into empty space on the right). The small
     padding-right prevents the final period from being clipped by the
     negative letter-spacing. */
  width: fit-content;
  max-width: 100%;
  padding-right: 0.12em;
  /* Soft monochrome gradient (warm grey → off-white) — less aggressive than
     the orange version so the headline doesn't compete with the brand colour
     already present everywhere on the page. */
  background-image: linear-gradient(100deg,
    var(--fg-grey) 0%,
    var(--fg-grey) 12%,
    var(--fg) 70%,
    var(--fg) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
/* Let the gradient flow through legacy white/grey spans inside the title */
.section-head__title .t-white,
.section-head__title .t-grey {
  color: inherit;
  -webkit-text-fill-color: inherit;
}

/* =========================================================
   WORKS
========================================================= */
.works {
  padding: var(--section-gap) var(--container);
  position: relative;
}

.works__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}

.work {
  border-bottom: 1px solid var(--line);
  position: relative;
}

.work__link {
  display: grid;
  grid-template-columns: 60px 1fr 1fr auto;
  gap: 2rem;
  align-items: center;
  padding: 2rem 0;
  position: relative;
  transition: padding 0.6s var(--ease), color 0.5s var(--ease);
}

.work__link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 94, 31, 0.12), rgba(255, 138, 61, 0.02));
  border-left: 2px solid var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s var(--ease-out);
  z-index: -1;
}
.work:hover .work__link::before {
  transform: scaleX(1);
}
.work:hover .work__link {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.work:hover .work__arrow { transform: translateX(0) rotate(-45deg); opacity: 1; color: var(--accent); }

/* Work meta — orange always, with the same nav-style hover (lift + glow). */
.work__num,
.work__title,
.work__tags {
  color: var(--accent);
  display: inline-block;
  will-change: transform;
  transition:
    transform 0.4s cubic-bezier(0.7, 0, 0.2, 1),
    text-shadow 0.4s ease,
    letter-spacing 0.4s ease;
}

.work__num {
  font-family: var(--font-mono);
  font-size: 12px;
}

.work__title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(1.75rem, 4vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--fg); /* company / project names stay white for hierarchy */
}

.work__tags {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* Hover: lift + glow scaled to each element's typographic size. */
.work:hover .work__num,
.work__link:hover .work__num {
  transform: translateY(-2px);
  text-shadow: 0 0 18px var(--accent-glow);
}
.work:hover .work__title,
.work__link:hover .work__title {
  transform: translateY(-4px);
  text-shadow: 0 0 36px var(--accent-glow);
}
.work:hover .work__tags,
.work__link:hover .work__tags {
  transform: translateY(-2px);
  text-shadow: 0 0 18px var(--accent-glow);
  letter-spacing: 0.135em;
}

.work__arrow {
  font-size: 1.4rem;
  display: inline-block;
  transform: translateX(-16px) rotate(0deg);
  opacity: 0;
  color: var(--fg-grey);
  transition: transform 0.5s var(--ease-out), opacity 0.4s ease, color 0.4s ease;
}

.work__media {
  position: fixed;
  top: 0; left: 0;
  width: clamp(220px, 22vw, 360px);
  aspect-ratio: 4 / 5;
  pointer-events: none;
  z-index: 90;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  overflow: hidden;
  border-radius: 8px;
  will-change: transform, opacity;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 60px var(--accent-soft);
}
.work:hover .work__media { opacity: 1; }

.work__image {
  width: 100%; height: 100%;
  background: radial-gradient(circle at 50% 50%, var(--c1, #ff5e1f), var(--c2, #0a0604) 75%);
  transform: scale(1.1);
  transition: transform 0.6s var(--ease-out);
  will-change: transform;
}
.work__image--photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.work:hover .work__image--photo { transform: scale(1.04); }

@media (max-width: 720px) {
  .work__link {
    grid-template-columns: 30px 1fr auto;
    gap: 1rem;
    padding: 1.5rem 0;
  }
  .work__tags { display: none; }
  .work__media { display: none; }
}

/* =========================================================
   GLASS SURFACE (reusable card style, ref CV translucent panels)
========================================================= */
.glass {
  background: var(--bg-glass);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    0 1px 0 rgba(255, 200, 160, 0.04) inset,
    0 20px 60px rgba(0, 0, 0, 0.35);
}

/* =========================================================
   STATS — Impact numbers (cards from the CV "Impact Numbers" block)
========================================================= */
.stats {
  padding: var(--section-gap) var(--container);
  position: relative;
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.stat-card {
  position: relative;
  padding: 2.2rem 1.75rem;
  border-radius: var(--radius-card);
  background: var(--bg-glass);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  overflow: hidden;
  transition: border-color 0.4s var(--ease), transform 0.5s var(--ease-out), box-shadow 0.4s ease;
}
.stat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-brand-soft);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.stat-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(255, 94, 31, 0.18);
}
.stat-card:hover::before { opacity: 1; }

.stat-card__value {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 4.6vw, 4.2rem);
  line-height: 1;
  letter-spacing: -0.03em;
  background: var(--gradient-brand);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.6rem;
}
/* The liquid effect splits the value into transformed inline-block children,
   which break the parent's background-clip:text. Each letter carries its own
   gradient so the number stays visible (and gradient) at rest and while
   rippling. */
.stat-card__value.has-goo {
  background: none; /* children render their own gradient now */
}
.stat-card__value.has-goo .goo-letter {
  background: var(--gradient-brand);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.stat-card__label {
  display: block;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  text-transform: uppercase;
}

@media (max-width: 900px) { .stats__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .stats__grid { grid-template-columns: 1fr; } }

/* =========================================================
   ABOUT — Creative journey timeline (CV "Creative Journey" panel)
========================================================= */
.about {
  padding: var(--section-gap) var(--container);
  position: relative;
}

.about__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 5rem;
  align-items: start;
}

.about__intro p {
  font-size: 1.05rem;
  color: var(--fg-grey);
  margin-bottom: 1.5rem;
  max-width: 56ch;
}

.about__lead {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.1vw, 2rem) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.015em;
  margin-bottom: 2rem !important;
}
.about__lead .t-grey { color: var(--fg-grey); }

.about__cta-line {
  margin-top: 2.5rem !important;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent) !important;
  text-shadow: 0 0 24px var(--accent-glow);
}

.about__side {
  display: grid;
  gap: 1rem;
}

.about__block {
  padding: 1.5rem 1.5rem 1.4rem;
  border-radius: var(--radius-card);
  background: var(--bg-glass);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: border-color 0.4s ease, background 0.4s ease;
}
.about__block:hover { border-color: var(--accent); }

.about__block h4 {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin-bottom: 0.35rem;
}
.about__block h4 .dot { width: 7px; height: 7px; }

.about__role {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 0.6rem !important;
}
.about__desc {
  font-size: 0.92rem !important;
  color: var(--fg-muted) !important;
  margin-bottom: 0 !important;
  line-height: 1.5;
}

.about__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
  margin-top: 0.3rem;
}
.about__meta > div {
  padding: 1.1rem 1.2rem;
  border-radius: var(--radius-card);
  background: var(--bg-glass);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.about__meta h5 {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--fg-grey);
  margin-bottom: 0.4rem;
}
.about__meta p {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.45;
  margin: 0;
}

@media (max-width: 900px) {
  .about__grid { grid-template-columns: 1fr; gap: 3rem; }
  .about__meta { grid-template-columns: 1fr; }
}

/* =========================================================
   TOOLS & AI — pill grid (CV "Tools & AI" panel)
========================================================= */
.tools {
  padding: var(--section-gap) var(--container);
  position: relative;
}

.tools__grid {
  display: grid;
  grid-template-columns: 1.1fr 2fr 0.9fr;
  gap: 1.25rem;
}

.tools__card {
  padding: 1.75rem 1.6rem;
  border-radius: var(--radius-card);
  background: var(--bg-glass);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: border-color 0.4s ease, transform 0.4s var(--ease-out);
}
.tools__card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
}
.tools__card h4 {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin-bottom: 1.25rem;
}
.tools__card h4 .dot { width: 7px; height: 7px; }

.tools__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.tools__pills li {
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 138, 61, 0.05);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--fg);
  transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}
.tools__pills li:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(255, 94, 31, 0.12);
}
/* Invisible row-break used to force the next pill onto a new line */
.tools__pills .tools__pills-break {
  flex-basis: 100%;
  height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
}
.tools__pills .tools__pills-break:hover {
  border: 0;
  background: transparent;
}

@media (max-width: 900px) {
  .tools__grid { grid-template-columns: 1fr; }
}

/* =========================================================
   BRANDS IN MOTION
========================================================= */
.brands-motion {
  padding: var(--section-gap) var(--container);
  position: relative;
}

.brands-motion__lead {
  max-width: 720px;
  margin: 2rem 0 4rem;
  color: var(--fg-grey);
  font-size: 1.02rem;
  line-height: 1.7;
}

.brands-motion__grid {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 4rem;
}
.brands-motion__grid--landscape { grid-template-columns: 1fr 1fr; }
.brands-motion__grid--landscape > .brands-motion__item { aspect-ratio: 16 / 9; }

.brands-motion__grid--vertical { grid-template-columns: 1fr 1fr; }
.brands-motion__grid--vertical > .brands-motion__item { aspect-ratio: 4 / 5; }

.brands-motion__grid--triple { grid-template-columns: repeat(3, 1fr); }
.brands-motion__grid--triple > .brands-motion__item { aspect-ratio: 4 / 5; }

/* Solo item centered, ~ same width as a 2-col tile */
.brands-motion__item--solo {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc(50% - 0.75rem);
}

.brands-motion__item {
  position: relative;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0a0604;
  transition: transform 0.4s var(--ease-out), border-color 0.3s ease;
}
.brands-motion__item:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
}
.brands-motion__item video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.brands-motion__item--contain video {
  object-fit: contain;
  background: #0a0604;
}
.brands-motion__item figcaption {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(10, 6, 4, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.brands-motion__triptych {
  margin-top: 1rem;
}
.brands-motion__triptych-head {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  margin-bottom: 1.5rem;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--fg-grey);
}
.brands-motion__triptych-head .dot { background: var(--accent); }
.brands-motion__triptych-head span { color: var(--fg); }

@media (max-width: 760px) {
  .brands-motion__grid--landscape,
  .brands-motion__grid--vertical { grid-template-columns: 1fr; }
  .brands-motion__grid--triple { grid-template-columns: 1fr; }
  .brands-motion__item--solo {
    grid-column: auto;
    width: 100%;
  }
}

/* =========================================================
   CONTACT
========================================================= */
.contact {
  padding: var(--section-gap) var(--container) 4rem;
  text-align: center;
  position: relative;
}

.contact__visual {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.contact__canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.contact .section-head__index {
  margin: 0 auto 2rem;
}

.contact__title {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(3rem, 9vw, 8.5rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin-bottom: 3rem;
}
.contact__title .line { display: block; overflow: hidden; }
.contact__title .word { display: inline-block; will-change: transform; }

.contact__mail {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.5vw, 2.75rem);
  letter-spacing: -0.03em;
  color: var(--accent);
  text-shadow: 0 0 40px var(--accent-glow);
  position: relative;
  padding-bottom: 0.35rem;
  margin-bottom: 1.5rem;
}
.contact__mail::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: right center;
  transition: transform 0.6s var(--ease-out);
}
.contact__mail:hover::after {
  transform: scaleX(0);
  transform-origin: left center;
}

/* Lift + glow on hover — applied to the inner span so it doesn't fight
   the magnetic transform on the anchor itself. */
.contact__mail > span {
  display: inline-block;
  will-change: transform;
  transition:
    transform 0.45s cubic-bezier(0.7, 0, 0.2, 1),
    text-shadow 0.45s ease;
}
.contact__mail:hover > span {
  transform: translateY(-3px);
  text-shadow: 0 0 60px var(--accent-glow);
}

.contact__sub {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--fg-grey);
  margin-bottom: 3.5rem;
}

.contact__info {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  max-width: 900px;
  margin: 0 auto 3rem;
}
.contact__info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 1.2rem 1.5rem;
  border-radius: var(--radius-card);
  background: var(--bg-glass);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.contact__info-item:hover {
  border-color: var(--accent);
  background: rgba(255, 94, 31, 0.08);
  box-shadow: 0 0 24px var(--accent-glow);
}
.contact__info-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--fg-grey);
}
.contact__info-value {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent);
  display: inline-block;
  will-change: transform;
  transition:
    transform 0.4s cubic-bezier(0.7, 0, 0.2, 1),
    text-shadow 0.4s ease,
    letter-spacing 0.4s ease;
}
.contact__info-item:hover .contact__info-value {
  transform: translateY(-2px);
  text-shadow: 0 0 18px var(--accent-glow);
  letter-spacing: 0.01em;
}

@media (max-width: 760px) {
  .contact__info { grid-template-columns: 1fr; }
}

/* =========================================================
   FOOTER
========================================================= */
.footer {
  border-top: 1px solid var(--line);
  padding: 2rem var(--container);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-grey);
}
.footer__row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 1rem;
}
.footer__center { text-align: center; }
.footer a:last-child {
  text-align: right;
  display: inline-block;
  justify-self: end;
  transition: color 0.3s ease;
}
.footer a:last-child:hover { color: var(--accent); }

@media (max-width: 720px) {
  .footer__row { grid-template-columns: 1fr; text-align: center; }
  .footer__center, .footer a:last-child { text-align: center; justify-self: center; }
}

/* =========================================================
   BUTTONS
========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.btn--ghost {
  border: 1px solid var(--line-strong);
  background: var(--bg-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--fg);
}
.btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(255, 94, 31, 0.08);
  box-shadow: 0 0 24px var(--accent-glow);
}
.btn--ghost svg { transition: transform 0.4s var(--ease); }
.btn--ghost:hover svg { transform: translateX(-3px); }

/* =========================================================
   CASE STUDY
========================================================= */
.case {
  padding: 8rem var(--container) 4rem;
  position: relative;
}

.case__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--fg-grey);
}
.case__meta .dot { width: 6px; height: 6px; }
.case__meta .sep { color: var(--fg-dim); }

.case__title {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(3rem, 10vw, 9rem);
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin-bottom: 3rem;
  max-width: 16ch;
}
.case__title--long {
  font-size: clamp(2.25rem, 7vw, 6.5rem);
  max-width: none;
  letter-spacing: -0.05em;
}

.case__hero {
  margin: 3rem 0;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: radial-gradient(circle at 30% 40%, rgba(255, 94, 31, 0.3), rgba(10, 6, 4, 0.9) 70%);
  position: relative;
  border: 1px solid var(--line-strong);
}
.case__hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.7;
  mix-blend-mode: screen;
}

.case__info {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  padding: 2.5rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 5rem;
}
.case__info-cell h5 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--fg-grey);
  margin-bottom: 0.6rem;
}
.case__info-cell p {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  color: var(--fg);
}

.case__body {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: 6rem;
  margin-bottom: 6rem;
}
.case__body h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
}
.case__body p {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  color: var(--fg-grey);
  margin-bottom: 1.25rem;
  max-width: 56ch;
}
.case__body p:first-of-type {
  font-size: clamp(1.4rem, 2.1vw, 1.85rem);
  color: var(--fg);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin-bottom: 2rem;
}

.case__gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 6rem;
}
.case__gallery > * {
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: radial-gradient(circle at 50% 50%, var(--c1, #ff5e1f), var(--c2, #0a0604) 75%);
  position: relative;
}
.case__gallery--triple { grid-template-columns: repeat(3, 1fr); }
.case__gallery--triple > * { aspect-ratio: 1 / 1; }
.case__gallery--triple > .wide { grid-column: span 3; }
.case__gallery--portrait > * { aspect-ratio: 4 / 5; }
.case__gallery--story > * { aspect-ratio: 9 / 16; }
.case__gallery > .tall { aspect-ratio: 3 / 4; grid-row: span 2; }
.case__gallery > .wide { grid-column: span 2; aspect-ratio: 16 / 8; }
.case__gallery > .solo { grid-column: 1 / -1; aspect-ratio: auto; }
.case__gallery > .solo img { object-fit: contain; }
/* Narrower variant of .solo for renders/mockups that would otherwise
   take too much vertical real estate when shown at full content width. */
.case__gallery > .solo--sm {
  justify-self: center;
  width: 100%;
  max-width: 760px;
}
.case__gallery > .fit { aspect-ratio: 4 / 5; }
.case__gallery > .fit img { object-fit: contain; padding: 0.5rem; }
/* Featured: pagina/spread evidenziato, centrato orizzontalmente, larghezza
   ridotta rispetto al full-width per dare presenza visiva senza dominare. */
.case__gallery > .feature {
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
  max-width: 820px;
  aspect-ratio: auto;
}
.case__gallery > .feature img { object-fit: contain; padding: 0.5rem; }
.case__gallery > .col-center {
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
  max-width: 380px;
}

/* Gallery items that contain real images (figure > img) */
.case__gallery figure {
  margin: 0;
  background: #0a0604;
  cursor: zoom-in;
}
.case__gallery figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s var(--ease-out);
}
.case__gallery figure:hover img { transform: scale(1.035); }
.case__gallery figure video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}
.case__gallery figure:has(video) { cursor: default; }
.case__gallery figcaption {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(10, 6, 4, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

/* Hero override: when the hero contains a real image, no overlay blend */
.case__hero--image {
  aspect-ratio: 16 / 10;
  background: #0a0604;
}
.case__hero--image img {
  opacity: 1;
  mix-blend-mode: normal;
  object-fit: cover;
}

/* Banner-shaped hero (panoramic key visual) — the image is hidden behind a
   mask. Hovering creates a soft "flashlight" spotlight around the cursor
   that uncovers only the area it's over; scrolling progressively reveals
   the whole image. Both contributions are composited (mask-composite: add).
   Driven by scripts/case-cover.js via --mx, --my, --spotlight, --reveal. */
.case__hero--banner {
  aspect-ratio: 4 / 1;
  background:
    radial-gradient(ellipse 70% 90% at 50% 50%, rgba(255, 138, 61, 0.04), transparent 75%),
    var(--bg);
  border: 0;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  --mx: 50%;
  --my: 50%;
  --spotlight: 0;
  --reveal: 0;
}
.case__hero--banner img {
  object-fit: cover;
  opacity: 1;
  -webkit-mask-image:
    radial-gradient(circle 240px at var(--mx) var(--my),
      rgba(0, 0, 0, var(--spotlight)) 0%,
      rgba(0, 0, 0, calc(var(--spotlight) * 0.55)) 45%,
      rgba(0, 0, 0, 0) 100%),
    linear-gradient(rgba(0, 0, 0, var(--reveal)), rgba(0, 0, 0, var(--reveal)));
          mask-image:
    radial-gradient(circle 240px at var(--mx) var(--my),
      rgba(0, 0, 0, var(--spotlight)) 0%,
      rgba(0, 0, 0, calc(var(--spotlight) * 0.55)) 45%,
      rgba(0, 0, 0, 0) 100%),
    linear-gradient(rgba(0, 0, 0, var(--reveal)), rgba(0, 0, 0, var(--reveal)));
  will-change: mask-image, -webkit-mask-image;
}

/* Feature hero: 3 portrait visuals side by side as a showcase wall */
.case__hero--feature {
  aspect-ratio: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.case__hero--feature figure {
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  overflow: hidden;
  border: 0;
  cursor: zoom-in;
  background:
    radial-gradient(ellipse 80% 80% at 50% 50%, rgba(255, 138, 61, 0.04), transparent 75%),
    var(--bg);
  position: relative;
  --mx: 50%;
  --my: 50%;
  --spotlight: 0;
  --reveal: 0;
}
.case__hero--feature figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  mix-blend-mode: normal;
  transition: transform 1.2s var(--ease-out);
  -webkit-mask-image:
    radial-gradient(circle 180px at var(--mx) var(--my),
      rgba(0, 0, 0, var(--spotlight)) 0%,
      rgba(0, 0, 0, calc(var(--spotlight) * 0.55)) 45%,
      rgba(0, 0, 0, 0) 100%),
    linear-gradient(rgba(0, 0, 0, var(--reveal)), rgba(0, 0, 0, var(--reveal)));
          mask-image:
    radial-gradient(circle 180px at var(--mx) var(--my),
      rgba(0, 0, 0, var(--spotlight)) 0%,
      rgba(0, 0, 0, calc(var(--spotlight) * 0.55)) 45%,
      rgba(0, 0, 0, 0) 100%),
    linear-gradient(rgba(0, 0, 0, var(--reveal)), rgba(0, 0, 0, var(--reveal)));
  will-change: mask-image, -webkit-mask-image;
}
.case__hero--feature figure:hover img { transform: scale(1.035); }
/* Two-image variant of the feature hero — same spotlight + lightbox
   behaviour. Capped at a narrower max-width and centred so paired
   portrait visuals don't dominate the page like a hero would. */
.case__hero--duo {
  grid-template-columns: repeat(2, 1fr);
  max-width: 720px;
  margin-inline: auto;
}
@media (max-width: 760px) {
  .case__hero--feature { grid-template-columns: 1fr; }
  .case__hero--duo {
    grid-template-columns: 1fr;
    max-width: 420px;
  }
}

/* Art-piece hero: single artwork shown at natural ratio, centered on a warm spotlight */
.case__hero--art {
  aspect-ratio: auto;
  background:
    radial-gradient(ellipse 60% 70% at 50% 45%, rgba(255, 176, 116, 0.18), transparent 65%),
    radial-gradient(ellipse at 50% 100%, rgba(255, 94, 31, 0.08), transparent 60%),
    #0a0604;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 2.5rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.case__hero--art img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  opacity: 1;
  mix-blend-mode: normal;
  border-radius: 6px;
  box-shadow:
    0 30px 80px -20px rgba(0, 0, 0, 0.6),
    0 12px 30px -10px rgba(0, 0, 0, 0.5);
}
@media (max-width: 760px) {
  .case__hero--art { padding: 1.25rem 0.75rem; }
  .case__hero--art img { max-height: 70vh; }
}

/* Section heading inside the case (used between galleries) */
.case__section-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin: 0 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.case__section-title .dot { width: 6px; height: 6px; }

/* =========================================================
   LIGHTBOX (case study image viewer)
========================================================= */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(10, 6, 4, 0.92);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  cursor: zoom-out;
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }

.lightbox__stage {
  margin: 0;
  max-width: min(94vw, 1800px);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  transform: scale(0.96);
  transition: transform 0.35s var(--ease-out);
  cursor: default;
}
.lightbox.is-open .lightbox__stage { transform: scale(1); }

.lightbox__img {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05);
  display: block;
}

.lightbox__caption {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(10, 6, 4, 0.55);
  color: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.lightbox__close:hover,
.lightbox__nav:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #0a0604;
  transform: scale(1.05);
}
.lightbox__close { top: 1.25rem; right: 1.25rem; }
.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  display: none;
}
.lightbox.has-nav .lightbox__nav { display: flex; }
.lightbox.has-nav .lightbox__nav:hover { transform: translateY(-50%) scale(1.05); }
.lightbox__nav--prev { left: 1.25rem; }
.lightbox__nav--next { right: 1.25rem; }

@media (max-width: 720px) {
  .lightbox__close { top: 0.75rem; right: 0.75rem; }
  .lightbox__nav--prev { left: 0.5rem; }
  .lightbox__nav--next { right: 0.5rem; }
  .lightbox__img { max-height: 72vh; }
}

/* Video grid for embedded YouTube/Vimeo motion graphics */
.case__videos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 6rem;
}
.case__videos figure {
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #000;
  position: relative;
}
.case__videos .case__video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}
.case__videos iframe,
.case__videos video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.case__videos > .full { grid-column: 1 / -1; }
.case__videos figcaption {
  padding: 0.9rem 1.1rem;
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--fg-grey);
  border-top: 1px solid var(--line);
}
@media (max-width: 760px) {
  .case__videos { grid-template-columns: 1fr; }
}

.case__next {
  border-top: 1px solid var(--line);
  padding-top: 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
}
.case__next-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--fg-grey);
}
.case__next-link {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 4rem);
  letter-spacing: -0.035em;
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  transition: color 0.4s ease;
}
.case__next-link:hover { color: var(--accent); }
.case__next-link .arrow {
  display: inline-block;
  transition: transform 0.5s var(--ease-out);
}
.case__next-link:hover .arrow { transform: translateX(12px); }

@media (max-width: 900px) {
  .case__info { grid-template-columns: 1fr 1fr; }
  .case__body { grid-template-columns: 1fr; gap: 2rem; }
  .case__gallery { grid-template-columns: 1fr; }
  .case__gallery--triple { grid-template-columns: 1fr 1fr; }
  .case__gallery > .tall, .case__gallery > .wide { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  .case__gallery--triple { grid-template-columns: 1fr; }
}

/* =========================================================
   PAGE TRANSITION
========================================================= */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(100%);
  will-change: transform;
}

.page-transition::before,
.page-transition::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 20px var(--accent-glow);
  opacity: 0;
}
.page-transition::before { top: 0; }
.page-transition::after { bottom: 0; }

.page-transition__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fg);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s var(--ease-out);
}
.page-transition__brand .mark {
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--accent);
  box-shadow: 0 0 18px var(--accent-glow);
}

.page-transition.is-covering {
  pointer-events: auto;
  transform: translateY(0);
  transition: transform 0.7s cubic-bezier(0.85, 0, 0.15, 1);
}
.page-transition.is-covering::before,
.page-transition.is-covering::after { opacity: 1; transition: opacity 0.4s ease 0.25s; }
.page-transition.is-covering .page-transition__brand {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}

.page-transition.is-covered {
  transform: translateY(0);
  pointer-events: auto;
}
.page-transition.is-covered::before,
.page-transition.is-covered::after { opacity: 1; }
.page-transition.is-covered .page-transition__brand { opacity: 1; transform: translateY(0); }

.page-transition.is-revealing {
  transform: translateY(0);
  animation: pageReveal 0.9s cubic-bezier(0.85, 0, 0.15, 1) forwards;
}
.page-transition.is-revealing::before,
.page-transition.is-revealing::after { opacity: 0; transition: opacity 0.25s ease; }
.page-transition.is-revealing .page-transition__brand {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

@keyframes pageReveal {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}

/* =========================================================
   SCRAMBLE TEXT
========================================================= */
[data-scramble] {
  display: inline-block;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}
[data-scramble].is-scrambling {
  color: var(--accent) !important;
  text-shadow: 0 0 32px var(--accent-glow), 0 0 4px var(--accent);
}

/* =========================================================
   FLIP TEXT (hover scroll-up text effect)
========================================================= */
.flip {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: 1.15;
  position: relative;
}

.flip__inner {
  display: block;
  transition: transform 0.55s cubic-bezier(0.7, 0, 0.2, 1);
  will-change: transform;
}

.flip__line {
  display: block;
  line-height: 1.15;
}

.flip:hover .flip__inner,
a:hover .flip .flip__inner,
button:hover .flip .flip__inner,
li:hover > .flip .flip__inner {
  transform: translateY(-50%);
}

.flip__line:last-child { color: var(--accent); }

.footer .flip__line:last-child { color: var(--accent); }
.marquee .flip__line:last-child { color: var(--accent); text-shadow: 0 0 24px var(--accent-glow); }
.about__block .flip__line:last-child { color: var(--accent); }

/* =========================================================
   LIQUID TEXT — "finger in water"
   Per-letter physics driven by JS (proximity + damped spring).
   Each letter independently lerps scale / color / blur / glow
   and is spring-displaced away from the cursor like a ripple.
========================================================= */
.has-goo {
  display: inline-block;
  cursor: default;
}

.goo-letter {
  display: inline-block;
  position: relative; /* enables dynamic z-index during splash overlap */
  will-change: transform, filter, color;
  transform-origin: center 65%;
  /* No CSS transition — JS lerps every frame so transitions would fight it. */
}

/* Release the line clipping after the entrance animation so the gooey blob
   isn't cropped at the line box when letters scale up */
.hero__title.is-revealed .line,
.contact__title.is-revealed .line {
  overflow: visible;
}

/* =========================================================
   LANGUAGE TOGGLE — floating bubble (IT / EN swap)
========================================================= */
.lang-toggle {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 200;
  width: 66px;
  height: 66px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.lang-toggle__bubble {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(20, 11, 8, 0.32);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  box-shadow:
    0 24px 60px -16px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  animation: lang-bubble-float 6s ease-in-out infinite;
  transition:
    background 0.45s ease,
    border-color 0.45s ease,
    box-shadow 0.45s ease;
  will-change: transform;
}
/* Pulsing accent glow: lives behind the bubble so it doesn't fight the
   hover box-shadow override. Uses a radial gradient so the falloff is
   organic rather than a flat ring. */
.lang-toggle__bubble::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 138, 61, 0.55) 0%,
    rgba(255, 138, 61, 0.18) 45%,
    rgba(255, 138, 61, 0) 72%
  );
  pointer-events: none;
  z-index: -1;
  animation: lang-bubble-pulse 2.6s ease-in-out infinite;
  will-change: opacity, transform;
}
.lang-toggle:hover .lang-toggle__bubble::before {
  animation-duration: 1.4s;
  background: radial-gradient(
    circle,
    rgba(255, 138, 61, 0.8) 0%,
    rgba(255, 138, 61, 0.3) 50%,
    rgba(255, 138, 61, 0) 75%
  );
}
.lang-toggle:hover .lang-toggle__bubble {
  background: rgba(255, 138, 61, 0.18);
  border-color: rgba(255, 138, 61, 0.32);
  box-shadow:
    0 28px 80px -16px rgba(255, 138, 61, 0.45),
    0 0 0 1px rgba(255, 138, 61, 0.28) inset,
    0 0 48px rgba(255, 138, 61, 0.32);
}
.lang-toggle__face {
  position: relative;
  width: 30px;
  height: 18px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--fg);
}
.lang-toggle__current,
.lang-toggle__target {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.4s var(--ease-out),
    opacity 0.35s ease;
}
.lang-toggle__target {
  transform: translateY(120%);
  opacity: 0;
  color: var(--bg);
  text-shadow: 0 0 12px rgba(255, 138, 61, 0.6);
}
.lang-toggle:hover .lang-toggle__current {
  transform: translateY(-120%);
  opacity: 0;
}
.lang-toggle:hover .lang-toggle__target {
  transform: translateY(0);
  opacity: 1;
  color: var(--fg);
}

@keyframes lang-bubble-float {
  0%, 100% { transform: translateY(0) translateX(0); }
  33%      { transform: translateY(-7px) translateX(2px); }
  66%      { transform: translateY(-3px) translateX(-2px); }
}
@keyframes lang-bubble-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.92); }
  50%      { opacity: 1;    transform: scale(1.18); }
}

@media (max-width: 760px) {
  .lang-toggle { width: 56px; height: 56px; bottom: 1.25rem; right: 1.25rem; }
  .lang-toggle__face { width: 26px; height: 16px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .lang-toggle__bubble,
  .lang-toggle__bubble::before { animation: none; }
}

/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .blob, .cursor, .particles { display: none !important; }
  body { cursor: auto; }
}