/* v3 live layer — real footage and real objects, no drawings.
   Loaded after site.css and globe3d.css. */

/* ---------- hero: the bridge at dusk, filmed ---------- */
.hero__media { background: #0b0f14; }
.hero__frame { position: absolute; inset: 0; width: auto; height: auto; left: 0; top: 0; }
.hero__vid {
  position: absolute; inset: 0; left: 0; top: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 30% 46%;
  opacity: 1; filter: none; transition: none;
  transform-origin: 60% 42%;
  animation: hero-in 2.8s var(--e-out) both, hero-drift 30s ease-in-out 2.8s infinite alternate;
}
@keyframes hero-in {
  from { transform: scale(1.1); }
  to { transform: scale(1.03); }
}
@keyframes hero-drift {
  from { transform: scale(1.03); }
  to { transform: scale(1.1) translate3d(-1.2%, 0.6%, 0); }
}
.hero__scrim {
  background:
    linear-gradient(90deg, rgba(6, 9, 13, 0.78) 0%, rgba(6, 9, 13, 0.55) 30%, rgba(6, 9, 13, 0.12) 54%, rgba(6, 9, 13, 0) 66%),
    linear-gradient(180deg, rgba(6, 9, 13, 0.5) 0%, rgba(6, 9, 13, 0) 22%, rgba(6, 9, 13, 0) 66%, rgba(6, 9, 13, 0.72) 100%);
}
@media (max-aspect-ratio: 4/5) {
  .hero__frame::before { display: none; }
  .hero__vid { object-position: 50% 50%; transform-origin: 50% 60%; }
  .hero__scrim {
    background: linear-gradient(180deg, rgba(6, 9, 13, 0.82) 0%, rgba(6, 9, 13, 0.62) 38%, rgba(6, 9, 13, 0.2) 60%, rgba(6, 9, 13, 0.05) 74%, rgba(6, 9, 13, 0.6) 100%);
  }
}

/* ---------- what we do: four bronze objects ---------- */
.svc-card .svc-ico { display: block; width: clamp(150px, 13vw, 190px); height: clamp(150px, 13vw, 190px); margin: -18px 0 0 -18px; perspective: 700px; }
.svc-ico__obj {
  position: relative; display: block; width: 100%; height: 100%;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--s, 1));
  transition: transform 0.7s var(--e-out);
  animation: ico-float 6.4s ease-in-out infinite;
  animation-delay: calc(var(--k, 0) * -1.6s);
}
.svc-ico__obj img { display: block; width: 100%; height: 100%; object-fit: contain; }
.svc-ico__sheen {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  opacity: 0.55;
}
.svc-ico__sheen::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -45%; width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 246, 225, 0.95) 50%, transparent);
  animation: ico-sheen 5.6s ease-in-out infinite; animation-delay: calc(var(--k, 0) * -1.3s);
}
.svc-card:nth-child(2) { --k: 1; }
.svc-card:nth-child(3) { --k: 2; }
.svc-card:nth-child(4) { --k: 3; }
.svc-card:hover .svc-ico__obj { --s: 1.06; }
@keyframes ico-float {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50% { translate: 0 -8px; rotate: -2.5deg; }
}
@keyframes ico-sheen {
  0%, 30% { transform: translateX(0); }
  70%, 100% { transform: translateX(330%); }
}
@media (max-width: 699px) {
  .svc-card { grid-template-columns: minmax(0, 1fr) 88px; }
  .svc-card .svc-ico { grid-column: 2; grid-row: 1 / span 2; width: 88px; height: 88px; margin: -6px -8px 0 0; }
}

/* ---------- la fondatrice: gold on espresso, like her card ---------- */
.founder.ink { background: #14100c; overflow: clip; padding-block: clamp(5.5rem, 3.8rem + 7.5vw, 11rem) clamp(7rem, 5rem + 8vw, 13rem); }
.founder.ink::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(46% 60% at 28% 44%, rgba(201, 150, 90, 0.2), transparent 70%);
}
.founder__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: center; }
.founder__fig { position: relative; max-width: 500px; margin: 0; padding: 16px; }
.founder__arch {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; isolation: isolate;
  border-radius: 50% 50% 22px 22px / 34% 34% 22px 22px;
  background: #2a2119;
  box-shadow: 0 70px 120px -50px rgba(0, 0, 0, 0.85);
}
.founder__arch picture { position: absolute; inset: 0; animation: breathe 18s ease-in-out infinite alternate; }
.founder__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; scale: var(--push, 1.06); }
@keyframes breathe { from { transform: scale(1); } to { transform: scale(1.06) translate3d(0, -1%, 0); } }
.founder__sheen { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; opacity: 0; }
.founder__sheen::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -50%; width: 50%;
  background: linear-gradient(115deg, transparent, rgba(255, 236, 205, 0.16) 50%, transparent);
}
.founder.is-live .founder__sheen { opacity: 1; }
.founder.is-live .founder__sheen::before { animation: f-sheen 8s ease-in-out infinite; }
@keyframes f-sheen { 0%, 40% { transform: translateX(0); } 85%, 100% { transform: translateX(300%); } }
.founder__line {
  position: absolute; inset: 0; pointer-events: none;
  border: 1px solid rgba(231, 196, 142, 0.42);
  border-radius: 50% 50% 30px 30px / 34% 34% 30px 30px;
}
.founder__text { position: relative; }
.founder__name {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(3.8rem, 1.6rem + 7vw, 9rem); line-height: 0.9; letter-spacing: -0.03em;
  filter: drop-shadow(0 10px 34px rgba(0, 0, 0, 0.5));
}
.founder__nm {
  display: block; padding-bottom: 0.06em;
  background: linear-gradient(100deg, #8d6638 0%, #caa06a 16%, #f4dfb3 32%, #d2a86f 46%, #9a7041 60%, #e6c890 78%, #b48852 100%) 0 50% / 240% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: foil 10s ease-in-out infinite alternate;
}
.founder__nm + .founder__nm { padding-left: 0.42em; animation-delay: -3s; }
@keyframes foil { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.founder__role {
  margin-top: clamp(1.1rem, 2vw, 1.6rem);
  font-family: var(--f-sans); font-size: 0.95rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--champagne);
}
.founder__quote { margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; border: 0; }
.founder__quote::before { content: ""; display: block; width: 64px; height: 1px; margin-bottom: 1.6rem; background: linear-gradient(90deg, var(--champagne), transparent); }
.founder__quote p {
  max-width: 19em; font-family: var(--f-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.55rem, 1rem + 1.6vw, 2.6rem); line-height: 1.22; letter-spacing: -0.01em;
  color: var(--on-dark); text-wrap: balance;
}
.founder__later { margin-top: 1.6rem; font-size: 1.02rem; color: var(--on-dark-2); }
.founder__marquee { position: absolute; left: 0; bottom: clamp(1.5rem, 4vw, 3.5rem); z-index: 0; pointer-events: none; white-space: nowrap; }
.founder__track { display: flex; width: max-content; animation: marquee 70s linear infinite; }
.founder__track span {
  padding-right: 0.5em;
  font-family: var(--f-display); font-style: italic; font-size: clamp(4.5rem, 2rem + 9vw, 12rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(231, 196, 142, 0.17);
}
.founder__track span::after { content: "·"; padding-left: 0.5em; }
@keyframes marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (max-width: 1023px) {
  .founder__grid { grid-template-columns: 1fr; gap: 0; }
  .founder__fig { width: min(86vw, 420px); margin-inline: auto; }
  .founder__text { margin-top: -3.4rem; z-index: 2; padding-inline: 0.2rem; }
  .founder__name { font-size: clamp(3.6rem, 1.2rem + 11vw, 6.4rem); }
}
@media (max-width: 699px) {
  .founder__role { font-size: 0.86rem; letter-spacing: 0.18em; }
  .founder__marquee { bottom: 1.2rem; }
}

/* ---------- footer: the bridge again, at the end of the page ---------- */
.ft__film {
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 21 / 8; margin: clamp(2rem, 4vw, 3.2rem) 0 clamp(3rem, 6vw, 4.5rem);
  border-radius: var(--radius); background: #0b0f14;
  box-shadow: 0 50px 80px -50px rgba(40, 25, 10, 0.6);
}
.ft__film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transform-origin: 60% 45%; animation: hero-drift 34s ease-in-out infinite alternate; }
.ft__film .note { position: absolute; right: 1rem; bottom: 0.8rem; z-index: 1; font-size: 0.78rem; color: rgba(239, 230, 218, 0.86); }
@media (max-width: 699px) { .ft__film { aspect-ratio: 4 / 3; } }

@media (prefers-reduced-motion: reduce) {
  .hero__vid, .ft__film video, .svc-ico__obj, .svc-ico__sheen, .founder__arch picture, .founder__nm, .founder__track, .founder.is-live .founder__sheen { animation: none !important; }
  .hero__vid { opacity: 1; transform: none; }
}
.is-paused .svc-ico__obj, .is-paused .svc-ico__sheen, .is-paused .founder__arch picture, .is-paused .founder__nm, .is-paused .founder__track, .is-paused .founder__sheen, .is-paused .hero__vid, .is-paused .ft__film video { animation-play-state: paused !important; }
@media print { .ft__film, .founder__marquee { display: none !important; } }

/* ---------- contact: the open sea at first light, behind the words ---------- */
.contact.ink { overflow: clip; }
.contact__film { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.contact__film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; opacity: 0.55; transform-origin: 30% 60%; animation: hero-drift 36s ease-in-out infinite alternate; }
.contact__film::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(18, 14, 10, 0.55) 0%, rgba(18, 14, 10, 0.35) 45%, rgba(18, 14, 10, 0.78) 70%),
    linear-gradient(180deg, #120e0a 0%, rgba(18, 14, 10, 0.2) 22%, rgba(18, 14, 10, 0.25) 75%, #120e0a 100%);
}
@media (max-width: 1023px) { .contact__film::after { background: linear-gradient(180deg, #120e0a 0%, rgba(18, 14, 10, 0.45) 18%, rgba(18, 14, 10, 0.6) 40%, rgba(18, 14, 10, 0.92) 62%, #120e0a 100%); } }
.is-paused .contact__film video { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .contact__film video { animation: none !important; } }


/* ---------- scroll performance ----------
   Nothing below changes the look much; it stops paint-heavy effects from
   running while the page scrolls over video. */
.pill, .dock, .hero__meta .clock { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.hero__meta .clock { background: rgba(8, 10, 14, 0.62); }
.g3d-label { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.ink::before { mix-blend-mode: normal; opacity: 0.07; }
.why__light { mix-blend-mode: normal; opacity: 0.32; }
/* effects run only while their section is on screen */
.svc:not(.is-live) .svc-ico__obj, .svc:not(.is-live) .svc-ico__sheen::before,
.founder:not(.is-live) .founder__nm, .founder:not(.is-live) .founder__track, .founder:not(.is-live) .founder__arch picture { animation-play-state: paused; }
.hero.is-flying .hero__vid { visibility: hidden; animation-play-state: paused; }
/* the globe owns the gesture while it is being turned */
.globe__stage, .globe__stage * { touch-action: none !important; }
.globe__stage { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; overscroll-behavior: contain; }

/* ---------- audit fixes 2026-10-08 ---------- */
.hero__keys { font-size: clamp(1.1rem, 0.75rem + 1.15vw, 1.85rem); font-weight: 500; letter-spacing: 0.01em; text-transform: none; color: var(--on-dark); }
.valeur__word { --lit: 120% !important; }
.contact__note { position: absolute; right: var(--gutter); bottom: 1rem; z-index: 2; }
.dock__deck { display: none !important; }
@media (max-width: 1023px) { .founder__text { margin-top: 1.6rem; } }