/* Le Cercle — intro mobile. Source unique, aucune librairie. */
.lc-intro,.lcHeroCardSlot{display:none}

@media (max-width:819px){
  /* La vraie carte du hero reste dans le flux pour être mesurable pendant l'intro. */
  body.public .hero{
    min-height:auto;
    display:flex;
    flex-direction:column;
    gap:0;
    padding:0 18px 54px;
    overflow:visible;
  }
  body.public .hero::before{pointer-events:none}
  body.public .lcHeroCardSlot{
    display:block;
    order:1;
    width:min(74vw,290px);
    margin:26px auto 24px;
    position:relative;
    z-index:2;
    opacity:1;
    transform:translateY(0);
  }
  body.public .heroCopy{
    order:2;
    width:100%;
    padding:8px 0 0;
  }
  body.public .hero3dMedia{display:none!important}

  /* Le logo et la carte d'arrivée sont invisibles uniquement pendant la première intro. */
  html.lc-anim:not(.lc-done) body.public [data-lc-logo],
  html.lc-anim:not(.lc-done) body.public [data-lc-card]{opacity:0!important}
  html.lc-anim:not(.lc-reveal) body.public .heroCopy{
    opacity:0;
    transform:translateY(18px);
  }
  html.lc-reveal body.public .heroCopy{
    opacity:1;
    transform:none;
    transition:opacity .65s ease,transform .65s cubic-bezier(.16,1,.3,1);
  }
  html.lc-done body.public [data-lc-logo]{
    opacity:1;
    transition:opacity .25s ease;
  }
  html.lc-done body.public .lcHeroCardSlot{
    opacity:1;
    transition:opacity .25s ease;
    animation:lc-hero-float 7s ease-in-out .4s infinite;
  }
  @keyframes lc-hero-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

  /* La cinématique et le hero utilisent exactement la carte graphique du site. */
  .lc-card-front{
    overflow:hidden;
    background:#05050a;
    transform:translateZ(1.5px);
  }
  .lcBaseCardVisual{
    display:block;
    width:100%;
    height:100%;
    object-fit:fill;
    border-radius:5.2% / 8.2%;
    user-select:none;
    -webkit-user-drag:none;
    pointer-events:none;
  }
  .lcHeroCardSlot .lcBaseCardVisual{
    width:100%;
    height:auto;
    aspect-ratio:1024/646;
    object-fit:fill;
    filter:drop-shadow(0 18px 34px rgba(0,0,0,.38));
  }

  /* Reflet après l'atterrissage sur la carte du hero. */
  .lcHeroCardSlot::after{
    content:"";position:absolute;inset:-30% auto -30% -42%;width:32%;
    background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.02) 28%,rgba(243,238,229,.28) 50%,rgba(255,255,255,.02) 72%,transparent 100%);
    transform:translateX(-180%) skewX(-12deg);pointer-events:none;z-index:4
  }
  html.lc-done .lcHeroCardSlot::after{animation:lc-hero-shine 1.6s cubic-bezier(.4,0,.2,1) .15s 1 both}
  @keyframes lc-hero-shine{from{transform:translateX(-180%) skewX(-12deg)}to{transform:translateX(520%) skewX(-12deg)}}

  /* Overlay plein écran. */
  .lc-intro{
    position:fixed;inset:0;z-index:10000;display:block;background:#05050a;color:#f3eee5;
    animation:lc-intro-failsafe 10.35s linear forwards
  }
  @keyframes lc-intro-failsafe{0%,96%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden;pointer-events:none}}
  .lc-stage{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    perspective:1300px;perspective-origin:50% 40%;opacity:0;
    animation:lc-stage-in 1.4s ease .2s both
  }
  @keyframes lc-stage-in{from{opacity:0}to{opacity:1}}
  .lc-cardfly{
    position:absolute;left:50%;top:46%;width:min(78vw,330px);aspect-ratio:1024/646;
    translate:-50% -50%;transform-style:preserve-3d;will-change:transform;
    transform-origin:50% 50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;
    -webkit-font-smoothing:antialiased
  }
  .lc-card3d{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;transform-origin:50% 50%;
    animation:lc-spin3d 3.2s cubic-bezier(.2,.62,.12,1) .2s both,lc-hover 1.6s cubic-bezier(.45,0,.3,1) 3.4s forwards
  }
  @keyframes lc-spin3d{
    0%{transform:translate3d(0,55%,-1100px) rotateX(58deg) rotateY(-540deg) rotateZ(-14deg)}
    100%{transform:rotateX(9deg) rotateY(-18deg) rotateZ(0deg)}
  }
  @keyframes lc-hover{
    0%{transform:rotateX(9deg) rotateY(-18deg)}
    55%{transform:translate3d(0,-2%,40px) rotateX(3deg) rotateY(7deg)}
    100%{transform:none}
  }
  .lc-card-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-style:preserve-3d;border-radius:5.2% / 8.2%}
  .lc-card-back{
    transform:rotateY(180deg) translateZ(1.5px);display:grid;place-items:center;overflow:hidden;
    background:
      linear-gradient(110deg,rgba(255,255,255,.10),transparent 18%,rgba(255,255,255,.06) 34%,transparent 52%,rgba(255,255,255,.08) 72%,transparent),
      repeating-linear-gradient(96deg,rgba(255,255,255,.035) 0 1px,rgba(0,0,0,.02) 1px 3px),
      linear-gradient(135deg,#8a6f42,#d6bf92 48%,#8a6f42);
    border:1px solid rgba(243,238,229,.42);color:#2b2113
  }
  .lc-card-back strong{font-family:Georgia,serif;letter-spacing:.24em;font-size:7cqw;text-shadow:0 1px rgba(255,255,255,.22)}
  .lc-edge{position:absolute;display:block;background:linear-gradient(90deg,#8a6f42,#f0dcb2,#8a6f42);transform-style:preserve-3d}
  .lc-edge-left,.lc-edge-right{top:5.2%;height:89.6%;width:3px;transform-origin:center}
  .lc-edge-left{left:-1.5px;transform:rotateY(90deg)}
  .lc-edge-right{right:-1.5px;transform:rotateY(90deg)}
  .lc-edge-top,.lc-edge-bottom{left:5.2%;width:89.6%;height:3px;transform-origin:center}
  .lc-edge-top{top:-1.5px;transform:rotateX(90deg)}
  .lc-edge-bottom{bottom:-1.5px;transform:rotateX(90deg)}

  .lc-wide-shine,.lc-fine-shine{position:absolute;pointer-events:none;z-index:5;mix-blend-mode:screen}
  .lc-wide-shine{
    inset:-35%;background:linear-gradient(112deg,transparent 30%,rgba(255,255,255,.02) 39%,rgba(243,238,229,.20) 50%,rgba(255,255,255,.025) 61%,transparent 70%);
    transform:translate(-45%,20%);animation:lc-wide-shine 4.8s cubic-bezier(.4,0,.2,1) .2s both
  }
  @keyframes lc-wide-shine{from{transform:translate(-45%,20%)}to{transform:translate(28%,-18%)}}
  .lc-fine-shine{
    top:-35%;bottom:-35%;left:20%;width:18%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.34),transparent);
    transform:translateX(-70%);opacity:0;animation:lc-fine-shine 1.5s cubic-bezier(.45,0,.2,1) 3s both
  }
  @keyframes lc-fine-shine{0%{opacity:0;transform:translateX(-70%)}18%{opacity:1}100%{opacity:0;transform:translateX(70%)}}


  .lc-wordfly{
    position:absolute;left:50%;top:calc(46% + min(78vw,330px)/2.65);transform:translateX(-50%);
    display:flex;justify-content:center;white-space:nowrap;font-family:Georgia,serif;font-size:20px;letter-spacing:.25em;color:#d6bf92;will-change:transform
  }
  .lc-wordfly span{display:inline-block;opacity:0;transform:translateY(70%);animation:lc-letter-in 1.2s cubic-bezier(.16,1,.3,1) calc(3.5s + var(--i)*70ms) both}
  @keyframes lc-letter-in{to{opacity:1;transform:translateY(0)}}
  .lc-skip{
    position:absolute;left:50%;bottom:max(28px,env(safe-area-inset-bottom));transform:translateX(-50%);
    padding:8px 13px;border:1px solid rgba(214,191,146,.22);border-radius:999px;background:rgba(255,255,255,.025);
    color:#8b8796;font-size:12px;letter-spacing:.08em;cursor:pointer
  }

  /* Pendant le vol : le site apparaît sous l'overlay qui s'efface. */
  html.lc-reveal body.public{overflow:auto!important}

  @media (prefers-reduced-motion:reduce){
    .lc-card3d,.lc-wide-shine,.lc-fine-shine,.lc-wordfly span{animation:none!important}
    .lc-stage{animation:none!important;opacity:1}
    .lc-card3d{transform:none!important}
    .lc-wordfly span{opacity:1;transform:none}
  }
}

@media (min-width:820px){.lc-intro,.lcHeroCardSlot{display:none!important}}