/* Motion layer for the static prototype */

:root{
  --ease:cubic-bezier(.16,1,.3,1);
  --scene-glow:rgba(212,180,125,.18);
}

body{position:relative;overflow-x:hidden}
body[data-scene="sage"]{--scene-glow:rgba(99,121,101,.2)}
body[data-scene="sand"]{--scene-glow:rgba(212,180,125,.23)}
body[data-scene="dark"]{--scene-glow:rgba(53,88,68,.2)}
body[data-scene="territory"]{--scene-glow:rgba(190,139,82,.2)}

.ambient-layer{
  position:fixed;
  inset:-20vmax;
  pointer-events:none;
  z-index:0;
  background:radial-gradient(circle at 72% 28%,var(--scene-glow),transparent 28%);
  opacity:.8;
  transition:background-color .8s var(--ease),opacity .8s var(--ease);
}
main,.footer{position:relative;z-index:1}

/* Hero: image starts as an architectural opening and expands into the scene */
.hero-stage{view-timeline-name:--hero-stage;view-timeline-axis:block}
.hero .portal{
  inset:0;
  width:100%;
  height:100%;
  left:0;
  top:0;
  border-radius:0;
  box-shadow:none;
  clip-path:inset(12% 8% 12% 56% round 220px 220px 28px 28px);
  will-change:clip-path,transform;
}
.hero .portal:before{display:none}
.hero .portal img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform:scale(1.08);
  will-change:transform;
}
.arch-frame{
  position:absolute;
  z-index:6;
  top:12%;
  right:8%;
  bottom:12%;
  left:56%;
  border:2px solid rgba(226,196,140,.74);
  border-radius:220px 220px 28px 28px / 180px 180px 28px 28px;
  box-shadow:inset 0 0 0 15px rgba(77,91,73,.33),0 28px 70px rgba(24,32,26,.22);
  pointer-events:none;
  transform-origin:center;
}
.hero .copy,.hero .header{will-change:transform,opacity}
.hero .portal-copy{will-change:transform,opacity}

@supports (animation-timeline:view()){
  .hero .portal{
    animation:portal-open linear both;
    animation-timeline:--hero-stage;
    animation-range:exit 0% exit 48%;
  }
  .hero .portal img{
    animation:hero-image-depth linear both;
    animation-timeline:--hero-stage;
    animation-range:exit 0% exit 52%;
  }
  .hero .copy{
    animation:hero-copy-away linear both;
    animation-timeline:--hero-stage;
    animation-range:exit 0% exit 34%;
  }
  .hero .header{
    animation:hero-header-away linear both;
    animation-timeline:--hero-stage;
    animation-range:exit 0% exit 28%;
  }
  .hero .portal-copy{
    animation:portal-copy-in linear both;
    animation-timeline:--hero-stage;
    animation-range:exit 28% exit 49%;
  }
  .arch-frame{
    animation:arch-frame-away linear both;
    animation-timeline:--hero-stage;
    animation-range:exit 0% exit 30%;
  }
}

@keyframes portal-open{
  from{clip-path:inset(12% 8% 12% 56% round 220px 220px 28px 28px)}
  to{clip-path:inset(0 0 0 0 round 0)}
}
@keyframes hero-image-depth{
  from{transform:scale(1.08) translate3d(0,0,0)}
  to{transform:scale(1.01) translate3d(0,-1.4%,0)}
}
@keyframes hero-copy-away{
  0%,12%{opacity:1;transform:translateY(-46%) translateX(0)}
  100%{opacity:0;transform:translateY(-46%) translateX(-5vw)}
}
@keyframes hero-header-away{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-22px)}}
@keyframes portal-copy-in{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes arch-frame-away{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.045)}}

/* Line reveals */
.line-reveal{overflow:hidden}
.line-reveal>span{display:block;transform:translateY(115%);opacity:.02;transition:transform .95s var(--ease),opacity .65s var(--ease)}
.line-reveal.is-visible>span{transform:translateY(0);opacity:1}
.line-reveal:nth-child(2)>span{transition-delay:.08s}
.line-reveal:nth-child(3)>span{transition-delay:.14s}
body.ready .hero-line>span{transform:translateY(0);opacity:1}
.hero-line>span{transition-delay:calc(var(--line-index,0) * 90ms)}

/* Image reveal masks */
.mask-reveal{clip-path:inset(0 0 100% 0);transition:clip-path 1.05s var(--ease)}
.mask-reveal.is-visible{clip-path:inset(0 0 0 0)}
.mask-reveal.is-visible img{transform:scale(1)}
.mask-reveal img{transform:scale(1.06);transition:transform 1.2s var(--ease)}

/* Subtle parallax through CSS view timelines */
.parallax-media{overflow:hidden}
.parallax-media img{transform:scale(1.08) translateY(-2.8%)}
@supports (animation-timeline:view()){
  .parallax-media img{
    animation:parallax-y linear both;
    animation-timeline:view();
    animation-range:entry 0% exit 100%;
  }
}
@keyframes parallax-y{
  from{transform:scale(1.08) translateY(-4%)}
  to{transform:scale(1.08) translateY(4%)}
}

/* Sticky narrative: Objet -> Matiere -> Geste -> Territoire */
.storytelling{
  position:relative;
  height:430vh;
  background:rgba(232,223,207,.92);
  color:var(--ink);
}
.story-pin{
  position:sticky;
  top:0;
  min-height:100dvh;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(20rem,.85fr);
  overflow:hidden;
}
.story-media{
  position:relative;
  min-height:100dvh;
  background:#465548;
}
.story-photo{
  position:absolute;
  inset:0;
  opacity:0;
  transform:scale(1.07);
  transition:opacity .65s var(--ease),transform 1.1s var(--ease);
}
.story-photo.is-active{opacity:1;transform:scale(1)}
.story-photo img{width:100%;height:100%;object-fit:cover}
.story-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(23,34,27,.06),rgba(23,34,27,.2))}
.story-copy-stack{
  position:relative;
  display:grid;
  align-content:center;
  min-height:100dvh;
  padding:clamp(3rem,7vw,7rem);
  background:rgba(241,235,223,.96);
}
.story-copy-panel{
  position:absolute;
  left:clamp(3rem,7vw,7rem);
  right:clamp(3rem,7vw,7rem);
  top:50%;
  opacity:0;
  transform:translateY(calc(-50% + 32px));
  pointer-events:none;
  transition:opacity .45s var(--ease),transform .7s var(--ease);
}
.story-copy-panel.is-active{opacity:1;transform:translateY(-50%);pointer-events:auto}
.story-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.24em;color:#7d705c;margin-bottom:1.5rem}
.story-copy-panel h2{margin:0;font:400 clamp(3.6rem,6vw,6.8rem)/.91 Georgia,serif;letter-spacing:-.052em}
.story-copy-panel p{max-width:31rem;color:#6e685f;line-height:1.85;margin:1.6rem 0 0}
.story-progress{position:absolute;left:clamp(3rem,7vw,7rem);right:clamp(3rem,7vw,7rem);bottom:3rem;display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
.story-progress span{height:2px;background:rgba(69,76,68,.14);overflow:hidden}
.story-progress span:after{content:"";display:block;width:100%;height:100%;background:var(--sage);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.story-progress span.is-active:after{transform:scaleX(1)}
.story-sentinels{position:absolute;inset:0;display:grid;grid-template-rows:repeat(4,1fr);pointer-events:none}
.story-sentinel{min-height:1px}

/* Reactive collection cards */
.card{
  transform-style:preserve-3d;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
  box-shadow:0 18px 42px rgba(38,48,40,.08);
}
.card:hover{
  transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-7px);
  box-shadow:0 28px 65px rgba(38,48,40,.15);
}
.card .card-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .65s var(--ease),transform .85s var(--ease)}
.card .card-photo.secondary{opacity:0;transform:scale(1.06)}
.card:hover .card-photo.primary{opacity:.18;transform:scale(1.07)}
.card:hover .card-photo.secondary{opacity:1;transform:scale(1.015)}
.card .card-content{transition:transform .45s var(--ease)}
.card:hover .card-content{transform:translate3d(8px,-7px,30px)}
.card:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:radial-gradient(260px circle at var(--px,50%) var(--py,50%),rgba(255,245,223,.2),transparent 62%);
  opacity:0;
  transition:opacity .25s;
}
.card:hover:before{opacity:1}

/* Magnetic interactions */
.magnetic{will-change:transform;transition:transform .22s var(--ease)}

/* Color-block transitions feel continuous */
.story,.universes,.closing{background-color:color-mix(in srgb,var(--paper) 92%,transparent)}

/* Big final Madagascar scene */
.madagascar-final{
  position:relative;
  min-height:112dvh;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  background:#2e382f;
  color:#f5efe5;
}
.madagascar-media{position:absolute;inset:-5% 0}
.madagascar-media img{width:100%;height:110%;object-fit:cover;object-position:center 55%}
.madagascar-final:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,29,23,.08) 20%,rgba(20,29,23,.74) 88%)}
.madagascar-copy{position:relative;z-index:2;width:min(62rem,calc(100% - 3rem));margin:0 0 clamp(3rem,8vw,8rem) clamp(1.5rem,7vw,8rem)}
.madagascar-copy h2{margin:0;font:400 clamp(4rem,8vw,8.4rem)/.88 Georgia,serif;letter-spacing:-.055em;max-width:10ch}
.madagascar-copy p{max-width:34rem;margin:1.6rem 0 0;color:rgba(248,242,231,.78);font-size:1.02rem;line-height:1.8}

/* Motion-in-view basics */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .72s var(--ease),transform .8s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}

@media(prefers-color-scheme:dark){
  :root{--paper:#17221c;--cream:#202b24;--ink:#f0ece4;--muted:#bbb4a9}
  .storytelling{background:rgba(31,42,35,.95)}
  .story-copy-stack{background:rgba(24,34,28,.97)}
  .story-copy-panel p{color:#bbb4a9}
  .story-label{color:#d1b985}
  .universes,.closing{background-color:rgba(23,34,28,.92)}
}

@media(max-width:1000px){
  .hero .portal{position:relative;inset:auto;width:100%;height:65svh;clip-path:none;border-radius:180px 180px 18px 18px/130px 130px 18px 18px}
  .hero .portal img{transform:none}
  .arch-frame{display:none}
  .storytelling{height:auto}
  .story-pin{position:relative;grid-template-columns:1fr;min-height:auto}
  .story-media{min-height:68svh}
  .story-copy-stack{min-height:34rem;padding:3rem 1.5rem}
  .story-copy-panel{left:1.5rem;right:1.5rem}
  .story-progress{left:1.5rem;right:1.5rem;bottom:1.5rem}
  .story-sentinels{display:none}
  .story-copy-panel{position:relative;top:auto;left:auto;right:auto;opacity:1;transform:none;margin-bottom:3rem;pointer-events:auto}
  .story-copy-panel:not(:first-of-type){display:none}
  .madagascar-final{min-height:92svh}
}

@media(max-width:640px){
  .madagascar-copy{width:calc(100% - 2rem);margin-left:1rem;margin-right:1rem}
  .madagascar-copy h2{font-size:clamp(3.5rem,17vw,5rem)}
}

@media(prefers-reduced-motion:reduce){
  .hero-stage{height:auto!important}
  .hero{position:relative!important}
  .hero .portal{position:relative;inset:auto;width:100%;height:68svh;clip-path:none;border-radius:180px 180px 18px 18px/130px 130px 18px 18px}
  .arch-frame{display:none}
  .hero .copy,.hero .header,.hero .portal-copy,.hero .portal img{animation:none!important;transform:none!important;opacity:1!important}
  .parallax-media img{animation:none!important;transform:none!important}
  .reveal,.line-reveal>span,.mask-reveal,.mask-reveal img{transition:none!important;transform:none!important;opacity:1!important;clip-path:none!important}
  .card,.card:hover,.magnetic{transform:none!important;transition:none!important}
}