/* ==========================================================================
   Benjamin Tirmant — Portfolio
   Feuille de style unique pour toutes les pages.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --bg: #f2f1ed;
  --bg-soft: #e8e7e2;
  --ink: #0e0e0e;
  --muted: #74736e;
  --line: rgba(14, 14, 14, .14);
  --dark: #0e0e0e;
  --dark-ink: #f2f1ed;
  --dark-muted: #8d8c87;
  --dark-line: rgba(242, 241, 237, .16);
  --live: #2fbf71;

  --font: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --gutter: clamp(16px, 2.2vw, 36px);
  --gap: clamp(10px, 1.1vw, 18px);
  --section: clamp(96px, 14vw, 220px);
  --header-h: 64px;

  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-base: 1rem;
  --fs-md: clamp(1.125rem, 1rem + .45vw, 1.375rem);
  --fs-lg: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  --fs-xl: clamp(2.25rem, 1.2rem + 4vw, 5.5rem);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.5;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, video, iframe, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { list-style: none; padding: 0; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  padding: 10px 14px; background: var(--ink); color: var(--bg);
  transform: translateY(-150%); transition: transform .2s;
}
.skip-link:focus { transform: none; }

/* ---------- Utilitaires ---------- */
.wrap { padding-inline: var(--gutter); }
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
}
.label {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.4;
}
.muted { color: var(--muted); }
.dark .muted { color: var(--dark-muted); }

.dot {
  display: inline-block;
  width: .5em; height: .5em;
  margin-right: .55em;
  border-radius: 50%;
  background: var(--live);
  vertical-align: .08em;
  box-shadow: 0 0 0 0 rgba(47, 191, 113, .5);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(47, 191, 113, .5); }
  70% { box-shadow: 0 0 0 .7em rgba(47, 191, 113, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 191, 113, 0); }
}

/* Lien avec soulignement animé */
.u-link {
  position: relative;
  display: inline-block;
}
.u-link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -.1em;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease);
}
.u-link:hover::after, .u-link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.arrow {
  display: inline-block;
  width: .8em; height: .8em;
  transition: transform .5s var(--ease);
}
a:hover .arrow--ne, button:hover .arrow--ne { transform: translate(.12em, -.12em); }
a:hover .arrow--e { transform: translateX(.25em); }

/* Section header : (01) Titre ............ meta */
.section-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: baseline;
  padding-block: 14px;
  border-top: 1px solid var(--line);
}
.dark .section-head { border-color: var(--dark-line); }
.section-head__index { grid-column: 1 / span 2; }
.section-head__title { grid-column: 3 / span 6; }
.section-head__meta { grid-column: 9 / -1; text-align: right; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: center;
  padding-inline: var(--gutter);
  color: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }
.site-header__logo {
  grid-column: 1 / span 3;
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.site-header__role { grid-column: 4 / span 4; }
.site-header__right {
  grid-column: 8 / -1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: clamp(18px, 2.4vw, 40px);
  font-size: .9375rem;
}
.site-header__nav {
  display: flex;
  gap: clamp(18px, 2.4vw, 40px);
}
.menu-toggle {
  display: none;
  font-size: .9375rem;
  padding: 8px 0;
}

/* Sélecteur de langue EN / FR */
.lang {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: .02em;
}
.lang a { opacity: .45; transition: opacity .3s; padding: 6px 0; }
.lang a:hover, .lang a[aria-current="true"] { opacity: 1; }
.lang span { opacity: .45; }

/* Menu mobile plein écran */
.mobile-menu {
  position: fixed; inset: 0; z-index: 99;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--header-h) + 24px) var(--gutter) 28px;
  background: var(--dark); color: var(--dark-ink);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .7s var(--ease-in-out);
  visibility: hidden;
}
.mobile-menu__links { display: flex; flex-direction: column; gap: 4px; }
.mobile-menu__links a {
  font-size: clamp(3rem, 15vw, 5rem);
  font-weight: 500; letter-spacing: -.05em; line-height: 1;
}
.mobile-menu__links .label { vertical-align: top; margin-left: 6px; }
.mobile-menu__foot { display: flex; justify-content: space-between; gap: 16px; }
.menu-open .mobile-menu { clip-path: inset(0 0 0 0); visibility: visible; }
.menu-open { overflow: hidden; }

/* ---------- Hero (accueil) ---------- */
.hero {
  padding-top: clamp(120px, 22vh, 240px);
}
.hero__meta { row-gap: 20px; align-items: end; }
.hero__intro { grid-column: 1 / span 4; font-size: var(--fs-md); line-height: 1.35; letter-spacing: -.01em; max-width: 26ch; }
.hero__status { grid-column: 7 / span 3; }
.hero__clock { grid-column: 10 / -1; text-align: right; }
.clock { font-variant-numeric: tabular-nums; }

.hero__name {
  margin-top: clamp(24px, 4vw, 56px);
  /* le nom occupe exactement la largeur utile */
  font-size: calc((100vw - 2 * var(--gutter)) * .1452);
  font-weight: 600;
  letter-spacing: -.065em;
  line-height: .8;
  white-space: nowrap;
  margin-left: -.04em;
}
.hero__name .char {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 1.1s var(--ease);
}
.hero__name .line { display: block; overflow: hidden; padding-bottom: .05em; }
.is-loaded .hero__name .char { transform: none; }
.no-js .hero__name .char { transform: none; }

.hero__media {
  position: relative;
  margin-top: clamp(16px, 2vw, 28px);
  aspect-ratio: 1884 / 600;
  overflow: hidden;
  background: var(--bg-soft);
}
.hero__media img {
  width: 100%; height: 120%;
  object-fit: cover;
  will-change: transform;
}

/* ---------- Grille de projets ---------- */
.work { padding-top: var(--section); }
.work__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: clamp(40px, 6vw, 96px);
  margin-top: clamp(24px, 3vw, 40px);
}
.card { display: block; position: relative; }
.card--full { grid-column: 1 / -1; }
.card--7 { grid-column: span 7; }
.card--5 { grid-column: span 5; }
.card--6 { grid-column: span 6; }
.card--offset { margin-top: clamp(0px, 12vw, 200px); }

.card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--bg-soft);
}
.card--full .card__media { aspect-ratio: 21 / 9; }
.card__media img, .card__media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease), opacity .6s var(--ease);
}
.card__media video { opacity: 0; }
.card.is-playing .card__media video { opacity: 1; }
.card:hover .card__media img, .card:hover .card__media video { transform: scale(1.035); }

.card__caption {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 4px 16px;
  align-items: baseline;
  padding-top: 12px;
}
.card__title {
  font-size: var(--fs-md);
  font-weight: 500;
  letter-spacing: -.02em;
}
.card__tags { text-align: right; }
.card__index { color: var(--muted); }

.work__more {
  display: flex; justify-content: center;
  margin-top: clamp(56px, 7vw, 120px);
}

/* Bouton pilule */
.pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: .9375rem;
  transition: background-color .4s var(--ease), color .4s var(--ease);
}
.pill:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.dark .pill:hover { background: var(--dark-ink); color: var(--dark); border-color: var(--dark-ink); }

/* ---------- Statement ---------- */
.statement { padding-block: var(--section); }
.statement__text {
  grid-column: 3 / span 9;
  font-size: var(--fs-xl);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: .98;
  text-wrap: balance;
}
.statement__text .w { transition: opacity .25s linear; }
.statement__label { grid-column: 1 / span 2; padding-top: .9em; }

/* ---------- Showreel ---------- */
.dark { background: var(--dark); color: var(--dark-ink); }
.dark ::selection { background: var(--dark-ink); color: var(--dark); }
.showreel { padding-block: clamp(20px, 2vw, 28px) var(--section); }
.showreel__intro { padding-block: clamp(40px, 6vw, 96px); align-items: end; row-gap: 24px; }
.showreel__title {
  grid-column: 1 / span 7;
  font-size: var(--fs-xl); font-weight: 500; letter-spacing: -.05em; line-height: .9;
}
.showreel__desc { grid-column: 9 / -1; color: var(--dark-muted); max-width: 44ch; }
.showreel__player {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  cursor: pointer;
}
.showreel__player video { width: 100%; height: 100%; object-fit: cover; }
.showreel__play {
  position: absolute; left: 50%; top: 50%;
  display: grid; place-items: center;
  width: clamp(96px, 10vw, 150px); aspect-ratio: 1;
  border-radius: 50%;
  background: var(--dark-ink); color: var(--dark);
  font-size: .9375rem; font-weight: 500;
  transform: translate(-50%, -50%);
  transition: transform .6s var(--ease), opacity .4s;
}
.showreel__player:hover .showreel__play { transform: translate(-50%, -50%) scale(1.08); }
.showreel__player.is-active { cursor: auto; }
.showreel__player.is-active .showreel__play { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.6); }

/* ---------- About ---------- */
.about { padding-top: var(--section); }
.about__intro { padding-block: clamp(40px, 6vw, 96px) clamp(56px, 8vw, 140px); row-gap: 28px; }
.about__lead {
  grid-column: 3 / span 8;
  font-size: var(--fs-lg);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.08;
  text-wrap: balance;
}
.about__body { grid-column: 7 / span 5; display: grid; gap: 1em; color: var(--muted); max-width: 52ch; }
.about__portrait { grid-column: 3 / span 3; grid-row: 2; align-self: start; }

.services { border-top: 1px solid var(--line); }
.service {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: baseline;
  padding-block: clamp(16px, 1.8vw, 26px);
  border-bottom: 1px solid var(--line);
  transition: padding .5s var(--ease), background-color .4s;
}
.service__index { grid-column: 1 / span 2; }
.service__name {
  grid-column: 3 / span 4;
  font-size: var(--fs-lg);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.05;
}
.service__desc { grid-column: 8 / -1; color: var(--muted); max-width: 42ch; }
@media (hover: hover) {
  .service:hover { padding-inline: 12px; background: var(--bg-soft); }
}

.facts { padding-block: clamp(56px, 8vw, 140px) 0; row-gap: 40px; }
.fact { grid-column: span 4; border-top: 1px solid var(--line); padding-top: 14px; }
.fact ul { margin-top: 18px; display: grid; gap: 2px; }
.fact li { font-size: var(--fs-lg); font-weight: 500; letter-spacing: -.035em; line-height: 1.1; }

/* ---------- FAQ ---------- */
.faq { padding-top: clamp(56px, 8vw, 140px); row-gap: 20px; }
.faq__title { grid-column: 1 / span 2; padding-top: 22px; }
.faq__list { grid-column: 3 / -1; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding-block: 18px;
  font-size: var(--fs-md); font-weight: 500; letter-spacing: -.02em;
  cursor: pointer; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; font-family: var(--mono); font-weight: 400; color: var(--muted);
  transition: transform .4s var(--ease);
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { padding-bottom: 22px; max-width: 62ch; color: var(--muted); }
@media (max-width: 760px) {
  .faq__title, .faq__list { grid-column: 1 / -1; }
}

/* ---------- Contact / Footer ---------- */
.contact { padding-top: var(--section); margin-top: var(--section); }
.contact__cta {
  display: block;
  padding-block: clamp(40px, 6vw, 80px) clamp(56px, 8vw, 120px);
}
.contact__big {
  display: flex; align-items: center; justify-content: space-between; gap: .2em;
  font-size: clamp(3rem, 1rem + 9.4vw, 11.5rem);
  font-weight: 500;
  letter-spacing: -.065em;
  line-height: .86;
}
.contact__big .arrow { width: .62em; height: .62em; flex: none; }
.contact__big span { transition: transform .8s var(--ease); display: inline-block; }
.contact__cta:hover .contact__big span { transform: translateX(.08em); }

.footer-grid { row-gap: 36px; padding-block: 28px; border-top: 1px solid var(--dark-line); }
.footer-col { grid-column: span 3; display: grid; gap: 4px; align-content: start; }
.footer-col .label { margin-bottom: 10px; }
.footer-col a { justify-self: start; }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-block: 20px 28px;
  border-top: 1px solid var(--dark-line);
}

/* ---------- Page Index (work.html) ---------- */
.page-head { padding-top: clamp(120px, 20vh, 220px); }
.page-title {
  font-size: clamp(4rem, 1rem + 15vw, 17rem);
  font-weight: 600;
  letter-spacing: -.07em;
  line-height: .8;
  margin-left: -.05em;
}
.page-title sup {
  font-family: var(--mono); font-size: .09em; font-weight: 400; letter-spacing: 0;
  vertical-align: top; margin-left: .3em; position: relative; top: .6em;
}
.filters {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding-block: clamp(28px, 4vw, 56px) 20px;
}
.filter {
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px;
  font-size: .875rem; transition: background-color .3s, color .3s, border-color .3s;
}
.filter:hover { border-color: var(--ink); }
.filter[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.index-list { border-top: 1px solid var(--line); }
.index-row { border-bottom: 1px solid var(--line); }
.index-row[hidden] { display: none; }
.index-row a {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: center;
  padding-block: clamp(14px, 1.6vw, 22px);
  transition: color .3s, padding .5s var(--ease);
}
.index-row__num { grid-column: 1 / span 1; }
.index-row__thumb { display: none; }
.index-row__title {
  grid-column: 2 / span 5;
  font-size: var(--fs-lg);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1;
}
.index-row__tags { grid-column: 7 / span 4; }
.index-row__year { grid-column: 11 / span 1; }
.index-row__arrow { grid-column: 12 / -1; justify-self: end; }
.index-list:hover .index-row a { color: var(--muted); }
.index-list .index-row a:hover { color: var(--ink); }
@media (hover: hover) {
  .index-row a:hover { padding-left: 10px; }
}

/* Aperçu flottant qui suit le curseur */
.cursor-preview {
  position: fixed; left: 0; top: 0; z-index: 50;
  width: clamp(240px, 22vw, 380px); aspect-ratio: 4 / 3;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(.85);
  transition: opacity .35s var(--ease), scale .35s var(--ease);
  background: var(--bg-soft);
}
.cursor-preview.is-visible { opacity: 1; }
.cursor-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Page projet ---------- */
.project-hero { padding-top: clamp(120px, 20vh, 220px); }
.project-hero__crumb { display: flex; gap: 12px; margin-bottom: clamp(16px, 2vw, 28px); }
.project-hero__title {
  font-size: clamp(3.5rem, 1rem + 12vw, 15rem);
  font-weight: 600;
  letter-spacing: -.07em;
  line-height: .82;
  margin-left: -.05em;
}
.project-info { padding-block: clamp(40px, 6vw, 96px); row-gap: 40px; }
.project-info__meta { grid-column: 1 / span 4; display: grid; gap: 0; align-content: start; }
.project-info__meta div {
  display: grid; grid-template-columns: 7rem 1fr; gap: 12px;
  padding-block: 10px; border-top: 1px solid var(--line);
}
.project-info__meta div:last-child { border-bottom: 1px solid var(--line); }
.project-info__meta dd { font-size: .9375rem; }
.project-info__text { grid-column: 6 / -1; display: grid; gap: 1.1em; max-width: 60ch; }
.project-info__lead {
  font-size: var(--fs-lg); font-weight: 500; letter-spacing: -.035em; line-height: 1.1;
  max-width: 24ch; margin-bottom: .3em;
}
.project-info__text p:not(.project-info__lead) { color: var(--muted); }

.project-cover { aspect-ratio: 1884 / 500; overflow: hidden; background: var(--bg-soft); }
.project-cover img, .project-cover video { width: 100%; height: 100%; object-fit: cover; }

.gallery { display: grid; gap: var(--gap); padding-top: var(--gap); }
.gallery__row { display: grid; gap: var(--gap); }
.gallery__row--two { grid-template-columns: 1fr 1fr; }
.gallery__row--center { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.gallery__row--center > * { grid-column: 4 / span 6; }
.media { position: relative; overflow: hidden; background: var(--bg-soft); }
.media img, .media video { width: 100%; height: 100%; object-fit: cover; }
.media--wide { aspect-ratio: 1900 / 1060; }
.media--tall { aspect-ratio: 1000 / 850; }
.media--square { aspect-ratio: 1 / 1; }
.media--16x9 { aspect-ratio: 16 / 9; }

/* YouTube « lite » : l'iframe n'est chargée qu'au clic */
.yt {
  position: relative; display: block; width: 100%;
  aspect-ratio: 16 / 9; background: #000; overflow: hidden; cursor: pointer;
}
.yt img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .4s, transform 1.2s var(--ease); }
.yt:hover img { opacity: 1; transform: scale(1.02); }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt .showreel__play { background: var(--dark-ink); }

/* Projet suivant */
.next-project { display: block; margin-top: var(--section); padding-block: 20px clamp(40px, 5vw, 72px); }
.next-project__row { align-items: end; row-gap: 24px; padding-top: clamp(32px, 5vw, 72px); }
.next-project__title {
  grid-column: 1 / span 8;
  font-size: clamp(3rem, 1rem + 9vw, 11rem);
  font-weight: 600; letter-spacing: -.07em; line-height: .82;
  transition: transform .8s var(--ease);
}
.next-project:hover .next-project__title { transform: translateX(.06em); }
.next-project__media { grid-column: 9 / -1; aspect-ratio: 4 / 3; overflow: hidden; }
.next-project__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.next-project:hover .next-project__media img { transform: scale(1.05); }

/* ---------- 404 ---------- */
.not-found { min-height: 100svh; display: grid; align-content: center; gap: 28px; padding-block: 120px; }

/* ---------- Curseur personnalisé ---------- */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 150;
  display: grid; place-items: center;
  width: 60px; height: 60px; margin: -30px 0 0 -30px;
  border-radius: 50%;
  background: var(--ink); color: var(--bg);
  font-size: .75rem; font-weight: 500; letter-spacing: -.01em;
  pointer-events: none;
  transform: translate3d(-200px, -200px, 0) scale(0);
  transition: scale .45s var(--ease);
}
.cursor.is-visible { scale: 1; }
/* La bulle remplace la flèche de la souris là où elle apparaît */
.has-cursor [data-cursor], .has-cursor [data-cursor] * { cursor: none; }
.has-cursor .showreel__player.is-active, .has-cursor .showreel__player.is-active * { cursor: auto; }

/* ---------- Animations d'apparition ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease), transform 1.2s var(--ease);
  transition-delay: var(--d, 0s);
}
.js [data-reveal="clip"] {
  opacity: 1; transform: none;
  clip-path: inset(12% 0 0 0);
  transition: clip-path 1.4s var(--ease);
}
.js [data-reveal="clip"] > img, .js [data-reveal="clip"] > video { scale: 1.12; transition: scale 1.6s var(--ease), transform 1.2s var(--ease), opacity .6s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
.js [data-reveal].is-in > img, .js [data-reveal].is-in > video { scale: 1; }

/* Transition entre pages */
.page-fade {
  position: fixed; inset: 0; z-index: 180;
  background: var(--bg);
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s var(--ease-in-out);
}
.is-leaving .page-fade { opacity: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .site-header__role { display: none; }
  .hero__intro { grid-column: 1 / span 6; }
  .hero__status { grid-column: 7 / span 6; text-align: right; }
  .hero__clock { display: none; }
  .statement__label { grid-column: 1 / -1; padding: 0 0 20px; }
  .statement__text { grid-column: 1 / -1; }
  .about__lead { grid-column: 1 / -1; }
  .about__body { grid-column: 4 / -1; }
  .showreel__title { grid-column: 1 / -1; }
  .showreel__desc { grid-column: 1 / -1; }
  .footer-col { grid-column: span 6; }
  .next-project__title { grid-column: 1 / -1; }
  .next-project__media { grid-column: 1 / span 6; grid-row: 1; }
}

@media (max-width: 760px) {
  :root { --header-h: 56px; }
  .site-header__nav { display: none; }
  .site-header__right { grid-column: 6 / -1; gap: 20px; }
  .menu-toggle { display: block; }
  .section-head__index { grid-column: 1 / span 3; }
  .section-head__title { grid-column: 4 / span 6; }
  .section-head__meta { grid-column: 10 / -1; }

  .hero { padding-top: 120px; }
  .hero__intro, .hero__status { grid-column: 1 / -1; text-align: left; }
  .hero__media { aspect-ratio: 4 / 3; }
  .hero__media img { height: 115%; }

  .card--7, .card--5, .card--6 { grid-column: 1 / -1; }
  .card--offset { margin-top: 0; }
  .card--full .card__media { aspect-ratio: 4 / 3; }
  .card__caption { grid-template-columns: auto 1fr; }
  .card__tags { grid-column: 1 / -1; grid-row: 2; text-align: left; }

  .about__body { grid-column: 1 / -1; }
  .service__index { grid-column: 1 / span 2; }
  .service__name { grid-column: 3 / -1; }
  .service__desc { grid-column: 3 / -1; margin-top: 6px; }
  .fact { grid-column: 1 / -1; }
  .footer-col { grid-column: span 6; }

  .index-row a { row-gap: 6px; }
  .index-row__num { display: none; }
  .index-row__thumb { display: block; grid-column: 1 / span 4; grid-row: 1 / span 2; aspect-ratio: 4 / 3; overflow: hidden; }
  .index-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
  .index-row__title { grid-column: 5 / -1; }
  .index-row__tags { grid-column: 5 / span 6; }
  .index-row__year { grid-column: 11 / -1; justify-self: end; }
  .index-row__arrow { display: none; }

  .project-info__meta, .project-info__text { grid-column: 1 / -1; }
  .project-info__text { grid-row: 1; }
  .project-cover { aspect-ratio: 4 / 3; }
  .gallery__row--two { grid-template-columns: 1fr; }
  .gallery__row--center > * { grid-column: 1 / -1; }
  .next-project__media { grid-column: 1 / -1; }
}

@media (hover: none), (pointer: coarse) {
  .cursor, .cursor-preview { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal], .js [data-reveal="clip"] { opacity: 1; transform: none; clip-path: none; }
  .hero__name .char { transform: none; }
}