html.lisra-intro-pending body{visibility:hidden}
html.lisra-intro-pending{background:#0d0b08}
html.lisra-intro-active,html.lisra-intro-active body{overflow:hidden}
/* Skip layout/paint for the hidden page while the intro runs. This is much
   lighter than pausing every descendant animation with a universal selector. */
html.lisra-intro-freeze body>:not(.lisra-intro):not(script){content-visibility:hidden!important}
.lisra-intro{
  position:fixed;
  inset:0;
  z-index:10000;
  display:grid;
  place-items:center;
  visibility:visible!important;
  overflow:hidden;
  opacity:1;
  background:
    radial-gradient(circle at 50% 47%,rgba(184,136,52,.13),transparent 24%),
    linear-gradient(150deg,#0d0b08 0%,#15110c 52%,#090806 100%);
  transition:opacity .52s cubic-bezier(.4,0,.2,1),visibility .52s;
}
.lisra-intro::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.26;
  background-image:linear-gradient(rgba(210,174,101,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(210,174,101,.03) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(circle at center,#000,transparent 70%);
  mask-image:radial-gradient(circle at center,#000,transparent 70%);
}
.lisra-intro.is-leaving{opacity:0;visibility:hidden}
/* While armed, every animation inside the intro is frozen at its opening frame
   (line undrawn, real artwork/dot/sheen at opacity 0, 3D turn untouched) so the
   overlay can be mounted and shown the instant the script runs, and only starts
   actually playing once the page + artwork are ready (JS removes this class). */
.lisra-intro.lisra-armed *{animation-play-state:paused!important}
.lisra-intro-stage{
  position:relative;
  width:118px;
  height:118px;
  display:grid;
  place-items:center;
  perspective:800px;
  transform-style:preserve-3d;
  contain:layout paint style;
  isolation:isolate;
}
/* The line draws flat & untransformed; the 3D turn runs AFTER, on the static
   artwork, so it stays a smooth GPU-composited layer. */
.lisra-intro-logo{
  width:96px;
  height:96px;
  overflow:visible;
  transform-origin:50% 56%;
  transform-style:preserve-3d;
  will-change:transform;
  backface-visibility:hidden;
  transform:translateZ(0);
  animation:lisraTurn3d .96s cubic-bezier(.24,.74,.22,1) 1.72s both;
}

/* --- Draw layer: a gold-stroked ribbon that draws itself (cheap, 60fps) --- */
.lisra-logo-draw{animation:lisraDrawFade .34s cubic-bezier(.4,0,.2,1) 1.58s forwards}
.lisra-logo-stroke{
  fill:none;
  stroke:url(#lisraGold);
  stroke-width:140;
  stroke-linecap:round;
  stroke-linejoin:round;
  path-length:1;
  stroke-dasharray:1;
  stroke-dashoffset:1;
}
.lisra-logo-stroke-l{animation:lisraTrace .88s cubic-bezier(.38,.02,.18,1) .08s forwards}
.lisra-logo-stroke-a{animation:lisraTrace .9s cubic-bezier(.36,.03,.18,1) .76s forwards}
.lisra-logo-stroke-i{animation:lisraTrace .52s cubic-bezier(.34,.04,.2,1) 1.52s forwards}
/* Luminous pen tip that glides along the ribbon while it draws. */
.lisra-logo-head{
  fill:none;
  stroke:rgba(255,238,186,.95);
  stroke-width:28;
  stroke-linecap:round;
  path-length:1;
  stroke-dasharray:.025 .975;
  stroke-dashoffset:1;
  opacity:0;
  filter:drop-shadow(0 0 18px rgba(255,218,128,.72));
}
.lisra-logo-head-l{animation:lisraTraceHead .88s cubic-bezier(.38,.02,.18,1) .08s forwards}
.lisra-logo-head-a{animation:lisraTraceHead .9s cubic-bezier(.36,.03,.18,1) .76s forwards}
.lisra-logo-head-i{stroke-width:34;stroke-dasharray:.055 .945;animation:lisraTraceHead .52s cubic-bezier(.34,.04,.2,1) 1.52s forwards}

/* --- Real 3D metallic artwork (minus the dot): fades in on top of the drawn
   ribbon, so the resting logo is pixel-exact. --- */
.lisra-logo-real{opacity:0;animation:lisraRealFade .38s cubic-bezier(.2,.7,.2,1) 1.76s forwards}

/* Metallic glint that sweeps across the gold after it lands (JS: .show-sheen). */
.lisra-intro-sheen{
  position:absolute;
  left:50%;
  top:56%;
  width:96px;
  height:96px;
  transform:translate(-50%,-56%);
  pointer-events:none;
  display:none;
  opacity:0;
  -webkit-mask:url(images/lisra-logo-intro-sm.png?v=20260702-dot-final) center/contain no-repeat;
  mask:url(images/lisra-logo-intro-sm.png?v=20260702-dot-final) center/contain no-repeat;
  background:linear-gradient(114deg,
    transparent 36%,
    rgba(255,244,214,.5) 46%,
    rgba(255,252,240,.92) 50%,
    rgba(255,244,214,.5) 54%,
    transparent 64%);
  background-size:280% 100%;
  background-position:135% 0;
  mix-blend-mode:screen;
}
.lisra-intro.show-sheen .lisra-intro-sheen{display:block;animation:lisraSheen 1.05s cubic-bezier(.38,.05,.2,1) both}

/* --- The i-dot drops in last and STAYS (JS toggles .show-dot) --- */
.lisra-logo-dot{
  display:none;
  opacity:0;
  transform:translateY(-330px) scale(.7);
  transform-origin:1032px 412px;
}
.lisra-intro.show-dot .lisra-logo-dot{display:block;animation:lisraDotDrop .64s cubic-bezier(.22,.9,.26,1) both}
/* Once the drop lands, crossfade to the complete pixel-exact artwork. This
   guarantees that the i-dot remains present through the final hold/fade. */
.lisra-logo-final{opacity:0;pointer-events:none}
.lisra-intro.show-dot .lisra-logo-final{animation:lisraFinalLock .18s ease .5s forwards}

.lisra-intro-halo{
  position:absolute;
  left:50%;
  top:50%;
  width:86px;
  height:24px;
  border:1px solid rgba(214,182,109,.14);
  border-radius:50%;
  opacity:0;
  transform:translate(-50%,32px) scale(.68);
  box-shadow:0 0 28px rgba(181,137,62,.08),inset 0 0 21px rgba(181,137,62,.035);
  animation:lisraHalo 2.1s cubic-bezier(.2,.7,.2,1) both;
}
.lisra-intro-shadow{
  position:absolute;
  left:50%;
  top:calc(50% + 45px);
  width:56px;
  height:9px;
  border-radius:50%;
  background:rgba(0,0,0,.58);
  filter:blur(6px);
  opacity:0;
  transform:translateX(-50%) scale(.7);
  animation:lisraShadow 2.1s ease both;
}
@keyframes lisraTrace{0%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}
@keyframes lisraDrawFade{0%{opacity:1}100%{opacity:0}}
@keyframes lisraRealFade{0%{opacity:0}100%{opacity:1}}
@keyframes lisraTurn3d{
  0%{transform:rotateY(0) rotateX(0) scale(1)}
  38%{transform:rotateY(-9deg) rotateX(3.5deg) scale(1.025)}
  72%{transform:rotateY(3deg) rotateX(-1.2deg) scale(1.008)}
  100%{transform:rotateY(0) rotateX(0) scale(1)}
}
@keyframes lisraSheen{
  0%{opacity:0;background-position:135% 0}
  24%{opacity:1}
  76%{opacity:1}
  100%{opacity:0;background-position:-35% 0}
}
@keyframes lisraTraceHead{0%{opacity:0;stroke-dashoffset:1}10%{opacity:1}86%{opacity:.9}100%{opacity:0;stroke-dashoffset:0}}
@keyframes lisraDotDrop{
  0%{opacity:0;transform:translateY(-330px) scale(.7)}
  20%{opacity:1}
  68%{transform:translateY(7px) scale(1.025)}
  86%{transform:translateY(-1.5px) scale(.995)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes lisraFinalLock{to{opacity:1}}
@keyframes lisraHalo{0%,14%{opacity:0;transform:translate(-50%,32px) scale(.68)}66%{opacity:.56;transform:translate(-50%,32px) scale(1.03)}100%{opacity:.28;transform:translate(-50%,32px) scale(1)}}
@keyframes lisraShadow{0%,12%{opacity:0;transform:translateX(-50%) scale(.65)}68%{opacity:.5;transform:translateX(-50%) scale(1.06)}100%{opacity:.42;transform:translateX(-50%) scale(1)}}
@media(max-width:600px){
  .lisra-intro-stage{width:100px;height:100px}
  .lisra-intro-logo{width:80px;height:80px}
  .lisra-intro-sheen{width:80px;height:80px}
  .lisra-intro-halo{width:72px;transform:translate(-50%,28px) scale(.68)}
  .lisra-intro-shadow{top:calc(50% + 38px);width:48px}
  @keyframes lisraHalo{0%,14%{opacity:0;transform:translate(-50%,28px) scale(.68)}66%{opacity:.56;transform:translate(-50%,28px) scale(1.03)}100%{opacity:.28;transform:translate(-50%,28px) scale(1)}}
}
@media(prefers-reduced-motion:reduce){
  .lisra-intro-logo{animation:none}
  .lisra-logo-draw,.lisra-logo-motion{display:none}
  .lisra-logo-real{animation:lisraRealFade .32s ease both}
  .lisra-intro.show-sheen .lisra-intro-sheen{display:none}
  .lisra-intro.show-dot .lisra-logo-dot{animation:lisraDotQuiet .2s ease .1s both}
  .lisra-intro.show-dot .lisra-logo-final{animation:lisraFinalLock .12s ease .24s forwards}
  .lisra-intro-halo,.lisra-intro-shadow{animation-duration:.5s}
  @keyframes lisraDotQuiet{from{opacity:0;transform:translateY(-22px)}to{opacity:1;transform:translateY(0)}}
}