/* ==========================================================================
   Jetons de design — seul endroit où l'on touche aux couleurs, aux textures
   et à la géométrie de l'enveloppe.
   Les *durées* d'animation ne sont pas ici : elles vivent dans
   assets/invitation/js/config.js, parce que c'est GSAP qui pilote la chorégraphie.
   ========================================================================== */

:root {
  /* ---- Palette ---- */
  --bordeaux:      #4a1d2a;   /* fond de page, haut du dégradé */
  --bordeaux-fonce:#3a141f;   /* fond de page, bas du dégradé */
  --ivoire:        #efe9df;   /* papier de la carte */
  --enveloppe:     #e4e7ea;   /* papier de l'enveloppe, face éclairée */
  --enveloppe-ombre:#cfd4da;  /* papier de l'enveloppe, face à l'ombre */
  --encre:         #6b3a4b;   /* texte courant de la carte */
  --or:            #a98a5c;   /* filets, majuscules d'accroche, boutons */

  /* ---- Textures ---- */
  --tex-enveloppe: url("../../images/envelope-b3Gtz82.jpg");
  --tex-sceau:     url("../../images/seal-lahjPyL.png");
  --tex-dentelle:  url("../../images/lace-Znrk7WB.png");
  --tex-photo:     url("../../images/photo-eIC2sjr.png");
  --tex-fond:      url("../../images/background-hIFvjhX.jpg");
  --tex-ornement-haut: url("../../images/ornement_left_up-WiE9jiS.png");
  --tex-ornement-bas:  url("../../images/ornement_angle_right_bottom-BVFH5nC.png");

  /* ---- Géométrie du V ----
     Nombres SANS unité, exprimant un pourcentage de la hauteur d'écran.
     Ils doivent rester des nombres nus car --fold les divise l'un par
     l'autre : calc() n'autorise la division que par un nombre, jamais par
     un pourcentage. `calc(32% / 56%)` est du CSS invalide, silencieusement
     ignoré — c'est ce qui faisait disparaître toute la découpe du rabat. */
  --v-cote: 36;               /* hauteur où le V rejoint les bords gauche/droit */
  --v-pointe: 60;             /* hauteur de la pointe du V, où se pose le sceau */

  /* Les deux mêmes valeurs, utilisables comme longueurs */
  --v-cote-h:   calc(var(--v-cote) * 1%);
  --v-pointe-h: calc(var(--v-pointe) * 1%);

  /* Ligne de pli, exprimée dans le repère du rabat — dont la hauteur vaut
     justement --v-pointe. D'où le rapport des deux. */
  --pli: calc(var(--v-cote) / var(--v-pointe) * 100%);

  /* ---- Sceau ----
     Le sceau est une GALETTE de cire, pas un décalque : sa face se décolle du
     papier quand le rabat se lève, et sa tranche apparaît entre les deux.

     Seule son allure est ici. Son ÉPAISSEUR, elle, vit dans
     assets/invitation/js/config.js (`SCEAU`) : c'est le modèle d'éclairage qui
     s'en sert pour calculer, image par image, l'élévation de la face, la
     longueur de l'ombre portée et le décalage de l'estampage. La feuille de
     style ne connaît que le résultat, par les jetons `--sceau-*` que pose
     assets/invitation/js/lighting.js. */
  --sceau-taille: 112px;

  /* Le galbe : la face est un peu plus étroite que la base. C'est ce qui
     laisse voir un liseré de tranche tout autour, même sceau fermé — la
     lèvre de cire écrasée sous le cachet.

     C'est LE réglage du cerne au repos, et de lui seul : sceau fermé, la face
     n'est pas encore soulevée, et cet écart est donc la seule tranche
     visible. Dès que le rabat se lève, l'élévation le dépasse d'un ordre de
     grandeur et le galbe ne compte plus. Le descendre allège la lèvre sans
     rien retirer à l'ouverture. */
  --sceau-galbe: .985;

  /* Force des deux calques d'estampage. Ils se compensent sur les aplats —
     l'un éclaircit autant que l'autre assombrit — et ne se voient donc que
     sur les arêtes du monogramme. Monter la valeur creuse le relief ; au-delà
     de .4, les aplats se mettent à baver. */
  --sceau-relief-force: .3;

  /* ---- Dentelle ----
     Hauteur de la bande, mesurée perpendiculairement au bras du V. Sa largeur
     n'est pas réglable : elle suit le ratio de l'asset, et le motif se répète
     autant de fois que le bras est long. */
  --dentelle-hauteur: 15vh;
  /* Débord au-delà des coins du V, vers l'extérieur seulement. S'ajoute au
     recul minimal que le CSS calcule pour sortir la coupe de l'écran. */
  --dentelle-rallonge: 6vh;
  /* Décalage de l'ancrage des rubans par rapport aux coins du V, en repère
     écran : x vers l'extérieur, y vers le bas. Symétrique sur les deux bras.
     Exprimé en vh comme toute la géométrie du V, pour rester proportionnel
     d'un écran à l'autre.

     ATTENTION : ces deux décalages font descendre le point de rencontre des
     rubans de (ancre-y + ancre-x × tan(angle)) sous la pointe du V, donc
     sous le sceau. C'est un choix esthétique assumé : pour garder la pointe
     pile sur le sceau, les laisser à 0 et descendre le V lui-même
     (--v-cote / --v-pointe). */
  --dentelle-ancre-x: 5.02vh;
  --dentelle-ancre-y: 7.45vh;

  /* Glissement perpendiculaire à l'arête (repère du bras, après rotation).
     Redondant avec --dentelle-ancre-y dans la plupart des cas ; utile quand
     on veut décoller la dentelle de l'arête sans la déplacer le long. */
  --dentelle-decalage: 0vh;

  /* ---- Récit défilant ----
     La calligraphie porte les textes des chapitres. Les *durées* de leur
     révélation ne sont pas ici mais dans assets/invitation/js/config.js : c'est GSAP qui
     les anime, mot par mot. */
  --calligraphie: "Parisienne", "Cormorant", cursive;
  --calligraphie-taille: clamp(30px, 6.4vw, 58px);
  --calligraphie-interligne: 1.55;
  --chapitre-largeur: min(84vw, 760px);

  /* Course de défilement d'un chapitre : la distance que le lecteur parcourt
     pendant que son texte s'écrit, se lit, puis s'efface.

     Ce n'est ici qu'un REPLI. La vraie course est posée par le JS, chapitre
     par chapitre : elle se déduit de la durée de sa timeline, donc du nombre
     de mots à écrire, ce que la feuille de style ne peut pas savoir. Le
     réglage de la lenteur du récit est donc `courseParSeconde` dans
     assets/invitation/js/config.js, et non cette valeur. */
  --chapitre-course: 180vh;

  /* Voile posé derrière chaque chapitre : le texte doit rester lisible
     par-dessus la dentelle et le papier de l'enveloppe. */
  --chapitre-voile: rgba(239, 233, 223, .82);

  /* ---- Fond photographique ----
     Couleur du voile qui éclaircit la photo à mesure qu'on descend vers le
     premier chapitre. Seule la COULEUR est ici : l'opacité qu'il atteint,
     comme le flou de la photo, sont des amplitudes d'animation et vivent
     donc dans assets/invitation/js/config.js (`FOND`).

     Même ivoire que --chapitre-voile, et ce n'est pas un hasard : les deux
     se superposent au centre de l'écran, et une seconde teinte y ferait
     apparaître un halo. */
  --fond-voile: var(--ivoire);

  /* ---- Ornements ----
     Les deux angles fleuris posés en haut à gauche et en bas à droite.

     La valeur est la HAUTEUR de l'ornement, et non sa largeur : le motif est
     un L dont le bras long descend le long du bord, c'est donc lui qui doit
     rester à la mesure de l'écran. La largeur s'en déduit par le rapport de
     l'image (voir ornaments.css).

     Deux bornes et pas une : `vh` cadre l'ornement sur un écran de bureau,
     `vw` l'empêche de barrer un téléphone en portrait, où 46vh feraient
     presque toute la largeur. */
  --ornement-taille: min(58vh, 78vw);

  /* Il ne doit pas rivaliser avec le texte : c'est un encadrement, pas un
     sujet. L'aquarelle est déjà claire, ce retrait suffit à la faire passer
     derrière la calligraphie sans avoir à la délaver. */
  --ornement-presence: .85;

  /* ---- Divers ---- */
  --reveal-taille: min(62vw, 300px);   /* diamètre du disque à gratter */
  --ease-doux: cubic-bezier(.4, 0, .2, 1);
}