/* 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 aim point of the portrait, read by landing.js for the canvas and used
     below for the still plate: one framing for both */
  --focus-x:.5;--focus-y:.46;
}
/* a portrait frame, phone or tablet, is aimed at the head (OR-40, OR-73) */
@media (max-width:760px), (max-aspect-ratio:1/1){
  .land{--focus-x:.24;--focus-y:.34}
}

/* 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);
}
@media (max-width:760px), (max-aspect-ratio:1/1){
  .land-plate{background-position:24% 50%}
}
/* The shader's framing (particle-image.js, coverUv) written in CSS: the 16:9
   picture is scaled to cover the frame, the aim point is brought to the centre
   of the frame, and the offset is clamped so no edge of the picture comes
   inside it. Same arithmetic, so the plate shown before the canvas is live,
   and the only picture under reduced motion, is the canvas's picture. The
   frame is the .land box: the full width of a page that cannot scroll, and
   100svh tall. Container units were tried first and measured wrong in Chrome
   (the height resolved to 0), so the frame is written in viewport units. */
@supports (height:1svh){
  .land-plate{
    --img-w:max(100vw, 100svh * 16 / 9);
    --img-h:max(100svh, 100vw * 9 / 16);
    background-position:
      clamp(100vw - var(--img-w), 50vw - var(--focus-x) * var(--img-w), 0px)
      clamp(100svh - var(--img-h), 50svh - var(--focus-y) * var(--img-h), 0px);
  }
}
.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}}
}

/* the copy takes a right-hand column only on a landscape frame: on a portrait
   tablet that column would sit on the face */
@media (min-width:761px) and (min-aspect-ratio:1/1){
  .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), (max-aspect-ratio:1/1){
  .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%)}
}
@media (max-width:760px){
  .land-copy h1{font-size:clamp(2.3rem,11.5vw,3rem)}
  .land-copy p{font-size:1.02rem;max-width:26rem}
}
@media (min-width:761px) and (max-aspect-ratio:1/1){
  .land-veil{background:linear-gradient(180deg,
    rgba(5,5,5,.44) 0%, rgba(5,5,5,0) 18%,
    rgba(5,5,5,0) 56%, rgba(5,5,5,.8) 86%, rgba(5,5,5,.95) 100%)}
  .land-copy h1{font-size:clamp(3rem,7vw,4.4rem)}
  .land-copy p{max-width:30rem}
}

/* 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}
}