/* Reversible fan / triangle experiment. Baseline: 5003e6f. */
@font-face{font-family:'Menu Rodin';src:url('assets/menu-rodin-eb-uppercase.woff') format('woff');font-weight:800;font-style:normal;font-display:swap}
html,body{width:100%;overflow-x:hidden}
.world{isolation:isolate}
.bottom-line{gap:10px;align-items:baseline}
.bottom-line .copyright{white-space:nowrap}
.bottom-line .icp-link{margin-left:8px;font-family:var(--body);font-size:9px;letter-spacing:.2px;white-space:nowrap}
.bottom-line .icp-link:hover,.bottom-line .icp-link:focus-visible{color:#fff;text-decoration:none}
.bottom-line #credits-button{flex-shrink:0}

/* One intrinsic frame for both movies and fragments. Cover it as a unit. */
.video-stage{inset:auto;left:50%;top:50%;width:max(100vw,177.777778svh);height:max(100svh,56.25vw);transform:translate(-50%,-50%)}
.world .video-stage video{object-fit:fill;object-position:center}
.video-stage .ocean-still{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:0}
.video-stage .fv-overlay{inset:0;width:100%;height:100%;z-index:3;opacity:0;mix-blend-mode:screen;transition:opacity .18s linear}
.video-stage .fv-overlay .particle{inset:0;width:100%;height:100%;object-fit:fill;mix-blend-mode:normal}
.effects-ready .video-stage .fv-overlay{opacity:1}
body[data-video-variant=mobile] .video-stage{width:max(100vw,46.875svh);height:max(100svh,213.333333vw)}
body[data-video-variant=desktop] .video-stage{width:max(100vw,177.777778svh);height:max(100svh,56.25vw)}
.load-info{position:absolute;left:5%;bottom:8%;z-index:3;color:#fff;font-size:11px;letter-spacing:1px}
.loading-wave{width:clamp(120px,18vw,240px);height:20px;--load-progress:0%}
.loading-wave svg{display:block;width:100%;height:100%;overflow:visible}
.loading-wave path{stroke:#fff;stroke-width:1.5;vector-effect:non-scaling-stroke}
.wave-track{opacity:.2}
.wave-progress{clip-path:inset(0 calc(100% - var(--load-progress)) 0 0);transition:clip-path .15s linear}
.indeterminate .wave-progress{clip-path:none;stroke-dasharray:24 28;animation:wave-loading 1s linear infinite}
@keyframes wave-loading{to{stroke-dashoffset:-52}}
@media(prefers-reduced-motion:reduce){.indeterminate .wave-progress{animation:none}}
.intro.draining .load-info,.intro.is-playing .load-info{display:none}

/* Rays share a focal point to the left of the column, around the character. */
.interface{min-height:0;overflow:hidden;overflow:clip}
.home-caption{display:flex;right:7%;bottom:16%;max-width:43%;transform:none;gap:12px}
.home-caption .small-cross{font-size:26px}
.home-caption .menu-description{display:block;font-size:12px;line-height:1.8;color:#e4ffff;margin:0;letter-spacing:1px}
.footer{justify-content:flex-end}
.main-menu{left:58%;right:auto;top:36%;width:37%;display:flex;align-items:center;gap:0}
.welcome{right:6%;top:13%;transform:none;text-align:right}
.main-menu .menu-item{padding:0;height:var(--row-height,68px);width:max-content;max-width:none;transform-origin:50% 50%;transform:translateX(var(--offset)) rotate(var(--rotate));color:var(--idle-color);transition:transform .14s ease-out;isolation:isolate;z-index:0}
.main-menu .menu-item:focus-visible{outline:none}
.main-menu .menu-item:focus-visible .menu-number{text-decoration:underline;text-underline-offset:3px;opacity:1}
.main-menu .menu-item:nth-child(2n){color:var(--idle-color)}
.main-menu .menu-word{font-family:'Menu Rodin',var(--font);font-weight:800;font-size:clamp(54px,6vw,90px);letter-spacing:-.15em}
.menu-face{height:100%;display:flex;align-items:center;padding:0 var(--face-right) 0 var(--face-left);position:relative;z-index:1}
.main-menu .menu-item.selected{color:#000;transform:translateX(var(--offset)) rotate(var(--rotate)) scale(1.16);z-index:1}
.main-menu .menu-number{margin-right:9px}
.main-menu .menu-cn{margin-left:13px}
.main-menu .menu-arrow{display:none}

/* The triangles and clipped ink use identical button-local coordinates. */
.menu-item{--face-left:7px;--face-right:27px;--plate-x:12px;--plate-y:7px;--triangle-white:polygon(0% 100%,100% 0%,83% 89%);--triangle-red:polygon(0% 100%,96% 13%,87% 100%)}
.menu-item[data-page=home]{--idle-color:#58eaff;--triangle-white:polygon(0% 74%,100% 1%,84% 100%);--triangle-red:polygon(3% 85%,95% 15%,91% 96%)}
.menu-item[data-page=about]{--idle-color:#a4faff;--triangle-white:polygon(1% 65%,100% 3%,85% 96%);--triangle-red:polygon(2% 82%,96% 20%,92% 96%)}
.menu-item[data-page=works]{--idle-color:#30d0f2;--triangle-white:polygon(0% 80%,99% 0%,83% 99%);--triangle-red:polygon(4% 95%,98% 18%,93% 96%)}
.menu-item[data-page=journal]{--idle-color:#88efff;--triangle-white:polygon(2% 69%,100% 7%,86% 98%);--triangle-red:polygon(2% 88%,95% 17%,93% 96%)}
.menu-item[data-page=contact]{--idle-color:#42d9fa;--triangle-white:polygon(0% 75%,100% 2%,86% 100%);--triangle-red:polygon(2% 93%,96% 19%,92% 96%)}
.main-menu .menu-item::before,.main-menu .menu-item::after{inset:calc(-1 * var(--plate-y)) calc(-1 * var(--plate-x));transform:none;opacity:0;visibility:hidden;transition:none;pointer-events:none}
/* Selected plates must still follow the menu's hidden intro/detail state. */
.main-menu .menu-item.selected::before,.main-menu .menu-item.selected::after{opacity:1;visibility:inherit}
.main-menu .menu-item::before{background:rgba(255,83,125,.8);clip-path:var(--triangle-red)}
.main-menu .menu-item::after{background:#fff;clip-path:var(--triangle-white)}
.main-menu .menu-ink{display:none;position:absolute;inset:calc(-1 * var(--plate-y)) calc(-1 * var(--plate-x));height:auto;padding:var(--plate-y) calc(var(--face-right) + var(--plate-x)) var(--plate-y) calc(var(--face-left) + var(--plate-x));z-index:2;color:#f40025;pointer-events:none;-webkit-text-stroke:.4px currentColor;paint-order:stroke fill;text-shadow:none}
.main-menu .ink-white{clip-path:var(--triangle-white)}
.main-menu .ink-red{clip-path:var(--triangle-red)}
.main-menu .selected .menu-ink{display:flex}
.entering .header,.entering .welcome,.entering .home-caption,.entering .footer,.entering .bottom-line{animation:ui-in .22s both}
.entering .main-menu .menu-item{animation:menu-in .22s calc(var(--i)*.015s) ease-out both}
@keyframes mobile-ui-in{from{opacity:0}to{opacity:1}}
@media(max-width:800px),(hover:none) and (pointer:coarse){
  /* Keep moving UI layers inside the viewport on mobile compositors. */
  .entering .header,.entering .welcome,.entering .home-caption,.entering .footer,.entering .bottom-line,.entering .main-menu .menu-item{animation-name:mobile-ui-in}
  .video-stage{transform:translate(-50%,-50%) scale(1.005)}
}

@media(max-width:1200px) and (min-width:801px){
  .main-menu{left:57%;right:auto;top:36%;width:38%}
  .main-menu .menu-word{font-size:62px}
  .main-menu .menu-cn{margin-left:9px}
}
@media(max-height:760px) and (min-width:801px){
  .main-menu .menu-word{font-size:clamp(38px,8.1svh,64px)}
}
@media(max-height:650px) and (min-width:801px){
  .welcome{top:18%}.welcome p{display:none}.home-caption{display:flex;bottom:16%}.home-caption .menu-description{font-size:11px}
  .footer{height:42px;bottom:30px}.bottom-line{bottom:10px}
}
@media(max-width:800px) and (max-aspect-ratio:1/1){
  .video-stage{width:max(100vw,46.875svh);height:max(100svh,213.333333vw)}
  .main-menu{left:10%;right:auto;top:25%;width:76%;align-items:center}
  .welcome{left:6%;right:auto;top:14%;text-align:left}
  .home-caption{display:flex;left:10%;right:7%;top:54.5%;bottom:auto;max-width:none;text-align:left;color:#1d384a}
  .home-caption .small-cross{font-size:24px}
  .home-caption .menu-description{display:block;color:#1d384a;font-size:11px;letter-spacing:.5px;text-shadow:0 0 8px #fff,0 0 4px #fff}
  .main-menu .menu-item{height:var(--row-height,46px);--offset:var(--fan-offset,0px)!important}
  .main-menu .menu-item[data-page=home]{--idle-color:#12579c}
  .main-menu .menu-item[data-page=about]{--idle-color:#257cb0}
  .main-menu .menu-item[data-page=works]{--idle-color:#073b77}
  .main-menu .menu-item[data-page=journal]{--idle-color:#2a6598}
  .main-menu .menu-item[data-page=contact]{--idle-color:#104c80}
  .main-menu .menu-item.selected{color:#000;transform:translateX(var(--offset)) rotate(var(--rotate)) scale(1.13)}
  .main-menu .menu-word{font-size:clamp(36px,10.3vw,52px);letter-spacing:-.15em}
  .menu-item{--face-right:21px;--plate-x:9px;--plate-y:6px}
  .main-menu .menu-number{margin-right:7px}
  .main-menu .menu-cn{margin-left:8px}
}