/* Cover v3 — colour pass only. Owner 2026-09-28: 「金色だけなのいまいちメリハリがない」 then 「紫と金だけだとちょっと下品…ところどころ黒で落ち着きがほしい」.
   Black is the field again (calm); violet lives in the drawing line, the kumiko and the iris rim; gold only at the pour.
   Same mark path, same stroke-draw → pour → shoji → iris timeline as cover55-runtime.css; loaded after it.
   Violet is the field, a lavender→cream line draws the mark, gold is only the pour accent (and leaves before the iris
   grows, so it never becomes a screen-filling gold surface), the shoji is washi cream with violet kumiko, no halo. */
.c55-plate {
  fill: #07060c;
}

/* the window reads as part of the violet field until the shoji lamp lights — no dark disc before the mark is drawn */
.c55-shoji__base {
  fill: #07060c;
}

#c55-boot-cover-stroke stop:nth-of-type(1) {
  stop-color: #8c6be0;
  stop-opacity: 0.95;
}

#c55-boot-cover-stroke stop:nth-of-type(2) {
  stop-color: #f3ecdc;
  stop-opacity: 1;
}

#c55-boot-cover-stroke stop:nth-of-type(3) {
  stop-color: #b89cff;
  stop-opacity: 0.9;
}

#c55-interior stop:nth-of-type(1) {
  stop-color: #07060c;
}

#c55-interior stop:nth-of-type(2) {
  stop-color: #07060c;
}

#c55-paper stop:nth-of-type(1) {
  stop-color: #f3ecdc;
}

#c55-paper stop:nth-of-type(2) {
  stop-color: #d8ccb2;
}

.c55-shoji__kumiko {
  fill: #250d5a;
}

.c55-halo {
  display: none;
}

.c55-cover[data-state] .c55-logo__fill {
  animation:
    c55-pour 180ms cubic-bezier(0.4, 0, 0.2, 1) both,
    c55v2-fill-out 60ms linear both; /* a near-cut: a slow gold-over-violet fade reads muddy brown */
  /* gold stays solid into the first beat of the iris (reviewer 44583b4d: no flat ghost before the reveal), then cuts */
  animation-delay: calc(600ms - var(--c55-t)), calc(1320ms - var(--c55-t));
}

@keyframes c55v2-fill-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.c55-cover-skip {
  border-color: #6e50c6;
  background: #07060c;
  color: #f3ecdc;
}

.c55-cover-skip:focus-visible {
  outline-color: #f3ecdc;
}

/* the drawing line leaves as soon as the gold has filled the mark — no lavender ghost outline later */
.c55-cover[data-state] .c55-logo__stroke {
  animation:
    c55-stroke-draw 720ms cubic-bezier(0.3, 0.9, 0.8, 1) both,
    c55-stroke-rest 100ms ease-in both;
  animation-delay: calc(0ms - var(--c55-t)), calc(800ms - var(--c55-t));
}

/* a persistent thin lavender rim on the iris edge, so the window reads as cut even where the page's violet LIVE band
   meets the violet field (reviewer 44583b4d) */
.c55-rim {
  fill: none;
  stroke: #b89cff;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.c55-cover[data-state] .c55-rim {
  animation: c55v2-rim-on 1ms linear both;
  animation-delay: calc(1320ms - var(--c55-t)); /* with the gold cut, never inside the gold counter */
}

@keyframes c55v2-rim-on {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* owner 2026-09-28: 「ロゴの丸の中の障子？みたいなのがしっくりこない」 — no shoji; the ring's counter stays black */
.c55-shoji {
  display: none;
}
/* ---- Cover v9d = v9 without the 霞 bands (cover-v9d.js builds none; gate a5de668c) and with a clear wider than the
   screen (no disc). Cover v9 — 霞 (kasumi), in the site's own touch. Owner 2026-09-28, on v8's WebGL smoke:
   「ただ煙を置いてるだけだとよくわかんないし、ちょっと煙がリアルすぎる。タッチがあってない」. The vapor is drawn the
   way the site draws its wamon: same-thickness bands at equal spacing, a 工 step made of two exact quarter circles,
   staggered left/right, clean single strokes and one whole band in gold (NEWS 霞 rule). And it has a job: the black
   field IS the mist, and it drifts away to reveal the page.
   序 0–950      the line draws the mark
   破 820–1640   one warm light rises along the mark and leaves it gold
   間 1250–1930  four 霞 bands draw in below the emblem with the same brush, bottom to top and left to right, the gold
                 band last. The crest floats above a bank of mist.
   急 1850–2650  the mark glides onto the hero wordmark's own mark (the seal) as the bands part outward (1900–2880)
      2400–3200  the black clears in one soft fade outward from the name as the seal lands. v8:cover-reveal at 2600
                 starts the entrance, so the tide rises as it clears.
   Runtime deadline is 3300ms (cover55-runtime-v9.js). ---- */
/* the field is its own layer, so the mark and the bands are never masked with it */
.c55-cover[data-state] {
  background: transparent;
}

.c55-cover .c55-plate,
.c55-cover .c55-interior {
  display: none;
}

.c55-cover[data-state] .c55-zoom,
.c55-cover[data-state] .c55-pan,
.c55-cover[data-state] .c55-interior {
  animation: none;
}

/* ---- the field: plain black that clears in one soft fade outward from the name. A registered radius drives a radial
   mask with a wide feather (no texture, no hole edge); the centre is the wordmark (cover-v9-kasumi.js). ---- */
@property --c59-r {
  syntax: "<length>";
  inherits: false;
  initial-value: -2000px;
}

.c59-field {
  position: absolute;
  inset: 0;
  background: #07060c;
  pointer-events: none;
  --c59-r: -2000px;
  -webkit-mask-image: radial-gradient(circle at var(--c59-wx, 18%) var(--c59-wy, 22%), transparent var(--c59-r), #000 calc(var(--c59-r) + var(--c59-feather, 700px)));
  mask-image: radial-gradient(circle at var(--c59-wx, 18%) var(--c59-wy, 22%), transparent var(--c59-r), #000 calc(var(--c59-r) + var(--c59-feather, 700px)));
}

.c55-cover[data-state] .c59-field {
  animation: c59-clear 800ms cubic-bezier(0.4, 0, 0.3, 1) both;
  animation-delay: calc(2400ms - var(--c55-t)); /* the name clears around the landing seal, never under a crossing mark */
}

@keyframes c59-clear {
  from {
    --c59-r: calc(0px - var(--c59-feather, 700px));
  }
  to {
    --c59-r: var(--c59-reach, 1800px);
  }
}

/* ---- the 霞 bands: four same-thickness strokes at equal spacing that flank the emblem, one per level, alternating
   left/right, each with the 工 step (two exact quarter circles). Drawn bottom to top, left to right, gold last. They part
   outward as the field clears. ---- */
.c59-kasumi {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.c59-band {
  position: absolute;
  will-change: transform, opacity;
}

.c59-band svg {
  display: block;
  overflow: visible;
}

.c59-line {
  fill: none;
  stroke: rgba(247, 235, 208, 0.3);
  stroke-linecap: butt;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.c59-line.is-faint {
  stroke: rgba(247, 235, 208, 0.17);
}

.c59-line.is-gold {
  stroke: rgba(214, 180, 90, 0.7);
}

.c55-cover[data-state] .c59-line {
  animation: c59-line-draw 460ms cubic-bezier(0.45, 0, 0.25, 1) both;
  animation-delay: calc(var(--ld) - var(--c55-t));
}

@keyframes c59-line-draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.c55-cover[data-state] .c59-band {
  animation: c59-part 760ms cubic-bezier(0.5, 0, 0.3, 1) both;
  animation-delay: calc(var(--dd) - var(--c55-t));
}

@keyframes c59-part {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  60% {
    opacity: 0.85;
  }
  100% {
    transform: translateX(var(--dx));
    opacity: 0;
  }
}

/* ---- the mark: line → warm light → gold ---- */
.c55-cover[data-state] .c55-logo__stroke {
  animation:
    c55-stroke-draw 950ms cubic-bezier(0.45, 0, 0.25, 1) both,
    c55-stroke-rest 120ms linear both;
  animation-delay: calc(0ms - var(--c55-t)), calc(1640ms - var(--c55-t));
}

.c55-logo__fill {
  clip-path: none;
  opacity: 0;
}

.c55-cover[data-state] .c55-logo__fill {
  animation: c55v6-gold-on 1ms linear both;
  animation-delay: calc(820ms - var(--c55-t));
}

@keyframes c55v6-gold-on {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.c55v6-edge {
  transform: translateX(-200px);
}

.c55-cover[data-state] .c55v6-edge {
  animation: c55v6-pass 820ms cubic-bezier(0.37, 0, 0.63, 1) both;
  animation-delay: calc(820ms - var(--c55-t));
}

@keyframes c55v6-pass {
  from {
    transform: translateX(-200px);
  }
  to {
    transform: translateX(222px);
  }
}

.c55v6-light-wrap {
  mix-blend-mode: screen;
}

.c55-cover[data-state] .c55v6-light-wrap {
  animation: c55v6-light 820ms linear both;
  animation-delay: calc(820ms - var(--c55-t));
}

@keyframes c55v6-light {
  0% {
    opacity: 0;
  }
  15%,
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* ---- the seal: x settles first, then the mark rises and shrinks into its slot, so it never crosses the letters ---- */
.c55-cover[data-state] .c55-pan:has(.c55-logo__fill) {
  animation:
    c59-fly-x 640ms cubic-bezier(0.3, 0, 0.12, 1) both,
    c59-mark-out 200ms linear forwards;
  animation-delay: calc(1850ms - var(--c55-t)), calc(2650ms - var(--c55-t));
}

.c55-cover[data-state] .c55-pan:has(.c55-logo__fill) .c55-zoom {
  animation: c59-fly-y 800ms cubic-bezier(0.55, 0, 0.2, 1) both;
  animation-delay: calc(1850ms - var(--c55-t));
}

@keyframes c59-fly-x {
  from {
    transform: translate(-30.9px, 70.05px);
  }
  to {
    transform: translate(var(--c59-tx, -30.9px), 70.05px);
  }
}

@keyframes c59-fly-y {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(0, var(--c59-dy, 0px)) scale(var(--c59-k, 1));
  }
}

@keyframes c59-mark-out {
  to {
    opacity: 0;
  }
}

.c55-cover[data-state] .c55-cover-skip {
  animation: c59-skip-out 240ms linear forwards;
  animation-delay: calc(2400ms - var(--c55-t));
}

@keyframes c59-skip-out {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

.c55-rim {
  display: none;
}