/*
 * OXANN V5.2 LOT 4 — premium interaction + emotion.
 * Native CSS only: no animation framework, no remote runtime dependency.
 * Emotional spine: RELIEF -> CURIOSITY -> PROOF -> TRUST -> AGENCY.
 */

:root{
  --premium-ease:cubic-bezier(.22,.76,.24,1);
  --premium-fast:220ms;
  --premium-mid:340ms;
  --premium-slow:520ms;
}

/* Cross-document continuity: progressive enhancement on supported browsers. */
@view-transition{navigation:auto}
::view-transition-group(*){animation-duration:var(--premium-mid);animation-timing-function:var(--premium-ease)}
::view-transition-old(root){animation:oxann-fade-out 180ms ease both}
::view-transition-new(root){animation:oxann-fade-in 300ms var(--premium-ease) both}
@keyframes oxann-fade-out{to{opacity:.7}}
@keyframes oxann-fade-in{from{opacity:.72}to{opacity:1}}

/* Shared-element names: Home -> /work/ -> case page. */
#work-estimer .project-media,#estimer>:first-child,.case-estimer .case-hero>:last-child{view-transition-name:case-estimer-media}
#work-estimer h3,#estimer h3,.case-estimer .case-title-row h1{view-transition-name:case-estimer-title}
#work-hop .project-media,#hopnbar>:first-child,.case-hopnbar .case-hero>:last-child{view-transition-name:case-hopnbar-media}
#work-hop h3,#hopnbar h3,.case-hopnbar .case-title-row h1{view-transition-name:case-hopnbar-title}
#work-courtage .project-media,#courtage>:first-child,.case-courtage .case-hero>:last-child{view-transition-name:case-courtage-media}
#work-courtage h3,#courtage h3,.case-courtage .case-title-row h1{view-transition-name:case-courtage-title}
#work-sante .project-media,#syndic-sante>:first-child,.case-syndic-sante .case-hero>:last-child{view-transition-name:case-syndic-sante-media}
#work-sante h3,#syndic-sante h3,.case-syndic-sante .case-title-row h1{view-transition-name:case-syndic-sante-title}
#work-aichiever .project-media,#aichiever>:first-child,.case-aichiever .case-hero>:last-child{view-transition-name:case-aichiever-media}
#work-aichiever h3,#aichiever h3,.case-aichiever .case-title-row h1{view-transition-name:case-aichiever-title}
#work-obd .project-media,#obd>:first-child,.case-obd .case-hero>:last-child{view-transition-name:case-obd-media}
#work-obd h3,#obd h3,.case-obd .case-title-row h1{view-transition-name:case-obd-title}
#work-valentin .project-media,#valentin>:first-child,.case-residences-du-valentin .case-hero>:last-child{view-transition-name:case-valentin-media}
#work-valentin h3,#valentin h3,.case-residences-du-valentin .case-title-row h1{view-transition-name:case-valentin-title}
#work-risk .project-media,#risk-management>:first-child,.case-risk-management .case-hero>:last-child{view-transition-name:case-risk-media}
#work-risk h3,#risk-management h3,.case-risk-management .case-title-row h1{view-transition-name:case-risk-title}

/* Hero: clarity first, then emotion. */
.hero-definition{
  max-width:660px;
  margin:-4px 0 22px;
  color:#52525b;
  font-size:clamp(.94rem,1.2vw,1.08rem);
  line-height:1.58;
}
.hero-emotion{
  display:flex;
  align-items:center;
  gap:12px;
  max-width:650px;
  margin:20px 0 0;
  color:var(--muted);
  font-size:.76rem;
  letter-spacing:.015em;
}
.hero-emotion::before{
  content:'';
  width:28px;
  height:1px;
  flex:none;
  background:var(--focus);
  transform-origin:left center;
  animation:oxann-breathe 3.8s var(--premium-ease) infinite alternate;
}
@keyframes oxann-breathe{from{transform:scaleX(.45);opacity:.55}to{transform:scaleX(1);opacity:1}}

/* Emotional scenes are explicit in the DOM, not hidden in ad-hoc animation. */
[data-emotion]{position:relative}
[data-emotion="proof"] .work-head::after{
  content:'VOIR AVANT DE CROIRE';
  align-self:end;
  justify-self:end;
  color:#a1a1aa;
  font-size:.56rem;
  letter-spacing:.14em;
}
.talk-emotion{
  max-width:560px;
  margin:24px 0 0;
  color:var(--muted);
  font-size:clamp(1rem,1.35vw,1.16rem);
  line-height:1.55;
}
.talk-emotion strong{color:var(--ink);font-weight:580}

/* The main case link owns the card. Secondary/external links stay independently clickable. */
.project-explorable,.work-case.project-explorable{
  position:relative;
  isolation:isolate;
  cursor:pointer;
}
.project-case-anchor{color:inherit;text-decoration:none}
.project-case-anchor::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:2;
}
.project-case-anchor:focus-visible{outline:none}
.project-case-anchor:focus-visible::after{
  box-shadow:inset 0 0 0 2px var(--focus),0 0 0 4px #fff;
}
.project-link-row,.work-case-link,.work-case-link-row,
.project-explorable .button,.project-explorable .text-link,
.work-case.project-explorable .button,.work-case.project-explorable .text-link{
  position:relative;
  z-index:5;
}

/* OXANN focus language: not a generic zoom card. */
.project-explorable::before,.project-explorable::after,
.work-case.project-explorable::before,.work-case.project-explorable::after{
  content:'';
  position:absolute;
  z-index:4;
  width:18px;
  height:18px;
  pointer-events:none;
  opacity:0;
  transition:opacity var(--premium-fast) ease,transform var(--premium-mid) var(--premium-ease);
}
.project-explorable::before,.work-case.project-explorable::before{
  left:-1px;
  top:-1px;
  border-left:1.5px solid var(--focus);
  border-top:1.5px solid var(--focus);
  transform:translate(-7px,-7px);
}
.project-explorable::after,.work-case.project-explorable::after{
  right:-1px;
  bottom:-1px;
  border-right:1.5px solid var(--focus);
  border-bottom:1.5px solid var(--focus);
  transform:translate(7px,7px);
}
.project-explorable:hover::before,.project-explorable:hover::after,
.project-explorable:focus-within::before,.project-explorable:focus-within::after,
.work-case.project-explorable:hover::before,.work-case.project-explorable:hover::after,
.work-case.project-explorable:focus-within::before,.work-case.project-explorable:focus-within::after{
  opacity:1;
  transform:none;
}

.project-explorable .project-media,
.work-case.project-explorable>:first-child{
  position:relative;
  overflow:hidden;
  transition:transform var(--premium-mid) var(--premium-ease),box-shadow var(--premium-mid) var(--premium-ease),filter var(--premium-mid) var(--premium-ease);
}
.project-explorable .project-media::after,
.work-case.project-explorable>:first-child::after{
  content:'VOIR LE CAS  →';
  position:absolute;
  right:14px;
  bottom:14px;
  z-index:3;
  padding:8px 10px;
  border:1px solid rgba(16,16,20,.15);
  background:rgba(255,255,255,.94);
  color:var(--ink);
  font-size:.56rem;
  letter-spacing:.11em;
  opacity:0;
  transform:translateY(6px);
  transition:opacity var(--premium-fast) ease,transform var(--premium-mid) var(--premium-ease);
  pointer-events:none;
  backdrop-filter:blur(8px);
}
.project-explorable:hover .project-media,
.project-explorable:focus-within .project-media,
.work-case.project-explorable:hover>:first-child,
.work-case.project-explorable:focus-within>:first-child{
  transform:translateY(-3px);
  box-shadow:0 22px 60px rgba(16,16,20,.09);
}
.project-explorable:hover .project-media::after,
.project-explorable:focus-within .project-media::after,
.work-case.project-explorable:hover>:first-child::after,
.work-case.project-explorable:focus-within>:first-child::after{
  opacity:1;
  transform:none;
}
.project-explorable .project-media>img,
.work-case.project-explorable img{
  transition:transform var(--premium-slow) var(--premium-ease),filter var(--premium-slow) var(--premium-ease);
}
.project-explorable:hover .project-media>img,
.project-explorable:focus-within .project-media>img,
.work-case.project-explorable:hover img,
.work-case.project-explorable:focus-within img{
  transform:translate3d(0,-2px,0);
}

/* Case pages: the proof object feels connected to the card that opened it. */
.case-page .case-hero>:last-child{transform-origin:center top}
.case-page .case-hero h1{text-wrap:balance}
.case-page .case-lead{text-wrap:pretty}

/* Confident: emotional payoff is agency, not spectacle. */
[data-emotion="agency"] .talk-box{
  border-top-color:var(--ink);
}
[data-emotion="agency"] .confident-result{
  background:linear-gradient(180deg,rgba(244,244,245,.48),rgba(255,255,255,0));
  padding:24px 18px 0;
  margin-left:-18px;
  margin-right:-18px;
}
[data-emotion="agency"] .confident-boundary span:first-child{border-color:#b7b7be;color:#3f3f46}

@media(max-width:1100px){
  [data-emotion="proof"] .work-head::after{display:none}
}
@media(max-width:820px){
  .hero-definition{margin-top:0}
  .hero-emotion{margin-top:16px}
  .project-explorable .project-media::after,
  .work-case.project-explorable>:first-child::after{right:10px;bottom:10px}
}
@media(max-width:520px){
  .hero-emotion{align-items:flex-start;line-height:1.45}
  .hero-emotion::before{margin-top:.55em;width:20px}
  .project-explorable .project-media::after,
  .work-case.project-explorable>:first-child::after{font-size:.52rem;padding:7px 8px}
}

@media(prefers-reduced-motion:reduce){
  .hero-emotion::before{animation:none;transform:none}
  .project-explorable::before,.project-explorable::after,
  .work-case.project-explorable::before,.work-case.project-explorable::after,
  .project-explorable .project-media,
  .work-case.project-explorable>:first-child,
  .project-explorable .project-media::after,
  .work-case.project-explorable>:first-child::after,
  .project-explorable .project-media>img,
  .work-case.project-explorable img{transition:none!important;transform:none!important}
  ::view-transition-group(*),::view-transition-old(root),::view-transition-new(root){animation-duration:.001ms!important}
}