/* ==========================================================================
   LA RUCHE 31 — Transition d'entrée « La coulée »
   ==========================================================================

   POURQUOI CETTE VERSION
   La précédente empilait huit effets en 1,25 s : une abeille détourée en
   rond traversait l'écran avec deux ailes qui ne tenaient à rien, pendant
   qu'un rideau, des alvéoles, un mot et un éclat se disputaient l'attention.
   Trop de choses, trop vite, rien qui se pose.

   L'IDÉE, UNE SEULE
   Le logo de la marque, c'est du miel qui dégouline. L'animation ne fait
   donc qu'une chose : du miel coule du haut de l'écran, s'arrête, forme des
   fils qui s'étirent — et l'abeille apparaît dessous.

   Le miel est visqueux : il est LENT. C'est ce qui justifie la durée et ce
   qui fait la classe. On passe de 1250 ms à 2800 ms.

   DÉROULÉ
        0 ─  420   le noir chaud recouvre la page
      260 ─ 1480   la nappe de miel descend et se pose au tiers de l'écran
      900 ─ 1800   les alvéoles s'allument doucement dans le fond
     1160 ─ 2160   cinq fils s'étirent sous la nappe — jamais avant
                   qu'elle soit posée, sinon ils pendraient dans le vide
     1540 ─ 2340   une goutte gonfle au bout de chaque fil
     1800 ─ 2500   le médaillon de l'abeille remonte et se pose
     2040 ─ 2620   une onde dorée s'en échappe, une seule fois
     2120 ─ 2760   le nom apparaît, ses deux moitiés s'écartent
     2320 ─ 2800   un éclat balaie le nom, puis tout tient en place

   RÈGLE TENUE : aucune @keyframes n'anime autre chose que transform et
   opacity. C'est ce qui garantit que ça reste fluide sur un vieux téléphone.
   ========================================================================== */


/* ==========================================================================
   LE VOILE
   ========================================================================== */

.b-tr{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  overflow:hidden;
  pointer-events:none;
}

.b-tr.is-on{
  display:block;
  pointer-events:auto;      /* on gèle les clics pendant la transition */
}


/* ==========================================================================
   1. LE NOIR CHAUD
   ========================================================================== */

.b-tr__nuit{
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(96% 52% at 50% 118%, rgba(245,179,26,.13) 0%, rgba(245,179,26,0) 62%),
    radial-gradient(70% 40% at 50% -6%,  rgba(232,163,23,.16) 0%, rgba(232,163,23,0) 68%),
    var(--r-noir, #0B0A07);
  opacity:0;
  animation:b-nuit 420ms cubic-bezier(.4,0,.2,1) both;
}

@keyframes b-nuit{
  from{ opacity:0; transform:scale(1.03); }
  to  { opacity:1; transform:scale(1);    }
}


/* ==========================================================================
   2. LES ALVÉOLES
   ==========================================================================
   Une trame hexagonale très discrète dans le fond. Elle donne de la
   matière sans jamais attirer l'œil. */

.b-tr__alveoles{
  position:absolute;
  inset:-8%;
  opacity:0;
  transform:scale(1.06);
  background-image:
    repeating-linear-gradient( 60deg, rgba(245,179,26,.13) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(-60deg, rgba(245,179,26,.13) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(  0deg, rgba(245,179,26,.08) 0 1px, transparent 1px 66px);
  -webkit-mask-image:radial-gradient(62% 48% at 50% 56%, #000 0%, transparent 78%);
          mask-image:radial-gradient(62% 48% at 50% 56%, #000 0%, transparent 78%);
  animation:b-alveoles 900ms cubic-bezier(.22,.61,.36,1) 900ms both;
}

@keyframes b-alveoles{
  0%   { opacity:0;   transform:scale(1.06); }
  60%  { opacity:.34; transform:scale(1);    }
  100% { opacity:.20; transform:scale(1);    }
}


/* ==========================================================================
   3. LA COULÉE
   ==========================================================================
   La nappe descend d'un mouvement visqueux : lente à se décider, puis elle
   file, puis elle s'installe. La courbe fait tout le travail. */

.b-tr__coulee{
  position:absolute;
  top:0;
  left:-2%;
  right:-2%;
  height:38%;
  transform:translate3d(0,-102%,0);
  animation:b-coulee 1220ms cubic-bezier(.62,.02,.24,1) 260ms both;
}

@keyframes b-coulee{
  0%   { transform:translate3d(0,-102%,0); }
  /* Le miel dépasse légèrement, puis se rétracte : c'est la tension de
     surface, et c'est ce détail qui fait qu'on y croit. */
  76%  { transform:translate3d(0,4%,0);    }
  100% { transform:translate3d(0,0,0);     }
}

/* Le corps de la nappe : plus clair en haut, comme la lumière qui
   traverse le miel, plus dense en bas. */
.b-tr__nappe{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,
      #FFF0BE 0%,
      var(--r-or-clair, #FFD966) 18%,
      var(--r-or, #F5B31A) 52%,
      #D9950F 82%,
      var(--r-or-fonce, #B87A0B) 100%);
}

/* Le bord bas, irrégulier : quatre bombements de tailles différentes.
   Un bord régulier trahirait tout de suite le dessin. */
.b-tr__nappe::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height:52px;
  background:
    radial-gradient(46px 50px at 12% 0%, var(--r-or-fonce, #B87A0B) 47%, transparent 48%),
    radial-gradient(62px 34px at 31% 0%, var(--r-or-fonce, #B87A0B) 47%, transparent 48%),
    radial-gradient(38px 46px at 49% 0%, var(--r-or-fonce, #B87A0B) 47%, transparent 48%),
    radial-gradient(70px 28px at 68% 0%, var(--r-or-fonce, #B87A0B) 47%, transparent 48%),
    radial-gradient(44px 40px at 88% 0%, var(--r-or-fonce, #B87A0B) 47%, transparent 48%);
  background-repeat:no-repeat;
}

/* Le liseré de surface, tout en haut : le reflet sur le miel. */
.b-tr__nappe::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:3px;
  background:linear-gradient(90deg,
    rgba(255,247,226,0) 0%,
    rgba(255,247,226,.85) 22%,
    rgba(255,255,255,.95) 46%,
    rgba(255,247,226,.7) 68%,
    rgba(255,247,226,0) 100%);
}


/* ==========================================================================
   4. LES FILS
   ==========================================================================
   Chaque fil porte ses propres réglages en variables : position, longueur,
   épaisseur et retard. Ils ne tombent donc jamais ensemble — c'est ce
   décalage qui donne l'impression du vrai. */

.b-tr__fil{
  position:absolute;
  top:calc(38% - 2px);
  left:var(--x);
  width:var(--e, 7px);
  height:var(--h, 90px);
  margin-left:calc(var(--e, 7px) / -2);

  border-radius:0 0 999px 999px;
  transform-origin:50% 0;
  transform:scaleY(0);

  background:linear-gradient(180deg,
    var(--r-or-clair, #FFD966) 0%,
    var(--r-or, #F5B31A) 34%,
    #C98B0C 78%,
    var(--r-or-fonce, #B87A0B) 100%);

  animation:b-fil 760ms cubic-bezier(.34,.02,.2,1) var(--d, 0ms) both;
}

/* La goutte au bout du fil, qui gonfle sans jamais se détacher. */
.b-tr__fil::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:calc(var(--e, 7px) / -1.35);
  width:calc(var(--e, 7px) * 1.85);
  height:calc(var(--e, 7px) * 1.85);
  margin-left:calc(var(--e, 7px) * -0.925);
  border-radius:50%;
  background:radial-gradient(60% 60% at 36% 30%,
    #FFF0BE 0%, var(--r-or, #F5B31A) 52%, var(--r-or-fonce, #B87A0B) 100%);
  transform:scale(0);
  animation:b-goutte 560ms cubic-bezier(.3,.9,.4,1) calc(var(--d, 0ms) + 380ms) both;
}

@keyframes b-fil{
  0%   { transform:scaleY(0);   }
  /* Le fil s'étire trop loin, puis remonte un peu : le miel se rétracte. */
  74%  { transform:scaleY(1.1); }
  100% { transform:scaleY(1);   }
}

@keyframes b-goutte{
  0%   { transform:scale(0);   }
  70%  { transform:scale(1.12);}
  100% { transform:scale(1);   }
}


/* ==========================================================================
   5. LE MÉDAILLON
   ==========================================================================
   L'abeille n'est pas un sprite détouré : c'est une photo ronde. On la
   présente donc pour ce qu'elle est — un médaillon cerclé d'or, qui monte
   et se pose. Plus de fausses ailes accrochées dans le vide. */

.b-tr__sceau{
  position:absolute;
  top:56%;
  left:50%;
  width:clamp(104px, 30vw, 148px);
  height:clamp(104px, 30vw, 148px);
  margin:calc(clamp(104px, 30vw, 148px) / -2) 0 0
         calc(clamp(104px, 30vw, 148px) / -2);

  padding:3px;
  border-radius:50%;
  background:linear-gradient(165deg,
    #FFF0BE 0%, var(--r-or-clair, #FFD966) 22%,
    var(--r-or, #F5B31A) 52%, #A96E09 84%, #FFE9A8 100%);
  box-shadow:
    0 10px 28px rgba(0,0,0,.5),
    0 0 0 1px rgba(122,78,7,.6);

  opacity:0;
  animation:b-sceau 700ms cubic-bezier(.24,.7,.3,1) 1800ms both;
}

@keyframes b-sceau{
  0%   { opacity:0; transform:translate3d(0,26px,0) scale(.58); }
  62%  { opacity:1; transform:translate3d(0,-4px,0) scale(1.07); }
  100% { opacity:1; transform:translate3d(0,0,0)    scale(1);    }
}

.b-tr__abeille{
  display:block;
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
}

/* L'onde : un seul anneau qui s'échappe et disparaît. */
.b-tr__onde{
  position:absolute;
  inset:-3px;
  border-radius:50%;
  border:2px solid var(--r-or-clair, #FFD966);
  opacity:0;
  animation:b-onde 580ms cubic-bezier(.2,.6,.3,1) 2040ms both;
}

@keyframes b-onde{
  0%   { opacity:.8; transform:scale(1);   }
  100% { opacity:0;  transform:scale(1.7); }
}


/* ==========================================================================
   6. LE NOM
   ==========================================================================
   Ses deux moitiés arrivent en s'écartant légèrement. On ne peut pas animer
   letter-spacing sans faire ramer le rendu, alors on déplace les blocs. */

.b-tr__nom{
  position:absolute;
  left:0;
  right:0;
  top:calc(56% + clamp(104px, 30vw, 148px) / 2 + 26px);
  margin:0;
  padding:0 20px;

  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:.34em;

  font-size:clamp(21px, 6.8vw, 31px);
  font-weight:900;
  letter-spacing:.16em;
  line-height:1.1;
  white-space:nowrap;

  background:linear-gradient(96deg,
    #B87A0B 0%, #FFD966 32%, #FFF7E2 50%, #FFD966 68%, #B87A0B 100%);
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
  color:var(--r-creme, #F7EEDC);
}

.b-tr__nom > span{
  display:inline-block;
  opacity:0;
}
.b-tr__nom > span:nth-child(1){
  animation:b-nom-g 560ms cubic-bezier(.22,.61,.36,1) 2120ms both;
}
.b-tr__nom > span:nth-child(2){
  animation:b-nom-d 560ms cubic-bezier(.22,.61,.36,1) 2200ms both;
}

@keyframes b-nom-g{
  0%   { opacity:0; transform:translate3d(14px,6px,0); }
  100% { opacity:1; transform:translate3d(0,0,0);      }
}
@keyframes b-nom-d{
  0%   { opacity:0; transform:translate3d(-14px,6px,0); }
  100% { opacity:1; transform:translate3d(0,0,0);       }
}

/* L'éclat, en dernier : il balaie le nom et clôt la séquence. */
.b-tr__lueur{
  position:absolute;
  left:-46%;
  top:calc(56% + clamp(104px, 30vw, 148px) / 2 + 14px);
  width:44%;
  height:58px;
  transform:translate3d(0,0,0) skewX(-16deg);
  background:linear-gradient(90deg,
    rgba(255,247,226,0) 0%,
    rgba(255,247,226,.16) 42%,
    rgba(255,247,226,.42) 50%,
    rgba(255,247,226,.16) 58%,
    rgba(255,247,226,0) 100%);
  opacity:0;
  animation:b-lueur 480ms cubic-bezier(.4,0,.3,1) 2320ms both;
}

@keyframes b-lueur{
  0%   { opacity:0; transform:translate3d(0,0,0)    skewX(-16deg); }
  22%  { opacity:1; }
  100% { opacity:0; transform:translate3d(330%,0,0) skewX(-16deg); }
}


/* ==========================================================================
   ÉCRANS COURTS
   ==========================================================================
   Sur un petit écran, la nappe descend moins bas et le médaillon remonte,
   sinon le nom finirait sous le bord. */

@media (max-height:640px){
  .b-tr__coulee{ height:30%; }
  .b-tr__fil{ top:calc(30% - 2px); }
  .b-tr__sceau{ top:58%; width:clamp(88px, 24vw, 112px); height:clamp(88px, 24vw, 112px);
                margin:calc(clamp(88px, 24vw, 112px) / -2) 0 0 calc(clamp(88px, 24vw, 112px) / -2); }
  .b-tr__nom{ top:calc(58% + clamp(88px, 24vw, 112px) / 2 + 20px); }
  .b-tr__lueur{ top:calc(58% + clamp(88px, 24vw, 112px) / 2 + 8px); }
}


/* ==========================================================================
   MOUVEMENT RÉDUIT
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  .b-tr,
  .b-tr.is-on{ display:none !important; }
}