/* MY INOCHI LIFE — lantern white, ink, and the gold of her spiral. The light is the world. */
.in{overflow-x:clip;background:var(--ground);color:var(--ink)}
.in-eyebrow{font-family:var(--body);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--signal-deep);margin:0 0 1rem}
.in-word{font-family:var(--head);font-style:italic;font-size:clamp(1.25rem,2.4vw,1.7rem);color:var(--ink);text-decoration:none;border-bottom:1px solid var(--signal);padding-bottom:.15rem}
[data-rise]{opacity:0;transform:translateY(18px);transition:opacity 1.1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1)}[data-rise].is-in{opacity:1;transform:none}
.in-spiral{display:block}

/* MOMENT ONE · the life force turning */
.in-arrive{position:relative;min-height:100vh;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;justify-items:center;align-items:start;padding:clamp(5rem,10vh,7rem) 6vw clamp(4rem,8vh,6rem);text-align:center;overflow:hidden}
.in-arrive__kanji{position:absolute;left:50%;top:62%;transform:translate(-50%,-50%);font-family:var(--kanji);font-size:clamp(18rem,52vw,40rem);line-height:1;color:var(--signal);opacity:.07;pointer-events:none;user-select:none}
.in-arrive .in-spiral{position:absolute;left:50%;top:62%;width:min(88vw,720px);height:min(88vw,720px);transform:translate(-50%,-50%);pointer-events:none}
.in-arrive__words{position:relative;z-index:1;max-width:44rem;padding-top:clamp(1rem,4vh,3rem)}
.in-name{font-family:var(--name);font-weight:500;font-size:clamp(2.6rem,7.5vw,5.6rem);line-height:1;letter-spacing:.02em;margin:0 0 .8rem;color:var(--ink);animation:in-in 1.6s cubic-bezier(.2,.7,.2,1) both}
.in-line{font-family:var(--head);font-style:italic;font-size:clamp(1.25rem,2.6vw,1.9rem);margin:0;color:var(--signal-deep);animation:in-in 1.6s .3s cubic-bezier(.2,.7,.2,1) both}
.in-arrive .in-eyebrow{animation:in-in 1.2s .1s both}
.in-arrive__sub{position:relative;z-index:1;align-self:end;max-width:34rem;margin:0 auto;font-family:var(--head);font-size:clamp(1.02rem,1.8vw,1.25rem);line-height:1.55;color:var(--ink);animation:in-in 1.6s 1.2s both}
@keyframes in-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.in-down{position:absolute;left:6vw;bottom:clamp(1.2rem,3vh,2.4rem);width:1px;height:3.6rem}
.in-down span{position:absolute;inset:0;background:linear-gradient(180deg,var(--signal),transparent);transform-origin:top;animation:in-fall 2.6s ease-in-out infinite}
@keyframes in-fall{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}

/* MOMENT TWO · her verse */
.in-verse{padding:clamp(4rem,12vh,9rem) 6vw;text-align:center;background:#fff}
.in-verse__v{max-width:40rem;margin:0 auto 2.4rem}
.in-verse__v p{margin:0 0 .3em;font-family:var(--head);font-size:clamp(1.35rem,2.8vw,2.1rem);line-height:1.3;color:var(--ink);opacity:0;transform:translateY(10px);transition:opacity .9s ease,transform .9s ease;transition-delay:calc(var(--n) * .22s)}
.is-in .in-verse__v p{opacity:1;transform:none}
.in-verse__gap{display:block;height:1.1em}
.in-verse__law{font-family:var(--body);font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--signal-deep);margin:0}

/* MOMENT THREE · five portals */
.in-portals{padding:clamp(4rem,12vh,9rem) 6vw;text-align:center}
.in-portals h2{font-family:var(--head);font-weight:500;font-size:clamp(1.8rem,3.8vw,3rem);line-height:1.1;margin:0 auto 3rem;max-width:30rem;color:var(--ink)}
.in-portals__list{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(1rem,2.5vw,2.4rem);max-width:80rem}
.in-portal{position:relative;padding:1rem .4rem 0;opacity:0;transform:translateY(14px);transition:opacity 1s ease,transform 1s ease;transition-delay:calc(.2s + var(--n) * .2s)}
.is-in .in-portal{opacity:1;transform:none}
.in-spiral--small{width:min(100%,180px);height:min(100%,180px);aspect-ratio:1;margin:0 auto .6rem}
.in-portal__kanji{display:block;font-family:var(--kanji);font-size:1.6rem;color:var(--signal-deep);margin:0 0 .3rem}
.in-portal h3{font-family:var(--body);font-weight:600;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;margin:0 0 .3rem;color:var(--ink)}
.in-portal__say{font-family:var(--head);font-style:italic;font-size:1.2rem;margin:0 0 .6rem;color:var(--signal-deep)}
.in-portal__m{font-family:var(--body);font-size:.92rem;line-height:1.55;margin:0;color:var(--ink)}

/* MOMENT FOUR · read backwards */
.in-back{padding:clamp(4rem,12vh,9rem) 6vw;text-align:center;background:var(--ink);color:#fff}
.in-back .in-eyebrow{color:var(--signal)}
.in-back h2{font-family:var(--head);font-weight:500;font-size:clamp(1.8rem,3.8vw,3rem);line-height:1.1;margin:0 0 2.4rem;color:#fff}
.in-back__ask{font-family:var(--head);font-size:clamp(1.6rem,4.2vw,3.4rem);line-height:1.25;max-width:40rem;margin:0 auto 2rem;color:var(--signal)}
.in-back__ask span{display:inline-block;opacity:0;transform:translateY(8px);transition:opacity .7s ease,transform .7s ease;transition-delay:calc(.3s + var(--n) * .26s)}
.is-in .in-back__ask span{opacity:1;transform:none}
.in-back__body{font-family:var(--body);font-size:1.02rem;line-height:1.7;max-width:36rem;margin:0 auto 1.6rem;color:rgba(255,255,255,.88)}
.in-back__dhb{margin:0}.in-back .in-word{color:#fff;border-color:var(--signal)}

/* MOMENT FIVE · being alive */
.in-close{position:relative;padding:clamp(6rem,14vh,10rem) 6vw clamp(5rem,12vh,9rem);text-align:center;overflow:hidden}
.in-spiral--close{position:absolute;left:50%;top:50%;width:min(120vw,900px);height:min(120vw,900px);transform:translate(-50%,-50%);opacity:.7;pointer-events:none}
.in-close__head{position:relative;font-family:var(--head);font-weight:500;font-size:clamp(2.2rem,6vw,4.6rem);line-height:1.05;margin:0 0 1.4rem;color:var(--ink)}
.in-close__p{position:relative;font-family:var(--body);font-size:1.05rem;line-height:1.7;max-width:36rem;margin:0 auto 2rem;color:var(--ink)}
.in-close__last{position:relative;font-family:var(--name);font-size:clamp(1.8rem,4.6vw,3.4rem);letter-spacing:.06em;margin:0 0 1.2rem;color:var(--signal-deep)}
.in-close__line{position:relative;font-family:var(--body);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);margin:0}

@media(max-width:900px){.in-portals__list{grid-template-columns:repeat(2,minmax(0,1fr))}.in-portal:last-child{grid-column:1/-1;max-width:50%;margin:0 auto}}
@media(max-width:820px){.in-arrive__kanji{font-size:70vw}.in-arrive .in-spiral{width:96vw;height:96vw}}
@media(prefers-reduced-motion:reduce){.in *{animation:none!important;transition:none!important}.in-portal,.in-verse__v p,.in-back__ask span,[data-rise]{opacity:1!important;transform:none!important}}