html.lisra-intro-pending body{visibility:hidden}
html.lisra-intro-pending{background:#0d0b08}
html.lisra-intro-active,html.lisra-intro-active body{overflow:hidden}
/* The page behind the intro STAYS RENDERED. It used to be collapsed with
   `content-visibility:hidden` to skip its layout/paint while the intro ran —
   cheaper, and invisible to a person either way, since the overlay is opaque
   and covers the viewport. But collapsed content is removed from rendering, so
   `innerText` returns nothing for it, and Google's OAuth brand verification —
   which renders the page and reads it — saw an empty document. It failed us
   twice with "your home page does not explain the purpose of your app" and
   "the app name does not match the app name on your home page", while every
   signal (title, og:site_name, description, header) was in fact correct.
   Rendering the page behind an opaque overlay costs one layout pass; being
   unreadable to every automated reader costs the brand on the sign-in screen.
   Removing the collapse also removes the hairline artefact it caused: the
   seven bordered top-level sections no longer stack into full-width rules. */
.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)}}
}