/* Effects layer: veil, ambient and overlay layers, transitions, hover hooks, reveals, pattern utilities. */

:root {
  --fx-u-seigaiha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='40' height='20' viewBox='0 0 40 20'%3E%3Cdefs%3E%3Cg id='c' fill='%23000' stroke='%23fff' stroke-width='1.1'%3E%3Ccircle r='19.4'/%3E%3Ccircle r='13.6'/%3E%3Ccircle r='8'/%3E%3Ccircle r='2.6'/%3E%3C/g%3E%3Cmask id='m' maskUnits='userSpaceOnUse' x='0' y='0' width='40' height='20'%3E%3Cuse xlink:href='%23c' x='0' y='0'/%3E%3Cuse xlink:href='%23c' x='40' y='0'/%3E%3Cuse xlink:href='%23c' x='-20' y='10'/%3E%3Cuse xlink:href='%23c' x='20' y='10'/%3E%3Cuse xlink:href='%23c' x='60' y='10'/%3E%3Cuse xlink:href='%23c' x='0' y='20'/%3E%3Cuse xlink:href='%23c' x='40' y='20'/%3E%3Cuse xlink:href='%23c' x='20' y='30'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='40' height='20' mask='url(%23m)'/%3E%3C/svg%3E");
  --fx-u-asanoha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='51.96' viewBox='0 0 30 51.96'%3E%3Cpath fill='none' stroke='%23000' stroke-width='.9' d='M0,0H30M0,25.98H30M0,51.96H30M0,0L30,51.96M30,0L0,51.96M15,8.66L0,0M15,8.66L30,0M15,8.66V25.98M0,0V17.32L15,25.98M30,0V17.32L15,25.98M15,43.3L0,51.96M15,43.3L30,51.96M15,43.3V25.98M0,51.96V34.64L15,25.98M30,51.96V34.64L15,25.98'/%3E%3C/svg%3E");
  --fx-u-shippo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23000' stroke-width='1'%3E%3Ccircle cx='16' cy='16' r='16'/%3E%3Ccircle cx='0' cy='0' r='16'/%3E%3Ccircle cx='32' cy='0' r='16'/%3E%3Ccircle cx='0' cy='32' r='16'/%3E%3Ccircle cx='32' cy='32' r='16'/%3E%3C/g%3E%3Ccircle cx='16' cy='16' r='1.5'/%3E%3Ccircle cx='0' cy='0' r='1.5'/%3E%3Ccircle cx='32' cy='0' r='1.5'/%3E%3Ccircle cx='0' cy='32' r='1.5'/%3E%3Ccircle cx='32' cy='32' r='1.5'/%3E%3C/svg%3E");
  --fx-u-kumo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='100' viewBox='0 0 200 100'%3E%3Crect x='30' y='14' width='70' height='9' rx='4.5'/%3E%3Crect x='8' y='21' width='116' height='9' rx='4.5'/%3E%3Crect x='46' y='28' width='60' height='9' rx='4.5'/%3E%3Crect x='118' y='62' width='74' height='9' rx='4.5'/%3E%3Crect x='96' y='69' width='70' height='9' rx='4.5'/%3E%3Crect x='134' y='76' width='44' height='9' rx='4.5'/%3E%3C/svg%3E");
  --fx-u-cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 48'%3E%3Cg fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6,36H58a10,10 0 1 0 -9.2,-13.9'/%3E%3Cpath d='M48.8,22.1a12,12 0 0 0 -23,-3.4'/%3E%3Cpath d='M25.8,18.7a9,9 0 0 0 -11.6,8.6a6.5,6.5 0 0 0 1.5,8.7'/%3E%3Cpath d='M58,30a4,4 0 1 1 4,-4'/%3E%3Cpath d='M74,36H92M20,44H70M2,44H10' stroke-width='2.4'/%3E%3C/g%3E%3C/svg%3E");
  --fx-u-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .38  0 0 0 0 .29  0 0 0 0 .16  0 0 0 .6 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --fx-u-fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .5' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .36  0 0 0 0 .22  1.5 0 0 0 -.98'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --fx-u-wear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  7 0 0 0 -1.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ veil + opening */

.fx-veil {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-cursor, 120) + 20);
  overflow: hidden;
  background: var(--kon, #141b2e);
}
.fx-veil--live { background: transparent; }

.fx-noren {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.5%;
  background: linear-gradient(180deg, var(--kon-deep, #0d1220), var(--kon, #141b2e) 42%);
  will-change: transform;
}
.fx-noren--l { left: 0; transform-origin: 0 0; }
.fx-noren--r { right: 0; transform-origin: 100% 0; }
.fx-noren::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(59, 79, 122, .3);
  -webkit-mask: var(--fx-u-seigaiha) 0 0 / 64px 32px repeat;
  mask: var(--fx-u-seigaiha) 0 0 / 64px 32px repeat;
}
.fx-noren::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(200, 163, 90, .55) 18%, rgba(200, 163, 90, .55) 82%, transparent);
}
.fx-noren--l::after { right: 0; }
.fx-noren--r::after { left: 0; }

.fx-veil-mid {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3.4vmin, 34px);
}
.fx-veil-crest { width: clamp(110px, 22vmin, 190px); }
.fx-veil-crest svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  fill: none;
  stroke: var(--kin-light, #e9d5a3);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px rgba(200, 163, 90, .35));
}
.fx-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.fx-veil-fill { fill: var(--kin, #c8a35a); fill-opacity: 0; stroke: none; }
.fx-veil-title {
  max-width: 92vw;
  padding-left: .32em;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-heading, serif);
  font-size: clamp(18px, 3.2vmin, 30px);
  letter-spacing: .32em;
  color: var(--kin-light, #e9d5a3);
  opacity: 0;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .fx-veil-title {
    background: var(--kin-foil);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.fx-veil-rule {
  width: clamp(80px, 16vmin, 150px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--kin, #c8a35a), transparent);
  transform: scaleX(0);
}

/* ------------------------------------------------------------------ fixed layers */

.fx-ambient {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-ambient, 1);
  pointer-events: none;
}
.fx-top {
  position: fixed;
  inset: 0;
  z-index: var(--z-cursor, 120);
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
.fx-top-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-stage {
  position: fixed;
  inset: 0;
  z-index: var(--z-transition, 100);
  display: none;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
.fx-stage--on { display: block; pointer-events: auto; }
.fx-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.fx-fade { position: absolute; inset: 0; background: var(--washi, #f4ecdb); opacity: 0; }

/* cursor ring */
.fx-cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  opacity: 0;
  transition: opacity .25s ease;
  will-change: transform;
}
.fx-cursor--on { opacity: 1; }
.fx-cursor i {
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--kin, #c8a35a);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(233, 213, 163, .22), 0 0 12px rgba(200, 163, 90, .28);
  transition: transform .3s var(--ease-brush, ease), background-color .3s ease, border-color .3s ease;
}
.fx-cursor--hot i { transform: scale(1.55); background-color: rgba(200, 163, 90, .12); border-color: var(--kin-light, #e9d5a3); }
.fx-cursor--down i { transform: scale(.72); }
.fx-water {
  position: absolute;
  width: 68px;
  height: 68px;
  margin: -34px 0 0 -34px;
  border: 1.5px solid var(--kin, #c8a35a);
  border-radius: 50%;
  box-shadow: inset 0 0 0 6px rgba(233, 213, 163, .12);
}

/* seal stamp impact */
.fx-stamp-flash,
.fx-stamp-ring { position: fixed; border-radius: 50%; pointer-events: none; opacity: 0; }
.fx-stamp-flash { background: radial-gradient(circle closest-side, rgba(194, 56, 42, .6), rgba(194, 56, 42, 0)); }
.fx-stamp-ring { border: 1.5px solid var(--shu, #c2382a); }

/* ------------------------------------------------------------------ transition caption */

.fx-cap {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.4vmin, 26px);
  padding: 6vmin;
  text-align: center;
  pointer-events: none;
}
.fx-cap--tate { flex-direction: row; align-items: flex-end; gap: clamp(14px, 3vmin, 34px); }
.fx-cap-glyph {
  font-family: var(--font-brush, serif);
  font-size: clamp(96px, 34vmin, 340px);
  line-height: 1;
  color: var(--sumi, #16151a);
  opacity: 0;
}
.fx-cap-label {
  padding: .55em .9em .55em 1.32em;
  border-radius: 2px;
  font-family: var(--font-heading, serif);
  font-size: clamp(13px, 2.1vmin, 21px);
  letter-spacing: .42em;
  line-height: 1.2;
  color: var(--kinari, #fbf6ea);
  background: var(--shu, #c2382a);
  box-shadow: inset 0 0 0 1px rgba(251, 246, 234, .55), inset 0 0 0 3px var(--shu, #c2382a), 0 8px 20px -10px rgba(60, 20, 10, .7);
  opacity: 0;
}
.fx-cap--tate .fx-cap-label {
  margin-bottom: 1.4em;
  padding: 1em .5em .7em;
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: .3em;
}
.fx-cap--fan .fx-cap-glyph { text-shadow: 0 2px 0 rgba(255, 246, 214, .55), 0 0 26px rgba(255, 246, 214, .5); }
.fx-cap--byobu .fx-cap-glyph {
  padding: .1em .14em .16em;
  font-size: clamp(84px, 28vmin, 280px);
  background-color: var(--kinari, #fbf6ea);
  background-image: var(--fx-u-grain);
  background-size: 240px 240px;
  box-shadow: inset 0 0 0 1px var(--kin-deep, #96763a), inset 0 0 0 5px var(--kinari, #fbf6ea), inset 0 0 0 6px rgba(150, 118, 58, .4), 0 18px 34px -16px rgba(40, 24, 8, .85);
}
.fx-cap--shoji .fx-cap-glyph { text-shadow: 0 0 6px #fbf6ea, 0 0 22px #fbf6ea, 0 0 44px #fbf6ea; }
.fx-cap--byobu .fx-cap-label {
  color: var(--ink, #2a2622);
  background: var(--kinari, #fbf6ea);
  box-shadow: inset 0 0 0 1px var(--kin-deep, #96763a), inset 0 0 0 4px var(--kinari, #fbf6ea), inset 0 0 0 5px rgba(150, 118, 58, .35), 0 10px 22px -12px rgba(40, 24, 8, .8);
}
.fx-cap--sunrise .fx-cap-glyph { color: var(--kinari, #fbf6ea); text-shadow: 0 4px 30px rgba(110, 18, 10, .5); }
.fx-cap--sunrise .fx-cap-label,
.fx-cap--ink .fx-cap-label {
  color: var(--kin-light, #e9d5a3);
  background: none;
  border-radius: 0;
  box-shadow: 0 -1px 0 rgba(233, 213, 163, .6), 0 1px 0 rgba(233, 213, 163, .6);
}
.fx-cap--tate.fx-cap--sunrise .fx-cap-label,
.fx-cap--tate.fx-cap--ink .fx-cap-label { box-shadow: -1px 0 0 rgba(233, 213, 163, .6), 1px 0 0 rgba(233, 213, 163, .6); }
.fx-cap--ink .fx-cap-glyph { color: var(--kin-light, #e9d5a3); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .fx-cap--ink .fx-cap-glyph {
    background: var(--kin-foil);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* ------------------------------------------------------------------ fan */

.fx-fan-back { position: absolute; inset: 0; background: linear-gradient(180deg, #ecd9a6, #d6b871); opacity: 0; }
.fx-fan { position: absolute; width: 0; height: 0; transform-origin: 0 0; opacity: 0; }
.fx-fan-seg { position: absolute; will-change: transform; }
.fx-fan-seg svg { display: block; }
.fx-fan-tassel {
  position: absolute;
  z-index: 60;
  overflow: visible;
  transform-origin: 50% 0;
  animation: fx-tassel 1.1s var(--ease-float, ease-in-out) infinite alternate;
}
.fx-fan-rivet {
  position: absolute;
  z-index: 61;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fff3cf, var(--kin, #c8a35a) 45%, var(--kin-deep, #96763a) 76%, #3a2a12);
  box-shadow: 0 0 0 2px #1a1410;
}
@keyframes fx-tassel {
  from { transform: rotate(-7deg); }
  to { transform: rotate(6deg); }
}

/* ------------------------------------------------------------------ byobu */

.fx-by { position: absolute; inset: 0; }
.fx-by-back { position: absolute; inset: 0; background: #14110e; opacity: 0; }
.fx-by-fold { position: absolute; inset: 0; transform-style: preserve-3d; }
.fx-by-panel {
  --fx-fb: clamp(4px, .55vw, 10px);
  --fx-bb: clamp(7px, 1vw, 18px);
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 50%;
  background: #d9bd7a;
  will-change: transform;
}
.fx-by-panel svg { position: absolute; inset: 0; display: block; }
.fx-by-frame {
  position: absolute;
  inset: 0;
  border: var(--fx-fb) solid #14110e;
  box-shadow: inset 0 0 0 1px rgba(233, 213, 163, .5);
}
.fx-by-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: var(--fx-bb);
  background:
    repeating-linear-gradient(45deg, rgba(233, 213, 163, .55) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(-45deg, rgba(233, 213, 163, .55) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, #47263c, #2b1a31);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.fx-by-frame::after {
  content: "";
  position: absolute;
  inset: var(--fx-bb);
  box-shadow: 0 0 0 1px rgba(20, 17, 14, .75), inset 0 0 0 1px rgba(233, 213, 163, .5);
}
.fx-by-shade { position: absolute; inset: 0; opacity: 0; }
.fx-by-shade--a { background: linear-gradient(90deg, rgba(12, 8, 4, .2), rgba(12, 8, 4, .8)); }
.fx-by-shade--b { background: linear-gradient(90deg, rgba(12, 8, 4, .7), rgba(12, 8, 4, .08)); }

/* ------------------------------------------------------------------ sunrise */

.fx-sr-rise { position: absolute; inset: 0; transform: translateY(100%); will-change: transform; }
.fx-sr-rise::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 90px;
  background: linear-gradient(to top, var(--kon-deep, #0d1220), transparent);
}
.fx-sr-sky,
.fx-sr-plum,
.fx-sr-gold { position: absolute; inset: 0; }
.fx-sr-sky { background: linear-gradient(180deg, var(--kon-deep, #0d1220), var(--kon, #141b2e) 55%, #27325c); }
.fx-sr-sky svg { display: block; }
.fx-sr-plum { background: linear-gradient(180deg, #2b2b55 0%, #6b4777 42%, #c0607a 70%, #e39a7c 100%); opacity: 0; }
.fx-sr-gold { background: linear-gradient(180deg, #d98a7a 0%, #eeb27d 38%, #f4d79c 66%, #f6e6bf 100%); opacity: 0; }
.fx-sr-disc,
.fx-sr-flood {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, #dd4f39 0%, var(--shu, #c2382a) 100%);
}
.fx-sr-flood { opacity: 0; will-change: transform; }
.fx-sr-birds,
.fx-sr-sea { position: absolute; left: 0; top: 0; display: block; overflow: visible; }
.fx-sr-wash { position: absolute; inset: 0; }
.fx-sr-wash i { position: absolute; inset: 0; background: linear-gradient(180deg, #f6e6bf, #eeb27d); opacity: 0; }
.fx-sr-ring {
  position: absolute;
  border: 4px solid var(--kin-light, #e9d5a3);
  border-radius: 50%;
  box-shadow: 0 0 30px 6px rgba(246, 230, 191, .6), inset 0 0 30px 6px rgba(246, 230, 191, .5);
  transform: scale(.001);
}

/* ------------------------------------------------------------------ shoji */

.fx-sj-door { position: absolute; top: 0; height: 100%; will-change: transform; box-shadow: 0 0 46px rgba(20, 12, 6, .55); }
.fx-sj-door svg { display: block; }
.fx-sj-door--l { left: 0; transform: translateX(-101%); }
.fx-sj-door--r { right: 0; transform: translateX(101%); }

/* ------------------------------------------------------------------ ink */

.fx-ink { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-ink-solid { position: absolute; inset: 0; background: var(--sumi, #16151a); opacity: 0; }

/* ------------------------------------------------------------------ scroll reveals */

html.fx-js [data-reveal]:not(.fx-done) {
  transition:
    opacity .8s var(--ease-brush, ease),
    transform .9s var(--ease-brush, ease),
    clip-path 1s var(--ease-fold, ease),
    filter .9s ease,
    -webkit-mask-position 1.1s var(--ease-brush, ease),
    mask-position 1.1s var(--ease-brush, ease);
}
html.fx-js [data-reveal]:not(.fx-in) { opacity: 0; }
html.fx-js [data-reveal="up"]:not(.fx-in) { transform: translateY(28px); }
html.fx-js [data-reveal="unroll"]:not(.fx-done) { clip-path: inset(-40px -40px -40px -40px); }
html.fx-js [data-reveal="unroll"]:not(.fx-in) { clip-path: inset(-40px -40px 100% -40px); transform: translateY(-10px); }
html.fx-js [data-reveal="ink"]:not(.fx-done) {
  -webkit-mask-image: linear-gradient(100deg, #000 0%, #000 38%, rgba(0, 0, 0, .35) 46%, transparent 58%);
  mask-image: linear-gradient(100deg, #000 0%, #000 38%, rgba(0, 0, 0, .35) 46%, transparent 58%);
  -webkit-mask-size: 320% 100%;
  mask-size: 320% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0% 0;
  mask-position: 0% 0;
}
html.fx-js [data-reveal="ink"]:not(.fx-in) {
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  filter: blur(7px);
}

/* ------------------------------------------------------------------ hover hooks */

:where([data-fx~="brush"], [data-fx~="ripple"], [data-fx~="tilt"], [data-fx~="lantern"]) { position: relative; }
:where([data-fx~="brush"], [data-fx~="lantern"]) { isolation: isolate; }

.fx-brush {
  position: absolute;
  left: -.5em;
  right: -.5em;
  top: 6%;
  bottom: 0;
  z-index: -1;
  background: var(--fx-brush-color, rgba(200, 163, 90, .4));
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
  transition: clip-path .36s var(--ease-fold, ease);
}
.fx-hover > .fx-brush { clip-path: inset(0 0 0 0); transition: clip-path .56s var(--ease-brush, ease); }

.fx-ripple {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.fx-ripple-ring {
  position: absolute;
  box-sizing: border-box;
  border: 1.5px solid var(--fx-ripple-color, currentColor);
  border-radius: 50%;
}
.fx-ripple-ink {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, var(--fx-ripple-color, currentColor) 0%, transparent 100%);
  opacity: 0;
}

.fx-tilting {
  transform: perspective(900px) rotateX(var(--fx-rx, 0deg)) rotateY(var(--fx-ry, 0deg));
  will-change: transform;
}
.fx-sheen {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s ease;
}
.fx-tilting.fx-hover > .fx-sheen { opacity: 1; }
.fx-sheen i {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, rgba(255, 244, 214, .4), rgba(233, 213, 163, .18) 40%, rgba(200, 163, 90, 0) 100%);
  will-change: transform;
}

.fx-lantern {
  position: absolute;
  inset: -40% -16%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse closest-side, rgba(255, 198, 122, .6), rgba(240, 152, 72, .24) 55%, rgba(240, 152, 72, 0) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .55s ease;
}
.fx-hover > .fx-lantern { opacity: 1; animation: fx-breathe 2.4s var(--ease-float, ease-in-out) infinite alternate; }
[data-fx~="lantern"].fx-hover { animation: fx-sway 3.4s var(--ease-float, ease-in-out) infinite; }
@keyframes fx-breathe {
  from { transform: scale(.9); }
  to { transform: scale(1.08); }
}
@keyframes fx-sway {
  0%, 100% { rotate: 0deg; }
  25% { rotate: .7deg; }
  75% { rotate: -.7deg; }
}

/* ------------------------------------------------------------------ hero scene */

.fx-scene {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: #f4e6cf;
  pointer-events: none;
}
.fx-scene-layer {
  position: absolute;
  left: -6%;
  top: -6%;
  display: block;
  width: 112%;
  height: 112%;
  will-change: transform;
}
.fx-scene-sky { will-change: auto; }
.fx-scene-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(246, 239, 224, .9) 0%, rgba(246, 239, 224, .62) 26%, rgba(246, 239, 224, 0) 54%);
}
.fx-scene-cranes {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: clamp(110px, 16%, 260px);
  height: auto;
  overflow: visible;
  will-change: transform;
}

/* ------------------------------------------------------------------ section banner */

.fx-banner {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background-color: var(--washi, #f4ecdb);
  background-image: var(--fx-u-grain), var(--fx-u-fibre), linear-gradient(180deg, var(--kinari, #fbf6ea), var(--washi, #f4ecdb) 60%, var(--washi-deep, #e7dbc0));
  background-size: 240px 240px, 400px 400px, 100% 100%;
  pointer-events: none;
}
.fx-banner-par { position: absolute; inset: 0; will-change: transform; }
.fx-banner-glyph {
  position: absolute;
  right: 3%;
  top: 50%;
  transform: translateY(-52%);
  font-family: var(--font-brush, serif);
  font-size: clamp(170px, 26vw, 320px);
  line-height: 1;
  white-space: nowrap;
  color: var(--ink, #2a2622);
  opacity: .075;
}
.fx-banner-orb {
  position: absolute;
  right: clamp(150px, 31%, 440px);
  top: 18%;
  width: clamp(48px, 7vw, 72px);
  aspect-ratio: 1;
  border-radius: 50%;
}
.fx-banner-orb--sun { background: radial-gradient(circle at 42% 38%, #e45a43, var(--shu, #c2382a) 70%, #b13024); }
.fx-banner-orb--moon {
  background: radial-gradient(circle at 40% 38%, #fffdf6, #f1ead6);
  box-shadow: inset -9px -6px 0 rgba(200, 163, 90, .22), 0 0 0 1px rgba(150, 118, 58, .45), 0 0 26px rgba(233, 213, 163, .7);
}
.fx-banner-cloud {
  position: absolute;
  display: block;
  width: clamp(170px, 30%, 400px);
  height: auto;
  overflow: visible;
  animation: fx-drift 16s var(--ease-float, ease-in-out) infinite alternate;
}
.fx-banner-cloud--a { left: 5%; top: 13%; }
.fx-banner-cloud--b { right: clamp(60px, 20%, 300px); top: 38%; width: clamp(150px, 26%, 340px); animation-duration: 21s; animation-direction: alternate-reverse; }
.fx-banner-cloud--c { right: -4%; top: 7%; width: clamp(130px, 20%, 280px); animation-duration: 26s; }
.fx-banner-sea {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 54px;
  -webkit-mask-image: linear-gradient(to top, #000 42%, transparent);
  mask-image: linear-gradient(to top, #000 42%, transparent);
}
.fx-banner-wave {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(100% + 300px);
  height: 100%;
  background-color: var(--ai-light, #3b4f7a);
  will-change: transform;
}
.fx-banner-wave--a {
  -webkit-mask: var(--fx-u-seigaiha) 0 100% / 48px 24px repeat;
  mask: var(--fx-u-seigaiha) 0 100% / 48px 24px repeat;
  opacity: .5;
  animation: fx-wave-a 9s linear infinite;
}
.fx-banner-wave--b {
  -webkit-mask: var(--fx-u-seigaiha) 0 100% / 72px 36px repeat;
  mask: var(--fx-u-seigaiha) 0 100% / 72px 36px repeat;
  opacity: .26;
  animation: fx-wave-b 17s linear infinite;
}
.fx-paused * { animation-play-state: paused !important; }
@keyframes fx-drift {
  from { transform: translateX(-14px); }
  to { transform: translateX(18px); }
}
@keyframes fx-wave-a {
  to { transform: translateX(-96px); }
}
@keyframes fx-wave-b {
  from { transform: translateX(-144px); }
  to { transform: translateX(0); }
}

/* ------------------------------------------------------------------ utilities */

.pat-seigaiha,
.pat-asanoha,
.pat-shippo,
.pat-kumo {
  background-color: var(--pat-color, currentColor);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  pointer-events: none;
}
.pat-seigaiha {
  -webkit-mask-image: var(--fx-u-seigaiha);
  mask-image: var(--fx-u-seigaiha);
  -webkit-mask-size: calc(40px * var(--pat-scale, 1)) calc(20px * var(--pat-scale, 1));
  mask-size: calc(40px * var(--pat-scale, 1)) calc(20px * var(--pat-scale, 1));
}
.pat-asanoha {
  -webkit-mask-image: var(--fx-u-asanoha);
  mask-image: var(--fx-u-asanoha);
  -webkit-mask-size: calc(30px * var(--pat-scale, 1)) calc(51.96px * var(--pat-scale, 1));
  mask-size: calc(30px * var(--pat-scale, 1)) calc(51.96px * var(--pat-scale, 1));
}
.pat-shippo {
  -webkit-mask-image: var(--fx-u-shippo);
  mask-image: var(--fx-u-shippo);
  -webkit-mask-size: calc(32px * var(--pat-scale, 1)) calc(32px * var(--pat-scale, 1));
  mask-size: calc(32px * var(--pat-scale, 1)) calc(32px * var(--pat-scale, 1));
}
.pat-kumo {
  -webkit-mask-image: var(--fx-u-kumo);
  mask-image: var(--fx-u-kumo);
  -webkit-mask-size: calc(200px * var(--pat-scale, 1)) calc(100px * var(--pat-scale, 1));
  mask-size: calc(200px * var(--pat-scale, 1)) calc(100px * var(--pat-scale, 1));
}

.washi {
  background-color: var(--washi, #f4ecdb);
  background-image: var(--fx-u-grain), var(--fx-u-fibre), linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(231, 219, 192, .28));
  background-size: 240px 240px, 400px 400px, 100% 100%;
}

.kin-foil-text { color: var(--kin, #c8a35a); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .kin-foil-text {
    background: var(--kin-foil);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

.hanko {
  display: inline-grid;
  place-items: center;
  min-width: 2.1em;
  min-height: 2.1em;
  padding: .24em .3em;
  border-radius: 5px 3px 6px 4px / 4px 6px 3px 5px;
  font-family: var(--font-brush, serif);
  font-size: 1.1em;
  line-height: 1.08;
  color: var(--kinari, #fbf6ea);
  text-shadow: 0 0 1px rgba(143, 36, 36, .7);
  background-color: var(--shu, #c2382a);
  background-image: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .16), transparent 58%), radial-gradient(circle at 74% 82%, rgba(143, 36, 36, .5), transparent 60%);
  box-shadow: inset 0 0 0 2px var(--shu, #c2382a), inset 0 0 0 3.2px rgba(251, 246, 234, .78);
  -webkit-mask: var(--fx-u-wear) 0 0 / 96px 96px;
  mask: var(--fx-u-wear) 0 0 / 96px 96px;
}

.tategaki {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: .14em;
}

.divider-kumo {
  position: relative;
  display: block;
  height: 24px;
  margin: 2.2rem auto;
  overflow: visible;
  border: 0;
  color: var(--kin, #c8a35a);
  background:
    linear-gradient(90deg, transparent, currentColor) left center / calc(50% - 34px) 1px no-repeat,
    linear-gradient(270deg, transparent, currentColor) right center / calc(50% - 34px) 1px no-repeat;
}
.divider-kumo::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 24px;
  transform: translate(-50%, -50%);
  background-color: currentColor;
  -webkit-mask: var(--fx-u-cloud) center / contain no-repeat;
  mask: var(--fx-u-cloud) center / contain no-repeat;
}

/* ------------------------------------------------------------------ reduced motion, print */

@media (prefers-reduced-motion: reduce) {
  html.fx-js [data-reveal]:not(.fx-done) {
    transition: opacity .3s ease !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  .fx-brush,
  .fx-hover > .fx-brush { transition-duration: .01s; }
  [data-fx~="lantern"].fx-hover,
  .fx-hover > .fx-lantern,
  .fx-banner-cloud,
  .fx-banner-wave { animation: none; }
  .fx-cursor i { transition: none; }
}

@media print {
  .fx-veil,
  .fx-ambient,
  .fx-top,
  .fx-stage { display: none !important; }
  html.fx-js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}