:root{
  color-scheme:light;
  --paper:#ffffff;
  --ink:#0e0e0e;
  --muted:#767676;
  --hairline:rgba(14,14,14,.10);
  --red:#c8102e;
  --display:'Archivo',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#ffffff}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:38px 24px 32px;
}

.rule{width:22px;height:1px;background:var(--ink);opacity:.4;margin-top:12px}
.petal-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}

/* capsule navigation = the interface */
main{
  flex:1;
  width:100%;
  max-width:760px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:56px;
  padding:48px 0;
}
.capsule{text-align:center;display:flex;flex-direction:column;align-items:center}
.eyebrow{
  font-family:var(--display);
  font-weight:500;
  font-size:11px;
  letter-spacing:.5em;
  text-indent:.5em;
  color:var(--muted);
  margin-bottom:14px;
}
.capsule a{
  position:relative;
  display:inline-block;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(26px,5.6vw,38px);
  letter-spacing:.22em;
  text-indent:.22em;
  color:var(--ink);
  text-decoration:none;
  padding-bottom:10px;
  transition:letter-spacing .35s ease;
}
.capsule a::after{
  content:"";
  position:absolute;
  left:50%;bottom:0;
  width:0;height:1px;
  background:var(--red);
  transition:width .35s ease,left .35s ease;
}
.capsule a:hover,.capsule a:focus-visible{letter-spacing:.28em;text-indent:.28em}
.capsule a:hover::after,.capsule a:focus-visible::after{width:100%;left:0}
.capsule a:focus-visible{outline:none}
.status{
  margin-top:14px;
  font-size:11px;
  letter-spacing:.34em;
  text-indent:.34em;
  color:var(--muted);
}

/* footer */
.site-footer{display:flex;flex-direction:column;align-items:center}
.tagline{font-size:12.5px;letter-spacing:.03em;color:var(--muted);text-align:center}
.foot{
  display:flex;align-items:center;gap:9px;
  margin-top:20px;
  font-family:var(--display);
  font-size:11px;letter-spacing:.22em;text-indent:.22em;
  color:var(--muted);
}
.dot{width:5px;height:5px;border-radius:50%;background:var(--red)}
.foot a{color:inherit;text-decoration:none;transition:color .2s}
.foot a:hover{color:var(--ink)}

/* entrance */
.fade{opacity:0;transform:translateY(8px);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.30s}.d3{animation-delay:.55s}.d4{animation-delay:.80s}.d5{animation-delay:1s}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .fade{animation:none;opacity:1;transform:none}
  .capsule a,.capsule a::after{transition:none}
}
/* seal transition */
.seal{position:fixed;width:120px;height:120px;border-radius:50%;background:var(--red);pointer-events:none;z-index:900;transform:translate(-50%,-50%) scale(0);opacity:0}
.seal.hit{animation:stampHit .85s cubic-bezier(.2,.8,.2,1) forwards}
.seal.tap{animation:stampTap .9s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes stampHit{0%{transform:translate(-50%,-50%) scale(.15);opacity:0}18%{transform:translate(-50%,-50%) scale(1.06);opacity:1}30%{transform:translate(-50%,-50%) scale(.96);opacity:1}55%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-50%) scale(26);opacity:1}}
@keyframes stampTap{0%{transform:translate(-50%,-50%) scale(.15);opacity:0}22%{transform:translate(-50%,-50%) scale(1.06);opacity:1}38%{transform:translate(-50%,-50%) scale(.97);opacity:1}60%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}

.sakura{
  position:fixed;
  left:-46px;
  top:16%;
  width:168px;
  max-width:46vw;
  height:auto;
  pointer-events:none;
  z-index:0;
  will-change:transform;
}
body{position:relative;overflow-x:hidden}

/* brand toggle */
.brand{position:relative;display:flex;flex-direction:column;align-items:center;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;height:54px;justify-content:center}
.brand-logo{position:absolute;display:flex;flex-direction:column;align-items:center;transition:opacity .35s ease,transform .35s cubic-bezier(.4,0,.2,1),filter .35s ease}
.brand-logo img{height:46px;width:auto;display:block}
.brand-logo.hide{opacity:0;transform:scale(.55) rotate(-8deg);filter:blur(3px);pointer-events:none}
.brand-text{position:absolute;display:flex;align-items:center;gap:0;opacity:0;pointer-events:none}
.brand-text.show{opacity:1;pointer-events:auto}
.brand-text span{
  font-family:'Archivo',system-ui,sans-serif;
  font-weight:500;font-size:22px;letter-spacing:.38em;
  color:var(--ink);
  display:inline-block;
  opacity:0;transform:translateY(8px) scale(.8);
  transition:opacity .28s ease,transform .28s cubic-bezier(.2,.8,.2,1);
}
.brand-text.show span{opacity:1;transform:none}
.brand-text.show span:nth-child(1){transition-delay:.00s}
.brand-text.show span:nth-child(2){transition-delay:.05s}
.brand-text.show span:nth-child(3){transition-delay:.10s}
.brand-text.show span:nth-child(4){transition-delay:.15s}
.brand-text.show span:nth-child(5){transition-delay:.20s}
.brand-text.show span:nth-child(6){transition-delay:.25s}
.brand-text.show span:nth-child(7){transition-delay:.30s}
.brand-text span.hiding{opacity:0;transform:translateY(-6px) scale(.8)}