/* 5 Years（v5）トップ。封筒・ヒーロー・流れる節と、年ごとの場面。 */

/* 夜空と手書きの字は、封筒とヒーローと流れる節だけが使う。本文は本番の紙の地のまま。 */
:root {
  --night: #0d1530;
  --night-2: #1b2550;
  --cream: #fbf6ec;
  --pen: #2c2b3a;
  --gold: #f5c878;
  --moon: #eef0f8;
  --dim: rgba(238, 240, 248, 0.66);
  --hand: "Klee One", "Zen Kaku Gothic New", serif;
  --scrawl: "Caveat", "Klee One", cursive;
  --stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Ccircle cx='77' cy='12' r='0.58' fill='%23fff' fill-opacity='0.40'/%3E%3Ccircle cx='222' cy='405' r='0.76' fill='%23fff' fill-opacity='0.58'/%3E%3Ccircle cx='409' cy='228' r='0.59' fill='%23ffeecd' fill-opacity='0.88'/%3E%3Ccircle cx='237' cy='13' r='0.89' fill='%23fff' fill-opacity='0.37'/%3E%3Ccircle cx='122' cy='297' r='0.75' fill='%23fff' fill-opacity='0.63'/%3E%3Ccircle cx='294' cy='175' r='0.85' fill='%23ffeecd' fill-opacity='0.60'/%3E%3Ccircle cx='170' cy='152' r='0.51' fill='%23fff' fill-opacity='0.60'/%3E%3Ccircle cx='264' cy='102' r='0.78' fill='%23fff' fill-opacity='0.61'/%3E%3Ccircle cx='348' cy='414' r='0.50' fill='%23ffeecd' fill-opacity='0.81'/%3E%3Ccircle cx='285' cy='227' r='1.00' fill='%23fff' fill-opacity='0.74'/%3E%3Ccircle cx='401' cy='84' r='0.90' fill='%23fff' fill-opacity='0.59'/%3E%3Ccircle cx='180' cy='273' r='0.84' fill='%23ffeecd' fill-opacity='0.66'/%3E%3Ccircle cx='345' cy='298' r='1.03' fill='%23fff' fill-opacity='0.89'/%3E%3Ccircle cx='387' cy='153' r='0.87' fill='%23fff' fill-opacity='0.41'/%3E%3Ccircle cx='188' cy='227' r='0.69' fill='%23ffeecd' fill-opacity='0.55'/%3E%3Ccircle cx='122' cy='66' r='0.50' fill='%23fff' fill-opacity='0.85'/%3E%3Ccircle cx='300' cy='263' r='1.03' fill='%23fff' fill-opacity='0.63'/%3E%3Ccircle cx='99' cy='207' r='0.68' fill='%23ffeecd' fill-opacity='0.38'/%3E%3Ccircle cx='127' cy='333' r='0.63' fill='%23fff' fill-opacity='0.60'/%3E%3Ccircle cx='17' cy='240' r='0.93' fill='%23fff' fill-opacity='0.71'/%3E%3Ccircle cx='31' cy='93' r='0.56' fill='%23ffeecd' fill-opacity='0.51'/%3E%3Ccircle cx='419' cy='175' r='1.09' fill='%23fff' fill-opacity='0.50'/%3E%3Ccircle cx='193' cy='100' r='0.76' fill='%23fff' fill-opacity='0.66'/%3E%3Ccircle cx='10' cy='127' r='0.50' fill='%23ffeecd' fill-opacity='0.71'/%3E%3Ccircle cx='296' cy='298' r='0.63' fill='%23fff' fill-opacity='0.36'/%3E%3Ccircle cx='259' cy='192' r='0.59' fill='%23fff' fill-opacity='0.82'/%3E%3Ccircle cx='306' cy='90' r='1.05' fill='%23ffeecd' fill-opacity='0.63'/%3E%3Ccircle cx='125' cy='375' r='1.09' fill='%23fff' fill-opacity='0.62'/%3E%3Ccircle cx='328' cy='272' r='1.08' fill='%23fff' fill-opacity='0.61'/%3E%3Ccircle cx='15' cy='113' r='0.83' fill='%23ffeecd' fill-opacity='0.46'/%3E%3Ccircle cx='38' cy='107' r='0.64' fill='%23fff' fill-opacity='0.82'/%3E%3Ccircle cx='201' cy='123' r='0.67' fill='%23fff' fill-opacity='0.48'/%3E%3Ccircle cx='305' cy='367' r='0.71' fill='%23ffeecd' fill-opacity='0.39'/%3E%3Ccircle cx='30' cy='294' r='0.52' fill='%23fff' fill-opacity='0.88'/%3E%3Ccircle cx='267' cy='17' r='0.95' fill='%23fff' fill-opacity='0.75'/%3E%3Ccircle cx='32' cy='264' r='0.79' fill='%23ffeecd' fill-opacity='0.84'/%3E%3Ccircle cx='336' cy='408' r='0.53' fill='%23fff' fill-opacity='0.49'/%3E%3Ccircle cx='328' cy='279' r='0.77' fill='%23fff' fill-opacity='0.75'/%3E%3Ccircle cx='181' cy='411' r='1.05' fill='%23ffeecd' fill-opacity='0.86'/%3E%3Ccircle cx='260' cy='372' r='0.58' fill='%23fff' fill-opacity='0.66'/%3E%3Ccircle cx='16' cy='299' r='0.71' fill='%23fff' fill-opacity='0.38'/%3E%3Ccircle cx='220' cy='226' r='0.87' fill='%23ffeecd' fill-opacity='0.65'/%3E%3Ccircle cx='3' cy='243' r='0.59' fill='%23fff' fill-opacity='0.74'/%3E%3Ccircle cx='341' cy='157' r='0.82' fill='%23fff' fill-opacity='0.70'/%3E%3Ccircle cx='259' cy='381' r='1.07' fill='%23ffeecd' fill-opacity='0.73'/%3E%3Ccircle cx='115' cy='217' r='1.05' fill='%23fff' fill-opacity='0.56'/%3E%3Ccircle cx='111' cy='150' r='0.91' fill='%23fff' fill-opacity='0.51'/%3E%3Ccircle cx='91' cy='260' r='0.95' fill='%23ffeecd' fill-opacity='0.77'/%3E%3Ccircle cx='150' cy='333' r='1.01' fill='%23fff' fill-opacity='0.50'/%3E%3Ccircle cx='7' cy='275' r='0.51' fill='%23fff' fill-opacity='0.36'/%3E%3Ccircle cx='313' cy='294' r='0.64' fill='%23ffeecd' fill-opacity='0.50'/%3E%3Ccircle cx='217' cy='277' r='0.55' fill='%23fff' fill-opacity='0.57'/%3E%3Ccircle cx='68' cy='88' r='1.09' fill='%23fff' fill-opacity='0.77'/%3E%3Ccircle cx='107' cy='301' r='0.62' fill='%23ffeecd' fill-opacity='0.40'/%3E%3Ccircle cx='128' cy='279' r='0.89' fill='%23fff' fill-opacity='0.54'/%3E%3Ccircle cx='252' cy='206' r='0.61' fill='%23fff' fill-opacity='0.72'/%3E%3Ccircle cx='113' cy='50' r='0.89' fill='%23ffeecd' fill-opacity='0.68'/%3E%3Ccircle cx='151' cy='401' r='0.76' fill='%23fff' fill-opacity='0.51'/%3E%3Ccircle cx='43' cy='183' r='0.95' fill='%23fff' fill-opacity='0.90'/%3E%3Ccircle cx='324' cy='181' r='0.53' fill='%23ffeecd' fill-opacity='0.54'/%3E%3Ccircle cx='131' cy='329' r='0.99' fill='%23fff' fill-opacity='0.52'/%3E%3Ccircle cx='29' cy='118' r='0.97' fill='%23fff' fill-opacity='0.53'/%3E%3Ccircle cx='105' cy='2' r='0.90' fill='%23ffeecd' fill-opacity='0.73'/%3E%3Ccircle cx='167' cy='109' r='0.51' fill='%23fff' fill-opacity='0.67'/%3E%3C/svg%3E") 0 0 / 420px 420px, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='610' height='610'%3E%3Ccircle cx='186' cy='228' r='0.71' fill='%23fff' fill-opacity='0.43'/%3E%3Ccircle cx='564' cy='224' r='0.72' fill='%23dfe6ff' fill-opacity='0.37'/%3E%3Ccircle cx='235' cy='78' r='0.57' fill='%23fff' fill-opacity='0.26'/%3E%3Ccircle cx='328' cy='582' r='0.41' fill='%23dfe6ff' fill-opacity='0.34'/%3E%3Ccircle cx='130' cy='229' r='0.71' fill='%23fff' fill-opacity='0.58'/%3E%3Ccircle cx='165' cy='62' r='0.41' fill='%23dfe6ff' fill-opacity='0.26'/%3E%3Ccircle cx='497' cy='1' r='0.50' fill='%23fff' fill-opacity='0.46'/%3E%3Ccircle cx='279' cy='437' r='0.71' fill='%23dfe6ff' fill-opacity='0.48'/%3E%3Ccircle cx='567' cy='453' r='0.47' fill='%23fff' fill-opacity='0.52'/%3E%3Ccircle cx='8' cy='255' r='0.79' fill='%23dfe6ff' fill-opacity='0.27'/%3E%3Ccircle cx='590' cy='82' r='0.66' fill='%23fff' fill-opacity='0.29'/%3E%3Ccircle cx='288' cy='227' r='0.56' fill='%23dfe6ff' fill-opacity='0.39'/%3E%3Ccircle cx='157' cy='186' r='0.79' fill='%23fff' fill-opacity='0.30'/%3E%3Ccircle cx='579' cy='289' r='0.75' fill='%23dfe6ff' fill-opacity='0.55'/%3E%3Ccircle cx='183' cy='399' r='0.64' fill='%23fff' fill-opacity='0.38'/%3E%3Ccircle cx='448' cy='569' r='0.63' fill='%23dfe6ff' fill-opacity='0.30'/%3E%3Ccircle cx='442' cy='183' r='0.60' fill='%23fff' fill-opacity='0.40'/%3E%3Ccircle cx='507' cy='451' r='0.54' fill='%23dfe6ff' fill-opacity='0.42'/%3E%3Ccircle cx='130' cy='12' r='0.79' fill='%23fff' fill-opacity='0.27'/%3E%3Ccircle cx='468' cy='402' r='0.44' fill='%23dfe6ff' fill-opacity='0.51'/%3E%3Ccircle cx='93' cy='69' r='0.77' fill='%23fff' fill-opacity='0.54'/%3E%3Ccircle cx='609' cy='357' r='0.53' fill='%23dfe6ff' fill-opacity='0.41'/%3E%3Ccircle cx='438' cy='473' r='0.60' fill='%23fff' fill-opacity='0.49'/%3E%3Ccircle cx='420' cy='597' r='0.52' fill='%23dfe6ff' fill-opacity='0.46'/%3E%3Ccircle cx='287' cy='178' r='0.63' fill='%23fff' fill-opacity='0.50'/%3E%3Ccircle cx='58' cy='556' r='0.53' fill='%23dfe6ff' fill-opacity='0.49'/%3E%3Ccircle cx='298' cy='238' r='0.57' fill='%23fff' fill-opacity='0.27'/%3E%3Ccircle cx='3' cy='320' r='0.54' fill='%23dfe6ff' fill-opacity='0.55'/%3E%3Ccircle cx='271' cy='596' r='0.75' fill='%23fff' fill-opacity='0.36'/%3E%3Ccircle cx='63' cy='249' r='0.44' fill='%23dfe6ff' fill-opacity='0.37'/%3E%3Ccircle cx='20' cy='606' r='0.79' fill='%23fff' fill-opacity='0.58'/%3E%3Ccircle cx='5' cy='540' r='0.46' fill='%23dfe6ff' fill-opacity='0.32'/%3E%3Ccircle cx='244' cy='394' r='0.79' fill='%23fff' fill-opacity='0.48'/%3E%3Ccircle cx='132' cy='99' r='0.74' fill='%23dfe6ff' fill-opacity='0.50'/%3E%3Ccircle cx='277' cy='258' r='0.80' fill='%23fff' fill-opacity='0.60'/%3E%3Ccircle cx='488' cy='244' r='0.53' fill='%23dfe6ff' fill-opacity='0.31'/%3E%3Ccircle cx='214' cy='506' r='0.74' fill='%23fff' fill-opacity='0.52'/%3E%3Ccircle cx='116' cy='559' r='0.42' fill='%23dfe6ff' fill-opacity='0.48'/%3E%3Ccircle cx='287' cy='141' r='0.54' fill='%23fff' fill-opacity='0.42'/%3E%3Ccircle cx='585' cy='340' r='0.61' fill='%23dfe6ff' fill-opacity='0.34'/%3E%3C/svg%3E") 90px 170px / 610px 610px;
}

/* ポラロイド。クリームの枠に影を落とし、上にマスキングテープを貼る。 */
.pol {
  position: relative;
  margin: 0;
  padding: 6px 6px 22px;
  background: var(--cream);
  border-radius: 2px;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.25),
    0 18px 34px -10px rgba(0, 0, 0, 0.6);
}

.pol::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -10px;
  left: 50%;
  width: 76px;
  height: 22px;
  margin-left: -38px;
  background: var(--tape, #ffe7a3);
  opacity: 0.74;
  transform: rotate(var(--tr, -4deg));
  /* 端をぎざぎざにして、手で切ったテープに見せる。 */
  clip-path: polygon(0 0, 100% 0, 97% 25%, 100% 50%, 97% 75%, 100% 100%, 0 100%, 3% 75%, 0 50%, 3% 25%);
}

.ph {
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.ph img,
.ph video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #1a2244;
}

/* ---------- 封筒。<html> に sealed が付いたときだけ出す（v5.mjs の ENV_GATE） ---------- */

.env {
  display: none;
}

html.sealed {
  overflow: hidden;
}

html.sealed .env {
  --W: min(80vw, 400px);
  --H: calc(var(--W) * 0.64);
  display: block;
  position: fixed;
  inset: 0;
  z-index: 50;
  touch-action: none;
  overscroll-behavior: none;
}

/* 部品はこの箱の中に重ねる。ここに transform を置くと重なりの文脈ができ、
   写真を封筒の裏と前のあいだに挟めなくなるので、動かすのは最後だけにする。 */
.env__at {
  position: absolute;
  left: calc(50% - var(--W) / 2);
  top: calc(46% - var(--H) / 2);
  width: var(--W);
  height: var(--H);
  animation: env-in 1s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  transition:
    transform 0.7s cubic-bezier(0.5, 0, 0.75, 0),
    opacity 0.6s ease 0.1s;
}

@keyframes env-in {
  from {
    opacity: 0;
    transform: translateY(40px) rotate(-3deg);
  }
}

.env__at > * {
  position: absolute;
}

.env__back {
  inset: 0;
  z-index: 1;
  background: #e6d7bb;
  border-radius: 6px;
  box-shadow: 0 34px 60px -18px rgba(0, 0, 0, 0.75);
}

.env__front {
  inset: 0;
  z-index: 3;
  background: var(--cream);
  border-radius: 6px;
  clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 100%, 0 100%);
}

.env__front::before,
.env__front::after {
  content: "";
  position: absolute;
  inset: 0;
}

.env__front::before {
  background: rgba(120, 90, 40, 0.05);
  clip-path: polygon(0 0, 50% 55%, 0 100%);
}

.env__front::after {
  background: rgba(120, 90, 40, 0.09);
  clip-path: polygon(100% 0, 50% 55%, 100% 100%);
}

.env__front span {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 13%;
  text-align: center;
  font: 600 calc(var(--W) * 0.085) / 1 var(--hand);
  letter-spacing: 0.2em;
  color: var(--pen);
}

.env__flap {
  left: 0;
  right: 0;
  top: 0;
  height: 60%;
  z-index: 4;
  background: linear-gradient(#f4e9d3, #e9dbbd);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0;
  transform: perspective(900px) rotateX(0deg);
  /* 半分まで開いたところで、写真より奥へ回す。 */
  transition:
    transform 0.65s cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
    z-index 0s linear 0.52s;
}

.env__seal {
  z-index: 5;
  width: calc(var(--W) * 0.13);
  height: calc(var(--W) * 0.122);
  left: calc(50% - var(--W) * 0.065);
  top: calc(60% - var(--W) * 0.075);
  fill: var(--coral);
  animation: beat 1.8s ease-in-out infinite;
}

@keyframes beat {
  0%,
  60%,
  100% {
    transform: scale(1);
  }
  70% {
    transform: scale(1.12);
  }
  80% {
    transform: scale(0.98);
  }
  88% {
    transform: scale(1.08);
  }
}

.env__open {
  inset: -24px;
  z-index: 6;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 12px;
}

.env__open:focus-visible {
  outline: 2px solid var(--gold);
}

.env__hint {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(46% + var(--H) / 2 + 40px);
  margin: 0;
  text-align: center;
  font: 600 16px var(--hand);
  letter-spacing: 0.24em;
  color: var(--dim);
  animation: hint 2.4s ease-in-out infinite alternate;
  transition: opacity 0.3s;
}

@keyframes hint {
  from {
    opacity: 0.45;
  }
  to {
    opacity: 1;
  }
}

.env__skip {
  position: absolute;
  right: 16px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: none;
  color: var(--dim);
  font: 13px var(--hand);
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: opacity 0.3s;
}

/* 飛び出す写真。v5.js がヒーローのポラロイドと同じ場所・同じ大きさで置き、
   --in（封筒の中）→ --up（口から出る）→ 本来の場所、と transform だけで運ぶ。 */
.env__card {
  position: absolute;
  z-index: 2;
  padding: 6px 6px 22px;
  opacity: 0;
  transform: var(--in);
  transition:
    transform 0.55s cubic-bezier(0.3, 0.7, 0.3, 1),
    opacity 0.15s;
}

.env__card .ph {
  aspect-ratio: 3 / 4;
}

.env.is-open .env__seal {
  animation: seal-off 0.35s ease-in forwards;
}

@keyframes seal-off {
  30% {
    transform: scale(1.3);
  }
  to {
    transform: scale(0);
    opacity: 0;
  }
}

.env.is-open .env__flap {
  z-index: 1;
  transform: perspective(900px) rotateX(180deg);
}

.env.is-open .env__hint,
.env.is-open .env__skip {
  opacity: 0;
}

.env.is-open .env__card {
  opacity: var(--o, 1);
  transform: var(--up);
  transition-delay: calc(0.72s + var(--i) * 70ms);
}

.env.is-fly .env__card {
  z-index: calc(10 - var(--depth));
  transform: rotate(var(--rot));
  transition: transform 0.95s cubic-bezier(0.2, 0.75, 0.25, 1) calc(var(--i) * 55ms);
}

.env.is-fly .env__at {
  transform: translateY(60vh) rotate(6deg);
  opacity: 0;
}

/* 封筒のあいだ、ヒーローの写真は隠して止めておく。飛んできた写真と入れ替わる。 */
html.sealed .float {
  visibility: hidden;
}

html.sealed .float .pol {
  animation-play-state: paused;
}

html.sealed .title {
  opacity: 0;
  transform: translateY(14px);
}

/* ---------- ヒーロー。夜空にポラロイドを散らし、真ん中に題を置く ---------- */

.hero {
  height: 100svh;
  position: relative;
}

.pin {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 540px;
  overflow: hidden;
}

.float {
  --rot: var(--r);
  --dx: var(--ox);
  --dy: var(--oy);
  --depth: var(--z);
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  z-index: calc(4 - var(--depth));
  opacity: calc(1.15 - var(--depth) * 0.2);
}

.float .pol {
  padding: 6px 6px 22px;
  transform: rotate(var(--rot));
  animation: bob var(--d) ease-in-out infinite alternate;
}

.float .ph {
  aspect-ratio: 3 / 4;
}

/* 始まりの姿は傾けただけ。封筒の写真はここに着地する。 */
@keyframes bob {
  from {
    transform: rotate(var(--rot));
  }
  to {
    transform: rotate(calc(var(--rot) + 1.6deg)) translateY(9px);
  }
}

.title {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 0 20px;
  pointer-events: none;
  transition:
    opacity 1s ease 0.15s,
    transform 1s ease 0.15s;
}

/* 写真が後ろを通っても字が読めるよう、夜の色の皿を敷く。 */
.title::before {
  content: "";
  position: absolute;
  inset: 22% -10%;
  z-index: -1;
  background: radial-gradient(ellipse closest-side, rgba(13, 21, 48, 0.88), rgba(13, 21, 48, 0.55) 55%, transparent);
}

.title h1 {
  font: italic 300 clamp(78px, 15vw, 210px) / 0.9 var(--num);
  font-variation-settings: "opsz" 144;
  letter-spacing: -0.03em;
  margin: 0;
}

.title h1 b {
  font-style: normal;
  font-weight: 600;
  color: var(--coral);
  text-shadow:
    0 0 22px rgba(255, 107, 87, 0.55),
    0 0 60px rgba(255, 107, 87, 0.3);
}

.title__who {
  margin: 18px 0 0;
  font: 600 clamp(22px, 2.6vw, 32px) / 1.3 var(--hand);
  letter-spacing: 0.3em;
  padding-left: 0.3em;
}

.title__when {
  margin: 4px 0 0;
  font: 500 clamp(20px, 2vw, 26px) / 1.3 var(--scrawl);
  color: var(--gold);
}

.title small {
  display: block;
  margin-top: 30px;
  font: 500 18px var(--scrawl);
  color: var(--dim);
}

.title small::after {
  content: "";
  display: block;
  width: 1px;
  height: 36px;
  margin: 6px auto 0;
  background: var(--dim);
  animation: drop 1.6s ease-in-out infinite;
}

@keyframes drop {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(1);
    transform-origin: top;
  }
  51% {
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

/* 夜空。星は点を散らした SVG を周期の違う 2 枚で重ね、瞬く星は別の 1 枚の opacity だけを動かす。 */
.hero .pin {
  color: var(--moon);
  background:
    var(--stars),
    radial-gradient(ellipse 70% 45% at 82% 6%, rgba(245, 200, 120, 0.09), transparent 70%),
    linear-gradient(172deg, var(--night) 0%, #141d42 55%, var(--night-2) 100%);
}

.hero .pin::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='530' height='530'%3E%3Ccircle cx='472' cy='2' r='1.32' fill='%23fff' fill-opacity='0.71'/%3E%3Ccircle cx='175' cy='61' r='1.09' fill='%23f5c878' fill-opacity='0.82'/%3E%3Ccircle cx='124' cy='505' r='1.11' fill='%23fff' fill-opacity='0.76'/%3E%3Ccircle cx='414' cy='88' r='1.26' fill='%23f5c878' fill-opacity='0.92'/%3E%3Ccircle cx='388' cy='14' r='1.24' fill='%23fff' fill-opacity='0.71'/%3E%3Ccircle cx='141' cy='151' r='1.36' fill='%23f5c878' fill-opacity='0.93'/%3E%3Ccircle cx='396' cy='269' r='1.03' fill='%23fff' fill-opacity='0.96'/%3E%3Ccircle cx='252' cy='407' r='1.40' fill='%23f5c878' fill-opacity='0.89'/%3E%3Ccircle cx='220' cy='399' r='1.48' fill='%23fff' fill-opacity='0.88'/%3E%3Ccircle cx='5' cy='247' r='1.19' fill='%23f5c878' fill-opacity='0.85'/%3E%3Ccircle cx='485' cy='248' r='1.10' fill='%23fff' fill-opacity='0.75'/%3E%3Ccircle cx='269' cy='102' r='1.13' fill='%23f5c878' fill-opacity='0.79'/%3E%3Ccircle cx='140' cy='472' r='1.39' fill='%23fff' fill-opacity='0.87'/%3E%3Ccircle cx='408' cy='256' r='1.41' fill='%23f5c878' fill-opacity='0.97'/%3E%3Ccircle cx='466' cy='444' r='1.50' fill='%23fff' fill-opacity='0.76'/%3E%3Ccircle cx='86' cy='171' r='1.29' fill='%23f5c878' fill-opacity='0.73'/%3E%3C/svg%3E") 40px 60px / 530px 530px;
  animation: twinkle 4.8s ease-in-out infinite alternate;
}

@keyframes twinkle {
  from {
    opacity: 0.25;
  }
  to {
    opacity: 1;
  }
}

/* ---------- 5 年が流れる節。貼り付けて、日付と日数を流し、写真を降り積もらせる（v5-top.js） ---------- */

/* 既定は静かな形。夜から紙の地へ明けるグラデーションの底に、締めの一文だけを置く。 */
.flow {
  position: relative;
  padding: 34svh 20px 6svh;
  background: linear-gradient(var(--night-2), #4b5688 26%, #b9d3e2 64%, var(--sea) 82%, var(--paper));
}

.flow__sky,
.flow__pile,
.flow__clock {
  display: none;
}

.flow .intro {
  margin: 0 auto;
}

.fx .flow {
  height: 380svh;
  padding: 0;
  background: none;
}

/* 進みは 100svh で測る。地だけは下へ 100lvh まで延ばし、iOS でアドレスバーが引っ込んだとき下端に白い帯を出さない。 */
.fx .flow__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 540px;
  overflow-x: clip;
  overflow-y: visible;
}

.fx .flow__sky {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: max(100%, 100lvh);
}

/* 抜けたあとは本文を延ばした地より手前に描く。 */
.flow + .wrap {
  position: relative;
}

.flow__sky--night {
  background: var(--stars), var(--night-2);
}

.flow__sky--dawn {
  opacity: 0;
  background: linear-gradient(#27315f, #6c5f8f 38%, #d9998f 72%, #f8cfae);
}

.flow__sky--day {
  opacity: 0;
  background: linear-gradient(#cfe3ee, var(--sea) 55%, var(--paper));
}

.fx .flow__pile {
  --sx: 1vw;
  --sy: 1svh;
  display: block;
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 60%;
  width: 0;
  height: 0;
}

.flow__card {
  --cw: min(34vw, 190px);
  position: absolute;
  left: calc(var(--cw) / -2);
  top: calc(var(--cw) * -0.72);
  width: var(--cw);
  opacity: 0;
  transform: translate(calc(var(--x) * var(--sx)), -90svh) rotate(calc(var(--r) * -1.6));
  transition:
    transform 0.75s cubic-bezier(0.2, 0.85, 0.3, 1.12),
    opacity 0.3s ease;
}

.flow__card.is-down {
  opacity: 1;
  transform: translate(calc(var(--x) * var(--sx)), calc(var(--y) * var(--sy))) rotate(var(--r));
}

.flow__card .pol {
  padding: 5px 5px 18px;
}

.flow__card .pol::before {
  width: 48px;
  height: 16px;
  margin-left: -24px;
  top: -7px;
}

.fx .flow__clock {
  display: grid;
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: max(44px, 8svh);
  text-align: center;
  pointer-events: none;
}

.flow__c {
  grid-area: 1 / 1;
}

.flow__c time {
  display: block;
  font: 300 clamp(46px, 12.5vw, 108px) / 1 var(--num);
  font-variation-settings: "opsz" 144;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.flow__c p {
  margin: 8px 0 0;
  font: 500 clamp(14px, 1.8vw, 18px) var(--min);
  letter-spacing: 0.2em;
}

.flow__c b {
  font: 300 1.6em var(--num);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.flow__c--night {
  color: var(--moon);
  text-shadow: 0 2px 14px rgba(13, 21, 48, 0.8);
}

.flow__c--night b {
  color: var(--gold);
}

.flow__c--day {
  opacity: 0;
  color: var(--ink);
}

.flow__c--day b {
  color: var(--coral);
}

.fx .flow .intro {
  position: absolute;
  z-index: 2;
  left: 20px;
  right: 20px;
  top: max(60px, 12svh);
  margin: 0 auto;
  opacity: 0;
  line-height: 2.1;
}

/* ダーク（仮）。明け方の光を通ったあと、空色へ抜けずに本文の夜の地へ戻る。 */
html.dark .flow {
  background: linear-gradient(var(--night-2), #6c5f8f 34%, #3a3d6e 62%, var(--paper));
}

html.dark .flow__sky--day {
  background: var(--stars), linear-gradient(#1f2a58, var(--paper) 70%);
}

html.dark .flow__c--day b {
  text-shadow: 0 0 24px rgba(255, 107, 87, 0.35);
}

html.dark .pill:not(.pill--a) {
  background: rgba(17, 26, 58, 0.88);
}

@media (min-width: 561px) {
  .fx .flow__pile {
    --sx: min(1vw, 1.2svh);
  }

  .flow__card {
    --cw: min(15vw, 24svh, 210px);
  }
}

.intro {
  max-width: 34em;
  margin: 70px auto 0;
  position: relative;
  z-index: 3;
  text-align: center;
  font-family: var(--min);
  font-size: clamp(15px, 2.2vw, 19px);
}

.intro em {
  font-style: normal;
  color: var(--coral);
}

/* 年ごとの場面。見出しを上に置き、下に大小の枠を日付順に流す */
.scene {
  padding: clamp(80px, 12vh, 140px) 0 0;
}

.yr {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(16px, 2.6vw, 34px);
  align-items: baseline;
  margin-bottom: clamp(24px, 3.4vw, 44px);
}

.yr__n {
  font: 300 clamp(56px, 8vw, 120px) / 0.9 var(--num);
  font-variation-settings: "opsz" 144;
  letter-spacing: -0.04em;
  color: var(--coral);
  margin: 0;
  grid-row: span 2;
}

.yr h2 {
  font-family: var(--min);
  font-weight: 500;
  font-size: clamp(20px, 2.6vw, 32px);
  margin: 0;
  text-wrap: balance;
}

.yr .more {
  grid-column: 2;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 9px 16px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.14em;
}

.yr .more::after {
  content: "→";
  font-family: var(--num);
}

/* 写真の枠。高さを決めてから切り抜くので、行の下端が揃う */
.cut {
  margin: 0;
  position: relative;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  background: var(--sea);
  box-shadow: 0 10px 28px rgba(20, 33, 61, 0.12);
}

.cut img,
.cut video {
  width: 100%;
  height: auto;
  display: block;
}

/* 動画は切り抜かない。枠は高さだけ合わせ、幅は比率が決める。余りは紙の地のまま残す。 */
.cut--v {
  background: none;
  box-shadow: none;
  overflow: visible;
  display: grid;
  place-items: center;
}

.cut--v video {
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(20, 33, 61, 0.12);
}

.pill {
  position: absolute;
  top: 10px;
  left: 10px;
  font: 500 10px/1 var(--sans);
  letter-spacing: 0.12em;
  padding: 5px 8px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-style: normal;
}

.pill--a {
  background: var(--coral);
  color: #fff;
}

/* 大きいデート。左に主写真、右に補助の写真と縦動画、下に文字 */
.big {
  --gap: clamp(12px, 1.6vw, 22px);
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  grid-template-areas:
    "m s"
    "t t";
  gap: var(--gap);
  margin-bottom: clamp(48px, 7vw, 90px);
}

.cut--main {
  grid-area: m;
}

/* 脇は主写真と同じ高さに割る。動画は比率のまま、余りは写真が cover で吸う。 */
.big__s {
  grid-area: s;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-height: 0;
}

.big__s .cut {
  flex: 1 1 0;
  min-height: 0;
}

.big__s .cut--v {
  flex: 1.5 1 0;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
}

.big__s img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.big__s video {
  width: auto;
  height: 100%;
}

.big__t {
  grid-area: t;
  padding-top: 4px;
}

.big__t h3 {
  font-family: var(--min);
  font-weight: 500;
  font-size: clamp(19px, 2.2vw, 28px);
  margin: 0;
  text-wrap: balance;
}

.big__t .when {
  font: 300 13px var(--num);
  letter-spacing: 0.14em;
  color: var(--mute);
  margin: 4px 0 0;
}

.big__t .note {
  font-family: var(--min);
  font-size: clamp(14px, 1.5vw, 17px);
  margin: 10px 0 0;
  max-width: 28em;
  text-wrap: pretty;
}

/* 小さいデート。大きい枠が来るまでのあいだ、タイルで並べる。
   行の高さを先に決め、写真は 4:5 に切る。動画だけ比率のまま幅が狭くなる。 */
.tiles {
  --gap: clamp(12px, 1.6vw, 22px);
  --cols: 4;
  --cw: min(1140px, 100vw - 40px);
  /* 2px 削るのは、丸めで 4 枚目が次の行へ落ちるのを避けるため。 */
  --tw: calc((var(--cw) - (var(--cols) - 1) * var(--gap) - 2px) / var(--cols));
  --h: calc(var(--tw) * 1.25);
  --inner: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  align-items: flex-start;
  margin-bottom: clamp(48px, 7vw, 90px);
}

/* 幅は「行の高さ × 中身の比率の合計」。題名や一言の長さでは変わらない。
   行の余りは写真が伸びて埋めるが、1 枚だけの行で横長に伸びきらないよう頭を打つ。
   横長の動画で幅が本文を超えるときだけ、そのタイルの高さを落として収める。 */
.tile {
  --th: min(var(--h), calc((var(--cw) - (var(--n) - 1) * var(--inner)) / var(--k)));
  --bw: calc(var(--th) * var(--k) + (var(--n) - 1) * var(--inner));
  margin: 0;
  flex: 1 1 var(--bw);
  max-width: calc(var(--bw) * 1.5);
  min-width: 0;
}

/* 動画の入ったタイルは伸ばさない。伸ばすと比率が崩れるか、脇に空きが出る。 */
.tile--v {
  flex-grow: 0;
}

.tile__m {
  display: flex;
  gap: var(--inner);
  height: var(--th);
}

.tile__m .cut {
  flex: 1 1 0;
  height: 100%;
}

.tile__m .cut--v {
  flex: 0 0 calc(var(--th) * var(--ar));
}

/* 動画の枠は実寸の比率そのものなので、cover でも切れない。 */
.tile__m img,
.tile__m video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tile figcaption {
  padding: 8px 2px 0;
}

.tile h3 {
  font-family: var(--min);
  font-weight: 500;
  font-size: clamp(13px, 1.3vw, 16px);
  margin: 0;
  line-height: 1.5;
}

.tile .when {
  font: 300 11px var(--num);
  letter-spacing: 0.12em;
  color: var(--mute);
  margin: 2px 0 0;
}

.tile .note {
  font-family: var(--min);
  font-size: 12px;
  color: var(--mute);
  margin: 4px 0 0;
  text-wrap: pretty;
}

/* 年の締めの 1 枚。文字は写真の外へ置く */
.divider {
  display: block;
  margin: clamp(30px, 5vw, 60px) calc(50% - 50vw) 0;
}

.divider figure {
  margin: 0;
}

.divider__f {
  height: 70svh;
  overflow: hidden;
  background: var(--sea);
}

.divider__f img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.divider figcaption {
  padding: 22px 20px 0;
  text-align: center;
  font-family: var(--min);
  font-size: clamp(20px, 3.2vw, 34px);
  letter-spacing: 0.08em;
}

.divider figcaption small {
  display: block;
  font: 300 12px var(--num);
  letter-spacing: 0.2em;
  color: var(--mute);
  margin-top: 8px;
}

@supports (animation-timeline: scroll()) {
  /* 主写真だけ、枠の中で少し流す。 */
  .cut--main img,
  .cut--main video {
    animation: drift linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }

  @keyframes drift {
    from {
      transform: scale(1.06) translateY(-1.6%);
    }
    to {
      transform: scale(1.06) translateY(1.6%);
    }
  }

  /* 時間軸は通常の流れに残る figure に置き、動かすのは中の画像だけ。 */
  .divider figure {
    view-timeline: --divider;
  }

  .divider__f img {
    animation: wide-in linear both;
    animation-timeline: --divider;
    animation-range: entry 0% exit 100%;
  }

  /* 終わりも等倍まで戻さない。戻すと 2% 下げたぶん、上端に地の色が出る。 */
  @keyframes wide-in {
    from {
      transform: scale(1.12) translateY(-2%);
    }
    to {
      transform: scale(1.05) translateY(2%);
    }
  }

  .yr__n {
    animation: num-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 80%;
  }

  @keyframes num-in {
    from {
      opacity: 0;
      letter-spacing: 0.2em;
    }
    to {
      opacity: 1;
      letter-spacing: -0.04em;
    }
  }
}

@media (max-width: 1000px) {
  .tiles {
    --cols: 3;
  }
}

@media (max-width: 760px) {
  .yr__n {
    font-size: 52px;
  }

  .yr h2 {
    font-size: 18px;
  }

  /* 主写真 → 補助 2 列 → 文字の順に積む。 */
  .big {
    grid-template-columns: 1fr;
    grid-template-areas:
      "m"
      "s"
      "t";
  }

  /* 横に並べるので、高さを割るのではなく行の高さに合わせる。 */
  .big__s {
    flex-direction: row;
    align-items: stretch;
  }

  .big__s .cut,
  .big__s .cut--v {
    flex: 1 1 0;
    min-width: 0;
  }

  .big__s video {
    width: 100%;
    height: auto;
  }

  .tiles {
    --cols: 2;
    --gap: 12px;
  }

  .divider__f {
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

@supports (animation-timeline: scroll()) {
  .hero {
    height: 190svh;
  }

  /* 散るのは外側の .float。揺れは中の .pol が持つので、互いに打ち消さない。 */
  .float {
    animation: scatter linear both;
    animation-timeline: scroll(root);
    animation-range: 0 100svh;
  }

  @keyframes scatter {
    to {
      transform: translate(var(--dx), var(--dy)) scale(1.2);
      opacity: 0;
    }
  }

  .title {
    animation: title-out linear both;
    animation-timeline: scroll(root);
    animation-range: 15svh 85svh;
  }

  @keyframes title-out {
    to {
      transform: scale(0.86) translateY(-12vh);
      opacity: 0;
    }
  }
}

@media (max-width: 560px) {
  .float {
    --rot: var(--mr);
    --dx: var(--mox);
    --dy: var(--moy);
    --depth: var(--mz);
    left: var(--mx);
    top: var(--my);
    width: var(--mw);
  }

  .float--pc {
    display: none;
  }

  .title h1 {
    font-size: clamp(76px, 23vw, 120px);
  }

  .title::before {
    inset: 18% -20%;
  }
}