:root{
  --bg:#fff; --ink:#0d2b33; --teal:#1fb4c4; --teal-l:#d9f4f7; --sun:#ffd84a;
  --pad:clamp(20px,3.4vw,52px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);overflow:hidden;-webkit-font-smoothing:antialiased}
.mono{font-family:Outfit,sans-serif;font-weight:600;font-size:.74rem;letter-spacing:.22em}

.stage{position:relative;width:100%;height:100svh;overflow:hidden;--px:0;--py:0}
.dots{position:absolute;inset:0;background-image:radial-gradient(rgba(13,43,51,.16) 1px,transparent 1.4px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 60%);mask-image:linear-gradient(90deg,#000,transparent 60%)}

/* color shapes behind character */
.sun{position:absolute;right:calc(14vw + var(--px)*-14px);top:calc(12svh + var(--py)*-10px);width:min(46svh,34vw);aspect-ratio:1;border-radius:50%;background:var(--sun);
  transform:scale(0);animation:pop 1.1s .25s cubic-bezier(.2,1.2,.3,1) forwards}
.disc{position:absolute;right:calc(-12vw + var(--px)*10px);bottom:-22svh;width:min(92svh,66vw);aspect-ratio:1;border-radius:50%;background:var(--teal-l);
  transform:scale(0);animation:pop 1.3s .1s cubic-bezier(.2,1.1,.3,1) forwards}
@keyframes pop{to{transform:scale(1)}}

.bigword{position:absolute;left:-1vw;bottom:-3.4vw;font-family:Outfit,sans-serif;font-weight:800;font-size:clamp(4rem,17vw,19rem);line-height:1;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1.5px rgba(31,180,196,.55);letter-spacing:-.04em;
  transform:translateX(calc(var(--px)*-18px));opacity:0;animation:fade 1.4s .6s forwards}
@keyframes fade{to{opacity:1}}

.chara{position:absolute;bottom:0;left:calc(68vw - 107svh);height:100svh;width:auto;max-width:none;
  transform:translate(calc(var(--px)*8px),calc(var(--py)*6px)) translateY(40px);opacity:0;
  animation:rise 1.3s .35s cubic-bezier(.2,.9,.2,1) forwards;filter:drop-shadow(0 18px 40px rgba(13,43,51,.18))}
@keyframes rise{to{opacity:1;transform:translate(calc(var(--px)*8px),calc(var(--py)*6px))}}

.top,.bot{position:absolute;left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;z-index:5}
.top{top:var(--pad);justify-content:flex-start;gap:28px} .bot{bottom:var(--pad)}
.bot{justify-content:flex-start;gap:6px 28px;flex-wrap:wrap}
.sns{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px 16px;margin-bottom:6px}
.sns a{color:var(--ink);text-decoration:none;position:relative;transition:color .25s}
.sns a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s}
.sns a:hover{color:var(--teal)}.sns a:hover::after{transform:scaleX(1)}
.pw{flex-basis:100%}
.pw a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;transition:color .25s}
.pw a:hover{color:var(--teal)}

.name{position:absolute;left:var(--pad);top:50%;transform:translateY(-52%);z-index:4;display:flex;align-items:flex-start;gap:clamp(14px,2vw,32px)}
.jp{display:flex;flex-direction:column;font-family:"Shippori Mincho B1",serif;font-weight:800;font-size:clamp(3rem,10.5svh,7.4rem);line-height:1.04}
.jp span{display:block;transform:translateY(-110%);opacity:0;animation:drop .9s cubic-bezier(.2,.9,.2,1) forwards}
.jp span:nth-child(1){animation-delay:.5s}.jp span:nth-child(2){animation-delay:.58s}.jp span:nth-child(3){animation-delay:.66s}
.jp span:nth-child(4){animation-delay:.74s}.jp span:nth-child(5){animation-delay:.82s}
@keyframes drop{to{transform:none;opacity:1}}
.en{writing-mode:vertical-rl;font-family:Outfit,sans-serif;font-weight:800;font-size:clamp(1.1rem,3.2svh,2rem);letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal);align-self:flex-end;margin-bottom:.6em;opacity:0;animation:fade 1s 1.1s forwards}
.en b{color:var(--ink);font-weight:800}

@media (max-width:760px){
  .chara{top:0;bottom:auto;left:calc(56vw - 70svh);height:66svh;
    -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent);mask-image:linear-gradient(180deg,#000 62%,transparent)}
  .sun{display:none}
  .disc{width:120vw;right:-36vw;bottom:-52svh}
  .name{top:auto;bottom:calc(var(--pad) + 92px);transform:none;flex-direction:column;align-items:flex-start;gap:6px}
  .jp{flex-direction:row;font-size:clamp(2.8rem,15vw,4.6rem);line-height:1.1}
  .jp span{transform:translateY(-60%)}
  .en{writing-mode:horizontal-tb;margin:0;align-self:flex-start;font-size:clamp(1rem,5vw,1.5rem)}
  .bigword{display:none}
  .top{color:#fff;text-shadow:0 1px 8px rgba(13,43,51,.45)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
  .sun,.disc{transform:none}.chara,.bigword,.en,.jp span{opacity:1;transform:none}
}