/* radius of the asanoha ripple; registered so it can be animated */
@property --r {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2");
}

/*
  The photo is 941 x 1670 and always fills the stage height, so every size and position
  below is a fraction of that height: --u is 1% of it (1 photo pixel = 100u / 1670).
  The stage is the viewport height, but never shorter than 560px, so the lettering stays
  readable on landscape phones (the page scrolls there instead of shrinking).
  --iw is the photo's rendered width; x positions are measured from its centre so the
  lettering stays registered with the picture when a narrow phone crops the sides.
*/
:root {
  --vh: 1vh;
  --u: max(var(--vh), 5.6px);
  --iw: calc(56.35 * var(--u));
  /* centre of the launch note, measured from the lake layer's centre/top: where the patterns dim */
  --hx: 0px;
  --hy: calc(13.6 * var(--u));
  --edge: 14px;
  --ecru: #fbf6ea;
  --serif: "Cormorant Garamond", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", Georgia, serif;
  --mincho: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  --sans: "Avenir Next", "Helvetica Neue", "Segoe UI", "Hiragino Sans", Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: calc(100 * var(--u));
  overflow-x: hidden;
  background: #1c3327;
  color: var(--ecru);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
}

/* On screens wider than the photo, a blurred copy of it fills the sides. */
body::before {
  content: "";
  position: fixed;
  inset: -60px;
  z-index: -1;
  background: url("/assets/hero-blur.jpg") center / cover;
  filter: blur(36px) brightness(0.72) saturate(1.1);
}

h1,
p {
  margin: 0;
}

.stage {
  position: relative;
  width: min(100vw, var(--iw));
  height: calc(100 * var(--u));
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 0 0 80px rgb(0 0 0 / 0.35);
  text-shadow: 0 calc(0.15 * var(--u)) calc(1.4 * var(--u)) rgb(20 40 50 / 0.35);
}

.photo {
  position: absolute;
  top: 0;
  left: 50%;
  width: auto;
  max-width: none;
  height: 100%;
  transform: translateX(-50%);
}

.stage > :not(picture),
.plate > * {
  position: absolute;
}

.plate {
  top: 0;
  left: calc(50% - 0.5 * var(--iw));
  width: var(--iw);
  height: calc(100 * var(--u));
  pointer-events: none;
}

.ring {
  display: none;
}

h1 span,
.status span,
.tagline-ja span,
.tagline-en span {
  display: block;
  white-space: nowrap;
}

/* ---- small logo, top left ---- */

.logo {
  top: calc(1.4 * var(--u));
  left: max(var(--edge), calc(50% - 0.458 * var(--iw)));
  display: flex;
  align-items: center;
  gap: calc(1.7 * var(--u));
  font-family: var(--sans);
  font-size: max(10px, calc(1.32 * var(--u)));
  font-weight: 500;
  letter-spacing: 0.2em;
  white-space: nowrap;
}

.logo svg {
  width: calc(2.9 * var(--u));
  height: auto;
}

/* ---- wordmark inside the gold ring ---- */

h1 {
  top: calc(12.6 * var(--u));
  left: max(var(--edge), calc(50% - 0.39 * var(--iw)));
  font-size: calc(6.15 * var(--u));
  font-weight: 500;
  line-height: 0.775;
  letter-spacing: 0.005em;
}

/* ---- taglines, right ---- */

.taglines {
  top: calc(14.1 * var(--u));
  right: max(var(--edge), calc(50% - 0.455 * var(--iw)));
}

.tagline-ja {
  font-family: var(--mincho);
  font-size: max(14px, calc(2.4 * var(--u)));
  line-height: 1.22;
  letter-spacing: 0.1em;
  margin-right: -0.1em;
}

.tagline-en {
  margin-top: calc(1.5 * var(--u));
  font-size: max(13px, calc(2.1 * var(--u)));
  font-style: italic;
  line-height: 1.05;
  letter-spacing: 0.05em;
}

.rule {
  display: block;
  height: 1px;
  background: currentColor;
  opacity: 0.9;
}

.taglines .rule {
  width: calc(4.4 * var(--u));
  margin-top: calc(1.9 * var(--u));
}

/* ---- launch note over the lake ---- */

.launch {
  top: calc(72.6 * var(--u));
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-shadow: 0 calc(0.15 * var(--u)) calc(1.8 * var(--u)) rgb(20 40 50 / 0.5);
}

/* frosted glass behind the note, with a hairline that shifts from gold to aurora */
.launch {
  isolation: isolate;
}

.launch::before,
.launch::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(-2.3 * var(--u));
  bottom: calc(-2.4 * var(--u));
  left: 50%;
  width: max(calc(32 * var(--u)), 204px);
  border-radius: calc(2.6 * var(--u));
  transform: translateX(-50%);
}

.launch::before {
  background: linear-gradient(160deg, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0.03) 55%, rgb(150 240 215 / 0.06));
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  box-shadow: 0 calc(1.2 * var(--u)) calc(4 * var(--u)) rgb(20 45 55 / 0.22);
}

.launch::after {
  padding: 1px;
  background: linear-gradient(140deg, rgb(255 231 163 / 0.95), rgb(255 255 255 / 0.25) 40%, rgb(125 243 212 / 0.85) 75%, rgb(190 170 255 / 0.7));
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.status {
  color: #fffaf0;
  font-size: calc(4 * var(--u));
  font-style: italic;
  line-height: 0.98;
  letter-spacing: 0.055em;
}

.launch .rule {
  width: calc(5.5 * var(--u));
  margin: calc(2.5 * var(--u)) 0 calc(2.2 * var(--u));
}

.domain {
  font-family: var(--sans);
  font-size: max(10px, calc(1.36 * var(--u)));
  letter-spacing: 0.24em;
  margin-right: -0.24em;
}

/* ---- the catch: sits exactly where it is in the photo (460,720 of 941x1670) ---- */

.fish {
  top: calc(43.11 * var(--u));
  left: calc(50% - 0.01116 * var(--iw));
  width: calc(0.06908 * var(--iw));
  height: auto;
  text-shadow: none;
}

/*
  The lake surface: rings of light spread from the point of impact, and in their wake an
  asanoha (hemp-leaf) lattice shows on the water, laid flat in perspective. Everything is
  clipped to the lake, fading into the mist above and the rocks below.
*/
.water {
  top: calc(65.4 * var(--u));
  left: 0;
  right: 0;
  height: calc(24 * var(--u));
  overflow: hidden;
  /* fades into the mist above, the rocks below, and toward both edges of the picture */
  -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 55%, transparent), linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(transparent, #000 22%, #000 55%, transparent), linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-composite: intersect;
  mix-blend-mode: screen;
  text-shadow: none;
}

.water i {
  position: absolute;
  opacity: 0;
}

.wave {
  /* centred on the impact point: x = 50% + 0.05iw, y = 70u */
  top: calc(4.6 * var(--u) - 12 * var(--u));
  left: calc(50% + 0.05 * var(--iw) - 46 * var(--u));
  width: calc(92 * var(--u));
  height: calc(24 * var(--u));
  border-radius: 50%;
  background: conic-gradient(from 210deg, #ffe7a3, #7df3d4, #8fb8ff, #c9a4ff, #ffe7a3, #7df3d4, #ffe7a3);
  -webkit-mask-image: radial-gradient(ellipse closest-side, transparent 90%, #000 95.5%, transparent 100%);
  mask-image: radial-gradient(ellipse closest-side, transparent 90%, #000 95.5%, transparent 100%);
  will-change: transform, opacity;
}

/* the hemp-leaf lattice, revealed only in a band that travels outward with the rings */
.asa {
  --r: 0px;
  inset: 0;
  background: url("/assets/asanoha.svg") calc(50% + 0.05 * var(--iw)) calc(4.6 * var(--u)) / calc(5.2 * var(--u)) calc(3.6 * var(--u));
  /* two masks, intersected: the travelling band, and a soft dimming behind the launch note
     so the lattice never competes with the lettering */
  -webkit-mask-image: radial-gradient(ellipse var(--r) calc(var(--r) * 0.27) at calc(50% + 0.05 * var(--iw)) calc(4.6 * var(--u)), transparent 40%, #000 74%, #000 94%, transparent 100%), radial-gradient(ellipse calc(19 * var(--u)) calc(9.5 * var(--u)) at calc(50% + var(--hx)) var(--hy), rgb(0 0 0 / 0.3) 55%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(ellipse var(--r) calc(var(--r) * 0.27) at calc(50% + 0.05 * var(--iw)) calc(4.6 * var(--u)), transparent 40%, #000 74%, #000 94%, transparent 100%), radial-gradient(ellipse calc(19 * var(--u)) calc(9.5 * var(--u)) at calc(50% + var(--hx)) var(--hy), rgb(0 0 0 / 0.3) 55%, #000 100%);
  mask-composite: intersect;
}

/*
  At the point of impact: a figure in the spirit of Katakamuna — a great circle quartered
  by a cross with eight small circles on its rim, and a spiral of small ring-signs unwinding
  from the centre. Laid flat on the water like the lattice; it grows with the ripple and fades.
*/
.kami {
  position: absolute;
  top: calc(4.6 * var(--u) - 4.7 * var(--u));
  left: calc(50% + 0.05 * var(--iw) - 17.5 * var(--u));
  width: calc(35 * var(--u));
  height: calc(9.4 * var(--u));
  opacity: 0;
  /* dimmed softly where it passes behind the launch note */
  -webkit-mask-image: radial-gradient(ellipse calc(19 * var(--u)) calc(9.5 * var(--u)) at calc(17.5 * var(--u) - 0.05 * var(--iw) + var(--hx)) calc(var(--hy) + 0.1 * var(--u)), rgb(0 0 0 / 0.28) 55%, #000 100%);
  mask-image: radial-gradient(ellipse calc(19 * var(--u)) calc(9.5 * var(--u)) at calc(17.5 * var(--u) - 0.05 * var(--iw) + var(--hx)) calc(var(--hy) + 0.1 * var(--u)), rgb(0 0 0 / 0.28) 55%, #000 100%);
}

.kami * {
  vector-effect: non-scaling-stroke;
  stroke-width: 1.2px;
}

/* the figure is drawn around the SVG origin, so it grows and turns about its own centre */
.kami-grow,
.kami-turn {
  transform-origin: 0 0;
}

.k-dot {
  fill: rgb(255 241 196 / 0.35);
}

.glow {
  top: calc(4.6 * var(--u) - 4 * var(--u));
  left: calc(50% + 0.05 * var(--iw) - 15 * var(--u));
  width: calc(30 * var(--u));
  height: calc(8 * var(--u));
  border-radius: 50%;
  background: radial-gradient(ellipse closest-side, rgb(160 255 228 / 0.75), rgb(255 231 163 / 0.35) 45%, transparent);
}

.splash {
  /* where the fish meets the water */
  top: calc(70 * var(--u));
  left: calc(50% + 0.05 * var(--iw));
  width: 0;
  height: 0;
}

.splash i {
  position: absolute;
  opacity: 0;
}

/* the first burst of water */
.splash::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(-0.9 * var(--u));
  width: calc(1.8 * var(--u));
  height: calc(4.6 * var(--u));
  border-radius: 50% 50% 40% 40%;
  background: radial-gradient(ellipse at 50% 80%, rgb(255 252 244 / 0.95), rgb(255 252 244 / 0) 70%);
  transform-origin: 50% 100%;
  opacity: 0;
}

.drop {
  top: calc(-0.2 * var(--u));
  left: calc(-0.2 * var(--u));
  width: calc(0.34 * var(--u));
  height: calc(0.34 * var(--u));
  border-radius: 50%;
  background: #fffcf2;
  box-shadow: 0 0 calc(0.4 * var(--u)) rgb(38 62 74 / 0.3);
}

.drop:nth-of-type(1) { --dx: -2.6; --dy: -3.2; }
.drop:nth-of-type(2) { --dx: -1.2; --dy: -5.4; }
.drop:nth-of-type(3) { --dx: -0.2; --dy: -6.6; width: calc(0.26 * var(--u)); height: calc(0.26 * var(--u)); }
.drop:nth-of-type(4) { --dx: 0.9; --dy: -5.8; }
.drop:nth-of-type(5) { --dx: 2.1; --dy: -4; width: calc(0.26 * var(--u)); height: calc(0.26 * var(--u)); }
.drop:nth-of-type(6) { --dx: 3.3; --dy: -2.4; }

/*
  Motion, played once: the lettering fades in, then the eagle lets its catch go —
  the fish falls to the lake, and rings of light spread across the water from where it lands.
  With reduced motion, nothing moves and the fish stays in the talons.
*/
@media (prefers-reduced-motion: no-preference) {
  h1,
  .taglines,
  .launch {
    animation: appear 1.2s ease-out both;
  }
  .taglines {
    animation-delay: 0.25s;
  }
  .launch {
    animation-delay: 0.5s;
  }
  .fish {
    animation: fall 1.5s cubic-bezier(0.5, 0, 0.9, 0.6) 2.2s forwards;
  }
  .wave {
    animation: spread 8s cubic-bezier(0.3, 0.45, 0.5, 1) 3.7s both;
  }
  .wave:nth-of-type(4) {
    animation-delay: 5.3s;
  }
  .asa {
    animation: weave 12s cubic-bezier(0.3, 0.45, 0.5, 1) 3.9s both;
  }
  .glow {
    animation: glow 5s ease-out 3.65s both;
  }
  .kami {
    animation: emerge 11s linear 4.3s both;
  }
  .kami-grow {
    animation: grow 11s cubic-bezier(0.3, 0.45, 0.5, 1) 4.3s both;
  }
  .kami-turn {
    animation: turn 11s linear 4.3s both;
  }
}

@keyframes appear {
  from {
    opacity: 0;
    transform: translateY(calc(0.8 * var(--u)));
  }
}

@keyframes fall {
  92% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate(calc(2.4 * var(--u)), calc(25.6 * var(--u))) rotate(62deg) scale(0.82);
  }
}

@keyframes weave {
  0% {
    --r: 0px;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  60% {
    opacity: 0.85;
  }
  100% {
    --r: calc(50 * var(--u));
    opacity: 0;
  }
}

@keyframes emerge {
  0% {
    opacity: 0;
  }
  18% {
    opacity: 0.95;
  }
  62% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
  }
}

@keyframes grow {
  from {
    transform: scale(0.25);
  }
}

@keyframes turn {
  to {
    transform: rotate(38deg);
  }
}

@keyframes spread {
  0% {
    opacity: 0;
    transform: scale(0.03);
  }
  8% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes glow {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

@keyframes burst {
  0% {
    opacity: 0;
    transform: scaleY(0.1);
  }
  30% {
    opacity: 1;
    transform: scaleY(1);
  }
  100% {
    opacity: 0;
    transform: scaleY(0.5);
  }
}

@keyframes spray {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  12% {
    opacity: 0.95;
  }
  60% {
    opacity: 0.9;
    transform: translate(calc(var(--dx) * var(--u)), calc(var(--dy) * var(--u)));
  }
  100% {
    opacity: 0;
    transform: translate(calc(var(--dx) * 1.3 * var(--u)), calc(var(--dy) * 0.25 * var(--u)));
  }
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .status {
    background: linear-gradient(100deg, #fffaf0 25%, #ffe9ad 55%, #b4f7e3 85%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 calc(0.15 * var(--u)) calc(0.7 * var(--u)) rgb(20 40 50 / 0.45));
  }
}

@supports (height: 1svh) {
  :root {
    --vh: 1svh;
  }
}

/*
  Landscape screens: a wide plate of the same scene (1778 x 1000) fills the viewport.
  --ls is the on-screen size of one of its pixels; --ox/--oy its top-left corner.
  The tall photo occupies x 600..1541, y -520..1150 of the wide plate, so .plate (and the
  fish, ripples and figure inside it) stay registered. Lettering keeps its sizes relative
  to the photo and is placed against the wide plate, clamped to the viewport edges.
*/
@media (min-aspect-ratio: 4/3) {
  :root {
    --ls: max(calc(0.1 * var(--vh)), calc(100vw / 1778));
    --u: calc(16.7 * var(--ls));
    --ox: calc(50vw - 889 * var(--ls));
    --oy: calc(0.2 * (100 * var(--vh) - 1000 * var(--ls)));
    --hx: calc(23.9 * var(--u));
    --hy: calc(14.1 * var(--u));
  }
  body {
    min-height: calc(100 * var(--vh));
  }
  body::before {
    display: none;
  }
  .stage {
    width: 100%;
    height: calc(100 * var(--vh));
    box-shadow: none;
  }
  .photo {
    left: 0;
    width: 100%;
    transform: none;
    object-fit: cover;
    object-position: 50% 20%;
  }
  .plate {
    top: calc(var(--oy) - 520 * var(--ls));
    left: calc(var(--ox) + 600 * var(--ls));
  }
  .water {
    left: calc(-70 * var(--u));
    right: calc(-70 * var(--u));
  }
  .logo {
    top: max(14px, calc(2.6 * var(--vh)));
    left: max(20px, 3vw);
    font-size: max(11px, calc(1.2 * var(--u)));
  }
  h1 {
    isolation: isolate;
    top: max(calc(12 * var(--vh)), calc(var(--oy) + 180 * var(--ls)));
    left: max(6vw, calc(var(--ox) + 150 * var(--ls)));
  }
  .ring {
    display: block;
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: calc(27 * var(--u));
    height: auto;
    transform: translate(-54%, -50%);
  }
  .taglines {
    top: max(calc(10 * var(--vh)), calc(var(--oy) + 150 * var(--ls)));
    right: max(5vw, calc(100vw - var(--ox) - 1700 * var(--ls)));
  }
  .launch {
    top: min(calc(var(--oy) + 690 * var(--ls)), calc(100 * var(--vh) - 17.5 * var(--u)));
    left: min(calc(97vw - 32 * var(--u)), calc(var(--ox) + 1470 * var(--ls) - 16 * var(--u)));
    right: auto;
    width: calc(32 * var(--u));
  }
}