/* =========================================================
   stilloperable ENGINE
   Browser as writing surface
   ========================================================= */

:root {
 --still-blue: #1459ff;
 --still-paper: #f6f1e7;
 --still-ink: #111;
 --still-noise: 0;
 --still-zone-size: 3cm;
}

body.still-engine-running {
 overflow-x: hidden;
}

/* =========================================================
   WORK
   ========================================================= */

.still-work {
 position: relative;
 z-index: 5;
 isolation: isolate;
}

.still-work [data-effect] {
 position: relative;
}

/* =========================================================
   JITTER
   ========================================================= */

[data-effect~="jitter"] .still-char {
 display: inline-block;

 transform:
  translate(0, 0)
  rotate(0deg);

 transform-origin: 50% 70%;

 transition:
  transform 900ms cubic-bezier(.16, 1, .3, 1),
  color 600ms ease,
  filter 600ms ease;
}

[data-effect~="jitter"].is-active .still-char {
 transform:
  translate(
   calc(var(--x) * 1px),
   calc(var(--y) * 1px)
  )
  rotate(
   calc(var(--r) * 1deg)
  )
  scaleY(var(--sy));
}

/* =========================================================
   SIGNATURE STROKE
   ========================================================= */

[data-effect~="signature"]::after {
 content: "";

 position: absolute;

 left: 0;
 bottom: -18px;

 width: min(74%, 460px);
 height: 3px;

 background: var(--still-blue);

 transform:
  scaleX(0)
  rotate(-1deg);

 transform-origin: left center;

 opacity: .75;
}

[data-effect~="signature"].is-active::after {
 animation:
  still-signature-line
  1.4s
  cubic-bezier(.16, 1, .3, 1)
  forwards;
}

@keyframes still-signature-line {

 to {
  transform:
   scaleX(1)
   rotate(-1deg);
 }

}

/* =========================================================
   FLOATING MARKS
   ========================================================= */

.still-floating-mark {
 position: fixed;

 z-index: 9991;

 left: 0;
 top: 0;

 color: var(--still-blue);

 font-family:
  "Comic Sans MS",
  cursive;

 font-size: var(--size);

 line-height: 1;

 opacity: var(--alpha);

 transform:
  translate3d(
   var(--x),
   var(--y),
   0
  )
  rotate(var(--rotation));

 mix-blend-mode: multiply;

 pointer-events: none;

 will-change:
  transform,
  opacity;
}

/* =========================================================
   3CM UNASSIGNED ZONE
   ========================================================= */

#still-engine-zone {
 position: fixed;

 z-index: 9994;

 top: calc(
  env(safe-area-inset-top, 0px)
  + 22px
 );

 right: 22px;

 width: var(--still-zone-size);
 height: var(--still-zone-size);

 background: rgba(255, 253, 247, .985);

 border:
  1px dashed
  rgba(20, 89, 255, .45);

 box-shadow:
  0 20px 80px
  rgba(0, 0, 0, .06);

 opacity: 0;

 transform:
  scale(.84);

 transform-origin:
  top right;

 pointer-events: none;

 transition:
  opacity .6s ease,
  transform .8s cubic-bezier(.16, 1, .3, 1),
  border-color .8s ease,
  box-shadow .8s ease;
}

#still-engine-zone::before {
 content: "RIGHT TOP 3CM";

 position: absolute;

 top: -20px;
 right: 0;

 font:
  700 8px/1
  monospace;

 letter-spacing: .13em;

 white-space: nowrap;

 color: var(--still-blue);

 opacity: .65;
}

#still-engine-zone::after {
 content: "";

 position: absolute;

 inset: -8px;

 border:
  1px solid
  rgba(20, 89, 255, .12);
}

body.still-zone-visible
#still-engine-zone {
 opacity: 1;

 transform:
  scale(1);
}

/* finalでは説明まで消す */

body.still-mode-final
#still-engine-zone {
 background: #fffdf8;

 border-color: transparent;

 box-shadow:
  0 30px 100px
  rgba(0, 0, 0, .025);
}

body.still-mode-final
#still-engine-zone::before,
body.still-mode-final
#still-engine-zone::after {
 opacity: 0;
}

/* =========================================================
   NOISE CANVAS
   ========================================================= */

#still-engine-noise,
#still-engine-ink {
 position: fixed;

 inset: 0;

 width: 100vw;
 height: 100vh;

 pointer-events: none;
}

#still-engine-noise {
 z-index: 9989;

 opacity:
  calc(
   var(--still-noise) * .82
  );

 mix-blend-mode: multiply;

 image-rendering: pixelated;
}

#still-engine-ink {
 z-index: 9992;
}

/* =========================================================
   SCANLINES
   ========================================================= */

#still-engine-scanlines {
 position: fixed;

 inset: 0;

 z-index: 9990;

 pointer-events: none;

 opacity:
  calc(
   var(--still-noise) * .45
  );

 background:
  repeating-linear-gradient(
   180deg,
   rgba(0, 0, 0, .12) 0,
   rgba(0, 0, 0, .12) 1px,
   transparent 1px,
   transparent 4px
  );

 mix-blend-mode: soft-light;
}

/* =========================================================
   FLASH
   ========================================================= */

#still-engine-flash {
 position: fixed;

 inset: 0;

 z-index: 9999;

 background: white;

 opacity: 0;

 pointer-events: none;

 mix-blend-mode: screen;
}

/* =========================================================
   GLITCH
   ========================================================= */

body.still-glitch-active
.still-work {
 will-change: transform;
}

body.still-glitch-active::after {
 content: "";

 position: fixed;

 inset: 0;

 z-index: 9988;

 pointer-events: none;

 background:
  linear-gradient(
   90deg,
   transparent 0%,
   rgba(20, 89, 255, .025) 35%,
   transparent 52%,
   rgba(255, 0, 70, .018) 72%,
   transparent 100%
  );

 mix-blend-mode: multiply;
}

/* =========================================================
   INVERT
   ========================================================= */

body.still-mode-invert {
 background:
  #111 !important;

 color:
  #f7f3e9 !important;

 transition:
  background .8s ease,
  color .8s ease;
}

body.still-mode-invert
.still-work {
 color:
  #f7f3e9;
}

/* =========================================================
   ERASE SWELL UI
   ========================================================= */

body.still-mode-erase-ui
.l-header,
body.still-mode-erase-ui
.p-breadcrumb,
body.still-mode-erase-ui
.p-articleMetas,
body.still-mode-erase-ui
.c-shareBtns,
body.still-mode-erase-ui
.p-fixBtnWrap {
 opacity: 0 !important;

 filter:
  blur(10px);

 pointer-events: none;

 transition:
  opacity .6s ease,
  filter .6s ease;
}

/* =========================================================
   FINAL
   ========================================================= */

body.still-mode-final {
 --still-noise: 0 !important;
}

body.still-mode-final
.still-work
[data-effect]:not(.is-active) {
 opacity: .045;

 filter:
  blur(8px);

 transition:
  opacity .8s ease,
  filter .8s ease,
  transform .8s ease;
}

body.still-mode-final
.still-work
[data-effect].is-active {
 opacity: 1;

 filter: none;
}

body.still-mode-final
.still-floating-mark {
 opacity: 0 !important;

 transition:
  opacity .35s ease;
}

/* =========================================================
   AUTHOR SIGNATURE
   ========================================================= */

.still-work__signature {
 margin-top: 7rem;
 margin-bottom: 5rem;

 font-size: .78rem;

 letter-spacing: .13em;

 color:
  rgba(17, 17, 17, .52);
}

body.still-mode-invert
.still-work__signature {
 color:
  rgba(255, 255, 255, .52);
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

 :root {
  --still-zone-size: 2.6cm;
 }

 #still-engine-zone {
  top:
   calc(
    env(safe-area-inset-top, 0px)
    + 14px
   );

  right: 12px;
 }

}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media
(prefers-reduced-motion: reduce) {

 .still-char {
  transition: none !important;
 }

 #still-engine-noise,
 #still-engine-ink,
 #still-engine-scanlines {
  display: none !important;
 }

 .still-floating-mark {
  display: none !important;
 }

}