/* Origenality — the landing. One face coming out of the dark, one sentence,
   one door. The cream is still the palette; here it is the light rather than
   the ground. Romain Girardi, 2026. */

html,body{height:100%;overflow:hidden}
body{padding:0}

.land-page{
  --night:#050505;
  --cream:#F2ECDD;
  --cream-soft:rgba(242,236,221,.66);
  --gutter:clamp(1.15rem,4vw,4rem);
}

.land{
  position:relative;min-height:100dvh;min-height:100svh;overflow:hidden;
  background:var(--night);color:var(--cream);
}

/* the field the canvas mounts into, and — until the canvas is live, or when
   motion is refused — the picture itself, framed and graded to match */
.land-field{position:absolute;inset:0;z-index:0;background:var(--night)}
.land-plate{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:url("marks/origen.jpg") 50% 46%/cover no-repeat;
  opacity:1;transition:opacity .8s var(--ease);
}
.land.is-live .land-plate{opacity:0}

.particle-canvas{position:absolute;inset:0;z-index:2;width:100%;height:100%;display:block}

/* the only thing over the field: what the copy needs to be legible */
.land-veil{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(5,5,5,.40) 0%, rgba(5,5,5,0) 14%,
    rgba(5,5,5,0) 60%, rgba(5,5,5,.30) 88%, rgba(5,5,5,.52) 100%);
}

.land-bar{
  position:absolute;top:0;left:0;right:0;z-index:6;
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(1.1rem + env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) .7rem max(var(--gutter), env(safe-area-inset-left));
}
.land-bar .wordmark{color:var(--cream)}
.land-bar .wordmark .mk{color:#C1613C}
.land-bar .nav-wide{gap:clamp(.9rem,1.8vw,1.5rem)}
.land-bar .nav-wide a,.land-bar .nav-sheet a{
  color:rgba(242,236,221,.56);border-bottom:0;text-decoration:none;
  font-size:.9rem;letter-spacing:.01em;transition:color .25s var(--ease);
}
.land-bar .nav-wide a:hover,.land-bar .nav-sheet a:hover{color:var(--cream)}
.land-bar .nav-fold > summary{color:var(--cream);border-bottom-color:rgba(242,236,221,.4)}
.land-bar .nav-sheet{background:rgba(5,5,5,.94);border:1px solid rgba(242,236,221,.14)}

.land-copy{
  position:absolute;z-index:5;left:0;right:0;bottom:0;
  padding:0 max(var(--gutter), env(safe-area-inset-right)) calc(2.6rem + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  display:flex;flex-direction:column;align-items:flex-start;gap:1rem;
}
.land-copy h1{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(2.6rem,7vw,4.8rem);line-height:.98;letter-spacing:-.02em;
  margin:0;color:var(--cream);
  text-shadow:0 2px 40px rgba(0,0,0,.6);
}
.land-copy p{
  margin:0;max-width:29rem;
  font-size:clamp(1.02rem,1.15vw,1.14rem);line-height:1.58;
  color:var(--cream-soft);
}
.land-copy .go{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:.8rem 1.85rem;margin-top:.4rem;
  background:var(--cream);color:#171310;text-decoration:none;border:0;
  font-family:var(--text);font-size:.94rem;font-weight:500;letter-spacing:.012em;
  border-radius:999px;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 14px 36px -18px rgba(0,0,0,.95);
  transition:transform .32s var(--ease), box-shadow .32s var(--ease), background .25s var(--ease);
}
@media (hover:hover){
  .land-copy .go:hover{
    background:#FFFAEE;transform:translateY(-2px);
    box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 22px 44px -20px rgba(0,0,0,1);
  }
}
.land-copy .go:active{transform:translateY(0)}

/* opening: the type arrives once the dust has settled */
@media (prefers-reduced-motion:no-preference){
  .land-copy > *{opacity:0;transform:translateY(14px);animation:land-rise 1s var(--ease) forwards}
  .land-copy h1{animation-delay:.24s}
  .land-copy p{animation-delay:.38s}
  .land-copy .go{animation-delay:.52s}
  @keyframes land-rise{to{opacity:1;transform:none}}
}

@media (min-width:761px){
  .land-copy{
    left:auto;right:0;bottom:auto;top:50%;transform:translateY(-50%);
    width:min(30rem,42vw);
    padding:0 max(var(--gutter), env(safe-area-inset-right)) 0 0;
    align-items:flex-start;gap:1.15rem;
  }
  .land-copy h1{font-size:clamp(3rem,5.6vw,4.6rem);line-height:.96}
  .land-copy p{max-width:26rem}
}

@media (min-width:1500px){
  .land-copy{right:max(0px,calc(50vw - 44rem))}
}

@media (max-width:760px){
  .land-veil{background:linear-gradient(180deg,
    rgba(5,5,5,.44) 0%, rgba(5,5,5,0) 18%,
    rgba(5,5,5,0) 42%, rgba(5,5,5,.78) 80%, rgba(5,5,5,.95) 100%)}
  .land-copy h1{font-size:clamp(2.3rem,11.5vw,3rem)}
  .land-copy p{font-size:1.02rem;max-width:26rem}
}

/* the departure */
.land-copy{transition:opacity .5s var(--ease), transform .6s var(--ease)}
.land.is-leaving .land-copy{opacity:0;transform:translateY(10px);pointer-events:none}
.land.is-leaving .land-bar{opacity:0;transition:opacity .5s var(--ease);pointer-events:none}
.land.is-leaving .land-veil{opacity:0;transition:opacity .8s var(--ease)}
.land::before{
  content:"";position:absolute;inset:0;z-index:7;pointer-events:none;
  background:var(--night);opacity:0;transition:opacity .42s linear;
}
.land.is-gone::before{opacity:1}

@media (prefers-reduced-motion:reduce){
  .particle-canvas{display:none}
  .land.is-live .land-plate{opacity:1}
}