/* TKIM welcome intro: shared shell. Hidden unless the head gate adds .tkim-intro-on. */
.tkim-intro { display: none; }
.tkim-intro-on .tkim-intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  overflow: hidden;
  background: #FBF9F5; /* covers the page from first paint until the art is built */
  /* Failsafe: if script never runs or stalls, the overlay gets out of the way at 4s. */
  animation: tkim-intro-failsafe 0.01s linear 4s forwards;
}
@keyframes tkim-intro-failsafe { to { visibility: hidden; opacity: 0; } }
.tkim-intro__art { position: absolute; inset: 0; }
.tkim-intro__skip {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  right: calc(env(safe-area-inset-right, 0px) + 16px);
  z-index: 5;
  min-height: 44px;
  padding: 0 18px;
  font: 500 13px/1 "Inter", system-ui, -apple-system, sans-serif;
  letter-spacing: 0.06em;
  color: #1C1A17;
  background: rgba(251, 249, 245, 0.86);
  border: 2px solid #1C1A17;
  border-radius: 0;
  cursor: pointer;
  opacity: 0;
  animation: tkim-skip-in 240ms ease 300ms forwards;
}
.tkim-intro__skip:hover { background: #FBF9F5; }
.tkim-intro__skip:focus-visible { outline: 3px solid #1E3A5F; outline-offset: 3px; }
@keyframes tkim-skip-in { to { opacity: 1; } }
.tkim-intro.is-leaving .tkim-intro__skip { opacity: 0; transition: opacity 160ms ease; animation: none; }

/* Direction 3 · In full bloom. The logo assembles like a flower opening, framed by sakura. */
.tkim-intro-on .tkim-intro { animation-delay: 5.5s; background: #FFF9F5; } /* longer failsafe for this direction */
.tkim-intro-on .l-header__logo { opacity: 0; animation: tkim-bl-logo-back 0.01s linear 5.5s forwards; }
@keyframes tkim-bl-logo-back { to { opacity: 1; } }

.bl-paper {
  position: absolute; inset: 0;
  background-color: #FFF9F5;
  background-image: radial-gradient(ellipse 55% 45% at 50% 44%, rgba(247, 223, 229, 0.85), rgba(255, 249, 245, 0) 70%);
  transition: opacity 620ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Sakura framing the screen, growing in from each corner */
.bl-corner {
  position: absolute; width: clamp(170px, 32vw, 480px); height: auto; display: block;
  transition: clip-path 1000ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 1000ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 700ms ease;
}
.bl-corner--tl { left: 0; top: 0; clip-path: circle(0% at 0% 0%); transform: scale(0.94); transform-origin: 0 0; }
.bl-corner--tr { right: 0; top: 0; clip-path: circle(0% at 100% 0%); transform: scale(0.94); transform-origin: 100% 0; }
.bl-corner--br { right: 0; bottom: 0; clip-path: circle(0% at 100% 100%); transform: scale(0.94); transform-origin: 100% 100%; width: clamp(180px, 34vw, 520px); }
.bl-corner--bl { left: 0; bottom: 0; clip-path: circle(0% at 0% 100%); transform: scale(0.94); transform-origin: 0 100%; width: clamp(130px, 20vw, 300px); }
.bl-corner.is-in { clip-path: circle(150% at 50% 50%); transform: none; }
.bl-corner--tl.is-out { transform: translate(-14%, -14%); opacity: 0; }
.bl-corner--tr.is-out { transform: translate(14%, -14%); opacity: 0; }
.bl-corner--br.is-out { transform: translate(14%, 14%); opacity: 0; }
.bl-corner--bl.is-out { transform: translate(-14%, 14%); opacity: 0; }

/* Drifting petals */
.bl-petal {
  position: absolute; top: -6vh; width: var(--pw, 12px); height: calc(var(--pw, 12px) * 0.72);
  border-radius: 80% 0 80% 0;
  background: linear-gradient(135deg, #FBD3DC, #F2A7B8);
  opacity: 0.85;
  animation: bl-fall var(--dur, 6s) linear var(--delay, 0s) infinite;
}
@keyframes bl-fall {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%  { transform: translate3d(calc(var(--sway, 40px)), 55vh, 0) rotate(160deg); }
  100% { transform: translate3d(calc(var(--sway, 40px) * -0.4), 112vh, 0) rotate(320deg); }
}
.bl-petals { position: absolute; inset: 0; transition: opacity 700ms ease; }

/* Individual blossoms opening around the logo */
.bl-bloom {
  position: absolute; height: auto; display: block;
  opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(-50deg);
  transition: opacity 500ms ease, transform 900ms cubic-bezier(0.34, 1.3, 0.5, 1);
}
.bl-bloom.is-in { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(var(--r, 0deg)); }
.bl-bloom.is-out {
  opacity: 0;
  transform: translate(calc(-50% + var(--ox, 0px)), calc(-50% + var(--oy, 0px))) scale(0.8) rotate(calc(var(--r, 0deg) + 60deg));
  transition: opacity 600ms ease, transform 900ms cubic-bezier(0.5, 0, 0.3, 1);
}

/* The logo, assembled from pieces of the real artwork. Never recolored or distorted at rest. */
.bl-logo { position: absolute; transform-origin: 0 0; }
.bl-logo img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bl-piece { position: absolute; inset: 0; }
.bl-core img {
  -webkit-mask-image: radial-gradient(circle at 16.67% 52.6%, #000 calc(var(--w) * 0.043), transparent calc(var(--w) * 0.043 + 1px));
          mask-image: radial-gradient(circle at 16.67% 52.6%, #000 calc(var(--w) * 0.043), transparent calc(var(--w) * 0.043 + 1px));
}
.bl-inner img {
  -webkit-mask-image: radial-gradient(circle at 16.67% 52.6%, transparent calc(var(--w) * 0.043), #000 calc(var(--w) * 0.043 + 1px), #000 calc(var(--w) * 0.105), transparent calc(var(--w) * 0.105 + 1px));
          mask-image: radial-gradient(circle at 16.67% 52.6%, transparent calc(var(--w) * 0.043), #000 calc(var(--w) * 0.043 + 1px), #000 calc(var(--w) * 0.105), transparent calc(var(--w) * 0.105 + 1px));
}
.bl-inner, .bl-outer { position: absolute; inset: 0; }
.bl-outer { clip-path: inset(0 68.3% 0 0); }
.bl-outer .bl-petal-slice img { clip-path: inset(0 68.3% 0 0); }
.bl-outer img {
  -webkit-mask-image: radial-gradient(circle at 16.67% 52.6%, transparent calc(var(--w) * 0.105), #000 calc(var(--w) * 0.105 + 1px), #000 calc(var(--w) * 0.155), transparent calc(var(--w) * 0.155 + 1px));
          mask-image: radial-gradient(circle at 16.67% 52.6%, transparent calc(var(--w) * 0.105), #000 calc(var(--w) * 0.105 + 1px), #000 calc(var(--w) * 0.155), transparent calc(var(--w) * 0.155 + 1px));
}
/* Each petal is a slice of the real artwork. It starts folded in at the centre, turned and small,
   then unfolds outward with a slight overshoot, like a petal opening. */
.bl-petal-slice {
  position: absolute; inset: 0;
  -webkit-mask-image: conic-gradient(from var(--a) at 16.67% 52.6%, #000 0deg 36.6deg, transparent 36.6deg);
          mask-image: conic-gradient(from var(--a) at 16.67% 52.6%, #000 0deg 36.6deg, transparent 36.6deg);
  transform-origin: 16.67% 52.6%;
  transform: rotate(var(--twist)) scale(var(--s0));
  opacity: 0;
  transition: opacity 360ms ease, transform 1050ms cubic-bezier(0.3, 1.3, 0.45, 1);
}
.bl-petal-slice.is-in { opacity: 1; transform: none; }
.bl-core {
  transform-origin: 16.67% 52.6%; transform: scale(0); opacity: 0;
  transition: opacity 300ms ease, transform 700ms cubic-bezier(0.3, 1.45, 0.45, 1);
}
.bl-core.is-in { opacity: 1; transform: none; }

/* Wordmark written with brush strokes: an SVG mask of thick, rough edged strokes drawn in order. */
.bl-svgword { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bl-stroke { stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; } /* hidden until drawn, so round caps leave no dots */
.bl-stroke.is-in { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset var(--d, 300ms) cubic-bezier(0.5, 0.1, 0.4, 1); }

.bl-full { opacity: 0; transition: opacity 320ms ease; }
.bl-logo.is-whole .bl-full { opacity: 1; }
.bl-logo.is-whole .bl-piece { opacity: 0; transition: opacity 320ms ease; }

.bl-fade { opacity: 0 !important; transition: opacity 260ms ease !important; }

@media (max-width: 600px) {
  .bl-corner--tl, .bl-corner--tr { width: 50vw; }
  .bl-corner--br { width: 58vw; }
  .bl-corner--bl { width: 34vw; }
}