/* ==========================================================================
     
   --------------------------------------------------------------------------
       
    .tdp-intro / .tdp-brand  body / html
   ========================================================================== */

.tdp-intro[hidden]{ display:none !important; }

.tdp-intro{
  position:fixed; inset:0; z-index:99998;
  overflow:hidden;
  background:var(--tdp-bg);
  color:var(--tdp-ink);
  font-family:var(--tdp-body);
  /* The loader writes the burn progress here, as a percentage. It MUST be
     declared on this root and NOT on .tdp-brand: a custom property declared on
     the brand would shadow the inherited value, the mask would stay pinned at
     0% and the logo would never appear at all (that bug was live for one
     round -- the sampler caught it as "no intermediate --burn values"). */
  --burn:0%;
}

.tdp-intro__veil{ position:absolute; inset:0; background:var(--tdp-bg); }
.tdp-intro__canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* The travelling fire bar. Geometry is set by the loader (left/width/top), the
   look is the reference page's .intro__burn: a warm band, blurred. */
.tdp-intro__burn{
  position:absolute; top:0; left:0; width:0; height:30px;
  opacity:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(255,236,180,0),rgba(255,206,110,.72) 42%,
    rgba(255,249,232,.96) 52%,rgba(255,150,40,.55) 68%,rgba(255,90,10,0));
  filter:blur(4px);
  transition:opacity .18s linear;
}
.tdp-intro--burning .tdp-intro__burn{ opacity:1; }

/* --------------------------------------------------------------------------
   The brand: burned in as ONE piece (globe mark included), bottom to top.

   `--burn` is a percentage written by the loader on the root element, exactly
   like the reference writes it on <body>. The mask sweeps upward, so the logo
   is revealed by the fire climbing, not by a sideways wipe (the old version
   masked each text span left-to-right and left the globe mark unmasked).
   It stays hidden until the burn starts, which is what makes the burn read as
   "the logo being burned in rather than duplicated".
   -------------------------------------------------------------------------- */
.tdp-brand{
  position:fixed;
  left:var(--tdp-brand-left,53px);
  top:var(--tdp-brand-top,24px);
  z-index:99999;
  display:flex; align-items:center; gap:.06em;
  font-family:var(--tdp-display);
  font-weight:700; font-size:22px; line-height:1;
  letter-spacing:.005em;
  color:var(--tdp-ink);
  pointer-events:none;
  opacity:0;
  -webkit-mask-image:linear-gradient(to top,#000 0 var(--burn,0%),rgba(0,0,0,0) calc(var(--burn,0%) + 20%));
          mask-image:linear-gradient(to top,#000 0 var(--burn,0%),rgba(0,0,0,0) calc(var(--burn,0%) + 20%));
}
.tdp-intro--burning .tdp-brand{ opacity:1; }
.tdp-brand__mark{ width:20px; height:20px; flex:none; display:block; }

/* keeping the brand: it stays, fully lit and unmasked, in the corner */
.tdp-intro--keep .tdp-brand{
  opacity:1; pointer-events:auto;
  -webkit-mask-image:none; mask-image:none;
}

/* --------------------------------------------------------------------------
   
   --donekeep = yes
   --gonekeep = no
   -------------------------------------------------------------------------- */
.tdp-intro--done .tdp-intro__veil,
.tdp-intro--done .tdp-intro__canvas,
.tdp-intro--done .tdp-intro__burn{
  opacity:0; transition:opacity .55s cubic-bezier(.16,1,.3,1);
}
/* When the intro finishes but the brand is kept (--keep, the default) the root
   element itself must step aside. It is position:fixed + inset:0 +
   z-index:99998 + a solid background, so fading only the child layers leaves
   that solid panel covering the whole site forever and swallowing every click
   inside it -- the symptom is "after the intro the site is black except for
   the brand in the top-left corner". The children already fade out via
   opacity, so all that is needed here is to release background and pointer
   events; the brand sits above and re-claims its own clicks via
   .tdp-intro--keep .tdp-brand { pointer-events:auto }. */
.tdp-intro--done{
  background:transparent; pointer-events:none;
}
.tdp-intro--gone{ opacity:0; transition:opacity .42s ease; pointer-events:none; }
.tdp-intro--gone .tdp-brand{ opacity:0; transition:opacity .42s ease; }

/*  */
.tdp-intro[data-tdp-skin="story"] .tdp-brand,
.tdp-intro[data-tdp-skin="story"] .tdp-brand__txt{ color:#4a3a2c; }
.tdp-intro[data-tdp-skin="spec"] .tdp-brand,
.tdp-intro[data-tdp-skin="spec"] .tdp-brand__txt{ color:#101215; }
.tdp-intro[data-tdp-skin="tarot"] .tdp-brand,
.tdp-intro[data-tdp-skin="tarot"] .tdp-brand__txt{
  background:linear-gradient(100deg,#2a1f08 0%,#fff4cf 16%,#c9a227 32%,#6b5416 46%,
    #fff6d8 58%,#8a6a1f 72%,#3a2c0f 86%,#c9a227 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.tdp-intro[data-tdp-skin="hud"] .tdp-brand,
.tdp-intro[data-tdp-skin="hud"] .tdp-brand__txt{
  background:linear-gradient(180deg,#fdfeff 0%,#d3dfea 14%,#5f7385 32%,#fbfdff 48%,
    #8296a8 64%,#46586a 80%,#dbe6ef 92%,#f2f7fb 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}

@media (prefers-reduced-motion:reduce){
  .tdp-intro{ display:none !important; }
}