/* ==========================================================================
   Mojaya — landing « bientôt disponible »

   Modèle de mise en page
   ----------------------
   Le design est dessiné sur deux canvas à taille fixe : 1920 × 1046,603 en
   desktop, 1080 × 1920 en mobile (bascule à 900 px, comme la source).
   Toutes les coordonnées sont donc exprimées en « unités canvas » via --u,
   qui vaut 1 px lorsque la fenêtre fait exactement la largeur du canvas :

       left: calc(814.568 * var(--u))   ⇔   left: 814.568px à 1920 px de large

   Cela reproduit le `transform: scale(w / 1920)` de la source sans transform
   ni JavaScript : le rendu reste net et la page se met à l'échelle seule.
   ========================================================================== */

@import "tokens/colors.css";
@import "tokens/typography.css";
@import "tokens/layout.css";

/* --------------------------------------------------------------------------
   Fontes de marque
   Seules ces trois graisses sont utilisées par la landing. Le fichier
   tokens/fonts.css du design system référence en plus Lovelace-Text-Regular
   et SweetSans-Medium, absents de ce dépôt : il n'est donc pas importé.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:"Lovelace Light";
  src:url("../assets/fonts/Lovelace-Light.woff2") format("woff2");
  font-weight:300;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Bell Gothic Std";
  src:url("../assets/fonts/BellGothicStd-Light.ttf") format("truetype");
  font-weight:300;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Sweet Sans Pro";
  src:url("../assets/fonts/SweetSansPro-Regular.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap;
}

/* --------------------------------------------------------------------------
   Socle
   -------------------------------------------------------------------------- */
:root{
  --u:calc(100vw / 1920);          /* unité canvas — desktop */
  --canvas-h:1046.603;             /* hauteur du canvas desktop */
  --landing-veil:#2D221C;          /* brun du voile d'ouverture, hors palette DS */
  --landing-ink:#FFFFFF;
  --field-font-size:calc(15.113 * var(--u));
}

/* Sous 16px, Safari iOS zoome de force sur le champ au focus et casse le
   cadrage. On relève le plancher uniquement sur écran tactile : le rendu
   à la souris reste exactement celui de la maquette. */
@media (pointer:coarse){
  :root{--field-font-size:max(16px, calc(15.113 * var(--u)))}
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100svh;
  display:flex;
  align-items:center;                     /* le canvas est plus plat que la plupart des écrans */
  justify-content:center;
  background:var(--landing-veil);         /* prolonge le décor au-delà du canvas */
  color:var(--landing-ink);
  font-family:var(--font-body);
  overflow-x:hidden;
}

a{color:var(--mojaya-seashell);text-decoration:none}
a:hover{color:var(--mojaya-blush)}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* --------------------------------------------------------------------------
   Décor
   En desktop le décor est détaché du canvas et fixé au viewport : les deux
   photos remplissent l'écran quelle que soit sa hauteur, là où le canvas seul
   laisserait des bandes vides. Les proportions 964/1920 et 956/1920 de la
   source sont conservées.
   -------------------------------------------------------------------------- */
.backdrop{
  position:fixed;
  inset:0;
  overflow:hidden;
  background:var(--landing-veil);
  z-index:0;
}

/* Le pane est un cadre fixe qui recadre ; c'est son ::before qui respire.
   Sans ce cadre, un panneau agrandi déborde sur son voisin : la couture
   centrale se déplaçait alors jusqu'à 56 px et rognait le portrait. */
.backdrop__pane{
  position:absolute;
  top:0;
  height:100%;
  overflow:hidden;
  background-color:var(--landing-veil);
}

.backdrop__pane::before{
  content:"";
  position:absolute;
  inset:0;
  background-repeat:no-repeat;
  background-size:cover;
  transform-origin:50% 40%;
  animation:
    om-photo 2.6s cubic-bezier(0.22,1,0.36,1) both,
    om-breathe 34s ease-in-out 2.6s infinite alternate;
}

.backdrop__pane--left{
  left:0;
  width:50.209%;                                     /* 964 / 1920 */
}
.backdrop__pane--left::before{
  background-image:url("../assets/landing/photo-portrait.webp");
  background-position:center top;
}

.backdrop__pane--right{
  left:50.209%;
  width:49.791%;                                     /* 956 / 1920 */
}
/* Même durée que la moitié gauche : deux respirations désynchronisées font
   dériver les deux moitiés l'une par rapport à l'autre, très lisible sur un
   diptyque. Seule l'apparition garde son léger décalage. */
.backdrop__pane--right::before{
  background-image:url("../assets/landing/photo-ombres.webp");
  background-position:center center;
  transform-origin:50% 60%;
  animation-delay:0.15s, 2.75s;
}

/* Voile brun qui se retire à l'ouverture. */
.backdrop__veil{
  position:absolute;
  inset:0;
  background:var(--landing-veil);
  pointer-events:none;
  animation:om-veil 2.2s var(--ease-brand) both;
}

/* --------------------------------------------------------------------------
   Canvas
   -------------------------------------------------------------------------- */
.stage{
  position:relative;
  z-index:1;
  width:calc(1920 * var(--u));
  height:calc(var(--canvas-h) * var(--u));
  flex:none;
}

/* Marque ------------------------------------------------------------------ */
.stage__logo{
  position:absolute;
  display:block;
  left:calc(814.568 * var(--u));
  top:calc(49 * var(--u));
  width:calc(290.89 * var(--u));
  height:calc(95.734 * var(--u));
  animation:om-fade-in 1.6s var(--ease-brand) 0.5s both;
}
.stage__logo img{display:block;width:100%;height:100%}

/* Accroche ---------------------------------------------------------------- */
.stage__kicker{
  position:absolute;
  left:0;
  top:calc(323 * var(--u));
  width:100%;
  margin:0;
  font-family:var(--font-subtitle);
  font-weight:var(--weight-subtitle);
  font-size:calc(18.298 * var(--u));
  line-height:calc(21.97 * var(--u));
  text-transform:uppercase;
  text-align:center;
  white-space:nowrap;
  animation:om-fade-up 1.1s cubic-bezier(0.22,1,0.36,1) 1s both;
}

.stage__title{
  position:absolute;
  left:0;
  top:calc(366 * var(--u));
  width:100%;
  margin:0;
  font-family:"Lovelace Light",var(--font-title);
  font-weight:var(--weight-title);
  font-size:calc(73.84 * var(--u));
  line-height:calc(81.5 * var(--u));
  text-align:center;
}

/* Chaque ligne monte derrière un masque, comme dans la source. */
.stage__title span{display:block;overflow:hidden}
.stage__title span > span{
  animation:om-line 1.4s cubic-bezier(0.22,1,0.36,1) 1.2s both;
}
.stage__title span:nth-child(2) > span{animation-delay:1.38s}

.stage__lead{
  position:absolute;
  left:0;
  top:calc(545 * var(--u));
  width:100%;
  margin:0;
  font-size:calc(16.108 * var(--u));
  line-height:calc(22.077 * var(--u));
  text-align:center;
  animation:om-fade-up 1.1s cubic-bezier(0.22,1,0.36,1) 1.75s both;
}

/* Formulaire -------------------------------------------------------------- */
.signup{
  position:absolute;
  left:calc(813.924 * var(--u));
  top:calc(622 * var(--u));
  display:flex;
  flex-direction:column;
  gap:calc(6 * var(--u));
  margin:0;
  width:calc(292.152 * var(--u));
}

.signup__field{
  width:100%;
  height:calc(39.556 * var(--u));
  padding:0 calc(12.076 * var(--u));
  background:transparent;
  border:max(1px, calc(1 * var(--u))) solid var(--landing-ink);
  border-radius:var(--radius-none);
  font-family:var(--font-body);
  font-weight:var(--weight-body);
  font-size:var(--field-font-size);
  line-height:calc(20.714 * var(--u));
  color:var(--landing-ink);
  transition:background var(--duration-fade) var(--ease-brand);
  animation:om-fade-up 0.9s cubic-bezier(0.22,1,0.36,1) both;
}
.signup__field:nth-of-type(1){animation-delay:2s}
.signup__field:nth-of-type(2){animation-delay:2.12s}
.signup__field:nth-of-type(3){animation-delay:2.24s}
.signup__field:nth-of-type(4){animation-delay:2.36s}

.signup__field:hover{background:rgba(255,255,255,0.07)}
.signup__field::placeholder{
  color:var(--landing-ink);
  opacity:0.7;
  transition:opacity var(--duration-fade) var(--ease-brand);
}
.signup__field:focus::placeholder{opacity:0.35}
.signup__field:focus{
  outline:max(1px, calc(1 * var(--u))) solid var(--landing-ink);
  outline-offset:calc(2 * var(--u));
}
/* La validation ne se déclenche qu'après une tentative d'envoi. */
.signup[data-submitted] .signup__field:invalid{border-color:var(--mojaya-blush)}

.signup__submit{
  align-self:flex-start;
  margin-left:calc(37.076 * var(--u));
  margin-top:calc(32.776 * var(--u));           /* 38,776 mesurés − 6 de gap */
  width:calc(226 * var(--u));
  height:calc(44 * var(--u));
  display:flex;
  align-items:center;
  justify-content:center;
  padding:calc(3 * var(--u)) 0 0;
  border:none;
  border-radius:calc(10 * var(--u));
  background:var(--mojaya-logo-brown);
  font-family:var(--font-subtitle);
  font-weight:var(--weight-subtitle);
  font-size:calc(17.3 * var(--u));
  line-height:1;
  text-transform:uppercase;
  color:var(--mojaya-seashell);
  cursor:pointer;
  transition:
    background var(--duration-fade) var(--ease-brand),
    letter-spacing var(--duration-fade) var(--ease-brand);
  animation:om-fade-up 0.9s cubic-bezier(0.22,1,0.36,1) 2.55s both;
}
.signup__submit:hover{background:var(--mojaya-dark-brown);letter-spacing:0.12em}
.signup__submit:active{background:var(--mojaya-espresso)}
.signup__submit:focus-visible{
  outline:max(1px, calc(1 * var(--u))) solid var(--landing-ink);
  outline-offset:calc(2 * var(--u));
}
.signup__submit[disabled]{cursor:progress;opacity:0.75}

/* Retour d'envoi : positionné en absolu pour ne rien décaler du dessin. */
.signup__status{
  position:absolute;
  left:0;
  top:calc(268 * var(--u));
  width:100%;
  margin:0;
  min-height:calc(22 * var(--u));
  font-size:calc(13.5 * var(--u));
  line-height:calc(19 * var(--u));
  text-align:center;
  opacity:0;
  transition:opacity var(--duration-fade) var(--ease-brand);
}
.signup__status[data-state]{opacity:1}
.signup__status[data-state="error"]{color:var(--mojaya-blush)}

/* Pied de page ------------------------------------------------------------ */
.stage__note{
  position:absolute;
  left:calc(55 * var(--u));
  top:calc(902 * var(--u));
  width:calc(380 * var(--u));
  margin:0;
  font-size:calc(14.6 * var(--u));
  line-height:calc(23.7 * var(--u));
  animation:om-fade-in 1.4s var(--ease-brand) 2.8s both;
}

.stage__socials{
  position:absolute;
  left:calc(1659 * var(--u));
  top:calc(915 * var(--u));
  width:calc(217 * var(--u));
  height:calc(101 * var(--u));
  background:url("../assets/landing/socials.png") no-repeat 1.163% 50% / 139.631% 100%;
  animation:om-fade-in 1.4s var(--ease-brand) 3s both;
}

/* Bandes calées sur les icônes du sprite. Les bornes sont volontairement plus
   larges que les glyphes : à l'échelle mobile une icône ne fait que ~16 px,
   trop peu pour un doigt. Les mêmes valeurs couvrent les deux cadrages. */
.stage__socials-link{
  position:absolute;
  top:-15%;
  height:130%;
  display:block;
  border-radius:calc(6 * var(--u));
  transition:background-color var(--duration-fade) var(--ease-brand);
}
.stage__socials-link:hover{background-color:rgba(255,255,255,0.1)}
.stage__socials-link:focus-visible{
  outline:max(1px, calc(1 * var(--u))) solid var(--landing-ink);
  outline-offset:calc(2 * var(--u));
}
.stage__socials-link--instagram{left:0;width:40%}
.stage__socials-link--tiktok{left:40%;width:29%}
.stage__socials-link--facebook{left:69%;width:31%}

/* --------------------------------------------------------------------------
   Mobile — canvas 1080 × 1920
   Le décor repasse dans le canvas : le dégradé qui fond la photo dans le brun
   est calé sur la géométrie du canvas, et le brun du body prend le relais
   sous le canvas sans raccord visible.
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  :root{
    --u:calc(100vw / 1080);
    --canvas-h:1920;
  }

  body{align-items:flex-start}

  .backdrop{position:absolute;inset:0}

  .backdrop__pane--left{left:0;width:100%}

  .backdrop__pane--left::before{
    background-image:url("../assets/landing/photo-ombres.webp");
    background-position:top center;
    background-size:100% auto;
    transform-origin:50% 30%;
  }

  /* Le dégradé qui fond la photo dans le brun est porté par le cadre, pas par
     l'image : il reste calé sur le canvas pendant que la photo respire. */
  .backdrop__pane--left::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,
      rgba(45,34,28,0) calc(980 * var(--u)),
      var(--landing-veil) calc(1170 * var(--u)));
  }

  .backdrop__pane--right{display:none}

  .stage{width:calc(1080 * var(--u))}

  .stage__logo{
    left:calc(368.338 * var(--u));
    top:calc(70 * var(--u));
    width:calc(343.35 * var(--u));
    height:calc(113.015 * var(--u));
  }

  .stage__kicker{
    top:calc(375 * var(--u));
    font-size:calc(25.001 * var(--u));
    line-height:calc(30.017 * var(--u));
  }

  .stage__title{
    top:calc(447.414 * var(--u));
    font-size:calc(100.888 * var(--u));
    line-height:calc(111.353 * var(--u));
  }

  .stage__lead{
    top:calc(778 * var(--u));
    font-size:calc(32.215 * var(--u));
    line-height:calc(44.154 * var(--u));
  }

  .signup{
    left:calc(238.772 * var(--u));
    top:calc(929 * var(--u));
    gap:calc(21 * var(--u));
    width:calc(602.456 * var(--u));
  }

  :root{--field-font-size:calc(31.165 * var(--u))}

  .signup__field{
    height:calc(81.569 * var(--u));
    padding:0 calc(24.902 * var(--u));
    border-width:max(1px, calc(2 * var(--u)));
    line-height:calc(42.714 * var(--u));
  }

  .signup__submit{
    margin-left:calc(70.605 * var(--u));
    margin-top:calc(20.99 * var(--u));           /* 41,99 mesurés − 21 de gap */
    width:calc(466.042 * var(--u));
    height:calc(90.734 * var(--u));
    padding-top:calc(6 * var(--u));
    border-radius:calc(20.621 * var(--u));
    font-size:calc(35.675 * var(--u));
  }

  /* Entre le bas du bouton (1451) et les icônes (1501) : la bande est étroite,
     les messages sont calibrés pour tenir sur une ligne. */
  .signup__status{
    top:calc(528 * var(--u));
    min-height:calc(34 * var(--u));
    font-size:calc(28 * var(--u));
    line-height:calc(34 * var(--u));
  }

  .stage__socials{
    left:calc(401 * var(--u));
    top:calc(1501 * var(--u));
    width:calc(283 * var(--u));
    height:calc(142 * var(--u));
    background-position:16.368% 50%;
    background-size:150.530% 100%;
  }

  .stage__note{
    left:calc(69 * var(--u));
    top:calc(1721 * var(--u));
    width:calc(739.8 * var(--u));
    font-size:calc(29.172 * var(--u));
    line-height:calc(47.493 * var(--u));
  }
}

/* Répété après le bloc mobile pour rester prioritaire sur sa redéfinition. */
@media (pointer:coarse) and (max-width:900px){
  :root{--field-font-size:max(16px, calc(31.165 * var(--u)))}
}

/* --------------------------------------------------------------------------
   Animations
   -------------------------------------------------------------------------- */
@keyframes om-fade-up{
  from{opacity:0;transform:translateY(26px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes om-fade-in{
  from{opacity:0}
  to{opacity:1}
}
@keyframes om-line{
  from{transform:translateY(115%)}
  to{transform:translateY(0)}
}
@keyframes om-photo{
  from{opacity:0;transform:scale(1.07)}
  to{opacity:1;transform:scale(1)}
}
@keyframes om-breathe{
  from{transform:scale(1)}
  to{transform:scale(1.03)}
}
@keyframes om-veil{
  from{opacity:0.55}
  to{opacity:0}
}

/* La respiration des photos tourne en boucle : elle doit pouvoir être coupée. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    animation-delay:0ms !important;
    transition-duration:0.01ms !important;
  }
  .backdrop__veil{display:none}
}