/* =====================================================================
   Oasis Web Agency — transition photographique désert → oasis

   Les deux paysages sont de vraies images superposées dans un seul wrapper.
   CSS ne dessine que la lumière, la brume, le masque et l’interface.
   ===================================================================== */

.oasis-journey{
  --oasis-night:#050d15;
  --oasis-turquoise:#2dd4bf;
  --oasis-aqua:#a7fff1;
  --oasis-warm:#efc77a;
  --oasis-white:#f5fffd;
  position:relative;
  isolation:isolate;
  max-width:100%;
  overflow:hidden;
  color:var(--oasis-white);
  background:var(--oasis-night);
}

.oasis-scene{
  position:relative;
  width:100%;
  height:100vh;
  height:100svh;
  min-height:680px;
  overflow:hidden;
  overflow:clip;
  background:var(--oasis-night);
  contain:paint;
}

.oasis-media,
.oasis-frame,
.oasis-frame img,
.oasis-atmosphere-group,
.oasis-atmosphere-group>div,
.oasis-vignette,
.oasis-service-bridge{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.oasis-media{
  z-index:1;
  overflow:hidden;
  transform-origin:50% 56%;
  will-change:transform,opacity;
}

.oasis-frame{display:block}
.oasis-frame img{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:50% 50%;
  user-select:none;
}

/* Sans JS, en reduced motion ou en fallback : l’oasis finale est visible. */
.oasis-frame-desert{opacity:0}
.oasis-frame-oasis{opacity:1}
.js:not(.oasis-static) .oasis-frame-desert{opacity:1}
.js:not(.oasis-static) .oasis-frame-oasis{opacity:0}

/* Le masque n’existe que pendant l’expérience animée. */
.oasis-motion-ready .oasis-frame-oasis{
  --oasis-mask-x:3%;
  --oasis-mask-y:3%;
  -webkit-mask-image:radial-gradient(
    ellipse var(--oasis-mask-x) var(--oasis-mask-y) at 49% 56%,
    #000 0%,
    #000 52%,
    rgba(0,0,0,.92) 66%,
    rgba(0,0,0,.32) 82%,
    transparent 100%
  );
  mask-image:radial-gradient(
    ellipse var(--oasis-mask-x) var(--oasis-mask-y) at 49% 56%,
    #000 0%,
    #000 52%,
    rgba(0,0,0,.92) 66%,
    rgba(0,0,0,.32) 82%,
    transparent 100%
  );
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  will-change:opacity;
}

.oasis-atmosphere-group{
  z-index:2;
  overflow:hidden;
  will-change:transform,opacity;
}
.oasis-horizon-light{
  left:50%!important;
  top:51%!important;
  right:auto!important;
  bottom:auto!important;
  width:min(1180px,92vw);
  height:min(520px,64vh);
  transform:translate(-50%,-50%);
  border-radius:50%;
  opacity:.38;
  background:
    radial-gradient(ellipse at center,rgba(255,244,205,.38) 0%,rgba(132,246,225,.25) 24%,rgba(45,212,191,.1) 46%,transparent 73%);
  filter:blur(12px);
  mix-blend-mode:screen;
  will-change:transform,opacity;
}
.oasis-mist{
  top:39%!important;
  height:34%!important;
  opacity:.42;
  background:
    radial-gradient(ellipse 50% 35% at 47% 58%,rgba(91,235,216,.28),transparent 72%),
    linear-gradient(180deg,transparent 5%,rgba(46,199,189,.13) 48%,transparent 94%);
  filter:blur(14px);
  mix-blend-mode:screen;
  will-change:transform,opacity;
}
.oasis-color-wash{
  opacity:.22;
  background:
    radial-gradient(ellipse 76% 46% at 50% 54%,rgba(68,219,203,.13),transparent 66%),
    radial-gradient(ellipse 42% 34% at 52% 50%,rgba(239,199,122,.12),transparent 65%);
  mix-blend-mode:screen;
  will-change:opacity;
}

.oasis-particles{opacity:.58;will-change:opacity,transform}
.oasis-particles i{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--size);
  height:var(--size);
  border-radius:50%;
  background:rgba(225,255,248,.82);
  box-shadow:0 0 9px rgba(93,237,216,.42);
  animation:oasis-particle-drift var(--duration) ease-in-out infinite alternate var(--delay);
}
@keyframes oasis-particle-drift{
  from{transform:translate3d(0,7px,0);opacity:.08}
  to{transform:translate3d(var(--drift),-11px,0);opacity:.58}
}

.oasis-vignette{
  z-index:3;
  background:
    linear-gradient(180deg,rgba(1,5,10,.24),transparent 27%,transparent 72%,rgba(1,5,9,.24)),
    radial-gradient(112% 94% at 50% 48%,transparent 53%,rgba(0,3,8,.48) 100%);
  will-change:opacity;
}

.oasis-copy{
  position:absolute;
  z-index:6;
  inset:0;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  width:min(1180px,100%);
  margin-inline:auto;
  padding:clamp(104px,14vh,154px) clamp(20px,5vw,48px) clamp(96px,13vh,142px);
  text-align:center;
  pointer-events:none;
}
.oasis-intro{
  width:100%;
  min-width:0;
  max-width:1040px;
  will-change:transform,opacity;
}
.oasis-kicker{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-bottom:20px;
  font-family:var(--font-mono,'JetBrains Mono',ui-monospace,monospace);
  font-size:.7rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--oasis-aqua);
  text-shadow:0 2px 18px rgba(0,4,10,.8);
}
.oasis-kicker::before,.oasis-kicker::after{
  content:"";
  width:24px;
  height:1px;
  background:currentColor;
  opacity:.58;
}
.oasis-intro h1,.oasis-reveal h2{
  margin:0;
  font-family:var(--font-display,'Bricolage Grotesque',system-ui,sans-serif);
  font-weight:800;
  line-height:.98;
  letter-spacing:-.045em;
  color:#fff;
  text-wrap:balance;
  text-shadow:0 4px 34px rgba(0,4,10,.78),0 1px 3px rgba(0,0,0,.72);
}
.oasis-intro h1{font-size:clamp(3rem,6.6vw,5.75rem)}
.oasis-intro h1 span{
  color:transparent;
  background:linear-gradient(100deg,#bafff4,#7ff0dd 52%,#f6dca6);
  -webkit-background-clip:text;
  background-clip:text;
  /* drop-shadow survit à background-clip:text (contrairement à text-shadow)
     et détache la ligne du fond sombre du désert */
  filter:drop-shadow(0 4px 26px rgba(0,4,10,.85)) drop-shadow(0 1px 2px rgba(0,0,0,.72));
}
.oasis-intro p{
  max-width:720px;
  margin:24px auto 0;
  font-size:clamp(1rem,1.55vw,1.2rem);
  line-height:1.58;
  color:rgba(239,250,250,.86);
  text-wrap:balance;
  text-shadow:0 2px 20px rgba(0,4,10,.82);
}
.oasis-actions{
  display:flex;
  max-width:100%;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
  pointer-events:auto;
}
.oasis-button{
  display:inline-flex;
  min-height:50px;
  max-width:100%;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:0 23px;
  border:1px solid transparent;
  border-radius:12px;
  font-weight:650;
  font-size:.96rem;
  transition:transform .25s var(--ease,cubic-bezier(.22,1,.36,1)),background .25s,border-color .25s,box-shadow .25s;
}
.oasis-button svg{width:19px;height:19px}
.oasis-button-primary{
  color:#04241f;
  background:var(--oasis-aqua);
  box-shadow:0 14px 36px -14px rgba(45,212,191,.85);
}
.oasis-button-secondary{
  color:#fff;
  border-color:rgba(255,255,255,.38);
  background:rgba(4,17,28,.46);
  backdrop-filter:blur(10px);
}
.oasis-button:hover{transform:translateY(-2px)}
.oasis-button-primary:hover{box-shadow:0 18px 42px -13px rgba(45,212,191,.95)}
.oasis-button-secondary:hover{border-color:rgba(255,255,255,.68);background:rgba(255,255,255,.1)}
.oasis-button:focus-visible{outline:3px solid var(--oasis-warm);outline-offset:4px}

.oasis-reveal{
  position:absolute;
  left:clamp(20px,5vw,48px);
  right:clamp(20px,5vw,48px);
  bottom:clamp(70px,9vh,104px);
  opacity:1;
  text-align:center;
  will-change:transform,opacity;
}
.js:not(.oasis-static) .oasis-reveal{opacity:0}
.oasis-motion-ready .oasis-reveal{
  top:clamp(116px,17vh,176px);
  bottom:auto;
}
.oasis-reveal h2{font-size:clamp(2.7rem,5.8vw,5.1rem)}

.oasis-scroll-hint{
  position:absolute;
  z-index:7;
  left:50%;
  bottom:24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  transform:translateX(-50%);
  color:rgba(255,255,255,.7);
  font-family:var(--font-mono,'JetBrains Mono',ui-monospace,monospace);
  font-size:.62rem;
  letter-spacing:.23em;
  text-transform:uppercase;
  white-space:nowrap;
  pointer-events:none;
}
.oasis-scroll-hint i{
  position:relative;
  width:1px;
  height:34px;
  overflow:hidden;
  background:rgba(255,255,255,.28);
}
.oasis-scroll-hint i::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent,var(--oasis-aqua),transparent);
  transform:translateY(-100%);
  animation:oasis-scroll-line 1.8s ease-in-out infinite;
}
@keyframes oasis-scroll-line{to{transform:translateY(100%)}}

.oasis-progress{
  position:absolute;
  z-index:7;
  right:clamp(18px,3vw,34px);
  top:50%;
  display:flex;
  flex-direction:column;
  gap:10px;
  transform:translateY(-50%);
}
.oasis-progress span{
  width:3px;
  height:22px;
  border-radius:2px;
  background:rgba(255,255,255,.2);
  transition:background .25s,transform .25s;
}
.oasis-progress span.is-active{
  background:var(--oasis-aqua);
  transform:scaleY(1.28);
  box-shadow:0 0 12px rgba(45,212,191,.55);
}

.oasis-service-bridge{
  z-index:5;
  top:auto;
  height:42vh;
  opacity:1;
  background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--bg) 38%,transparent) 58%,var(--bg) 100%);
  will-change:opacity,transform;
}

body.oasis-active .header::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(2,5,11,.68),transparent);
}
body.oasis-active .header .brand,
body.oasis-active .header .nav-links a,
body.oasis-active .header .nav-item>a{color:#fff!important}
body.oasis-active .header .brand-logo{fill:#fff!important}
body.oasis-active .header .icon-btn{color:rgba(255,255,255,.92);border-color:rgba(255,255,255,.24)}
body.oasis-active .header.scrolled{background:rgba(3,9,17,.56)}

.oasis-static .oasis-frame-desert{opacity:0!important;visibility:hidden!important}
.oasis-static .oasis-frame-oasis{
  opacity:1!important;
  visibility:visible!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
}
.oasis-static .oasis-reveal{opacity:1}

@media (max-width:760px){
  .oasis-scene{min-height:max(680px,100svh)}
  .oasis-frame img{object-position:52% 50%}
  .oasis-motion-ready .oasis-frame-oasis{
    -webkit-mask-image:radial-gradient(
      ellipse var(--oasis-mask-x) var(--oasis-mask-y) at 51% 55%,
      #000 0%,#000 50%,rgba(0,0,0,.88) 68%,transparent 100%
    );
    mask-image:radial-gradient(
      ellipse var(--oasis-mask-x) var(--oasis-mask-y) at 51% 55%,
      #000 0%,#000 50%,rgba(0,0,0,.88) 68%,transparent 100%
    );
  }
  .oasis-copy{padding:96px 20px 110px}
  .oasis-intro h1{font-size:clamp(2.25rem,10.4vw,3.45rem);line-height:1.01}
  .oasis-intro p{max-width:34ch;margin-top:19px;font-size:.98rem}
  .oasis-actions{flex-direction:column;align-items:stretch;width:100%;max-width:340px;margin:24px auto 0}
  .oasis-button{width:100%}
  .oasis-kicker{margin-bottom:15px;font-size:.62rem;letter-spacing:.2em}
  .oasis-kicker::before,.oasis-kicker::after{width:16px}
  .oasis-progress,.oasis-particles{display:none}
  .oasis-scroll-hint{bottom:17px}
  .oasis-motion-ready .oasis-reveal{top:106px;bottom:auto}
  .oasis-reveal h2{font-size:clamp(2.35rem,11.8vw,3.65rem)}
  .oasis-horizon-light{width:150vw;height:54vh;filter:blur(9px)}
  .oasis-mist{filter:blur(9px)}
  .oasis-service-bridge{height:48vh}
}

@media (max-height:720px) and (min-width:761px){
  .oasis-scene{min-height:600px}
  .oasis-copy{padding-top:88px;padding-bottom:78px}
  .oasis-intro h1{font-size:clamp(2.65rem,6.15vw,4.7rem)}
  .oasis-intro p{margin-top:17px}
  .oasis-actions{margin-top:20px}
  .oasis-scroll-hint{bottom:12px}
  .oasis-motion-ready .oasis-reveal{top:92px}
}

@media (prefers-reduced-motion:reduce){
  .oasis-scene{height:auto;min-height:max(780px,100svh);overflow:hidden}
  .oasis-media{transform:none!important;opacity:1!important}
  .oasis-frame-desert{opacity:0!important;visibility:hidden!important}
  .oasis-frame-oasis{
    opacity:1!important;
    visibility:visible!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
  .oasis-atmosphere-group{transform:none!important;opacity:.3!important}
  .oasis-horizon-light{opacity:.28!important;transform:translate(-50%,-50%)!important}
  .oasis-mist{opacity:.22!important;transform:none!important}
  .oasis-color-wash{opacity:.12!important}
  .oasis-particles,.oasis-scroll-hint,.oasis-progress{display:none!important}
  .oasis-vignette{opacity:.72!important}
  .oasis-copy{position:relative;min-height:max(780px,100svh);padding-bottom:190px}
  .oasis-reveal{top:auto!important;bottom:58px;opacity:1!important;visibility:visible!important;transform:none!important}
  .oasis-service-bridge{opacity:1!important;transform:none!important}
  .oasis-button{transition:none}
}

@media (prefers-reduced-motion:reduce) and (max-width:760px){
  .oasis-scene,.oasis-copy{min-height:850px}
  .oasis-copy{padding-bottom:205px}
  .oasis-intro h1{font-size:clamp(2.15rem,10.2vw,2.95rem)}
  .oasis-reveal{bottom:54px}
  .oasis-reveal .oasis-kicker{margin-bottom:10px}
  .oasis-reveal h2{font-size:2.25rem}
}