@property --r{syntax:'<length>';inherits:true;initial-value:0px}
.earth-portal-us{position:relative;display:inline-block;padding:0;margin:0;border:0;border-radius:0;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;line-height:inherit;cursor:pointer;user-select:text;-webkit-tap-highlight-color:transparent;vertical-align:baseline}
.earth-portal-word{position:relative;z-index:1;display:inline-block;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.2em}
.earth-portal-us:hover .earth-portal-word{text-decoration-thickness:3px}
.earth-portal-us:focus-visible{outline:1px solid currentColor;outline-offset:5px}
/* While a photo is being looked at, EARTH (same size as US) sits exactly over US, with the film's rocket on the ground to its right
   about to lift off: rumbling, flame flickering, smoke puffing out along the ground. The layout underneath never moves. */
.earth-portal-earth{position:absolute;left:0;top:0;display:none;white-space:nowrap}
.earth-portal-earth-word{position:relative;z-index:1;display:inline-block;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.2em;animation:earth-portal-pop .25s ease-out}
@keyframes earth-portal-pop{from{opacity:0;translate:0 .15em}}
.earth-portal-pad{position:relative;display:inline-block;width:.9em;height:1em;margin-left:.4em;vertical-align:baseline;pointer-events:none}
.earth-portal-pad:before{content:'';position:absolute;left:-.4em;right:-.35em;bottom:-.26em;height:1.5px;background:currentColor}
.earth-portal-rocket{position:absolute;left:.02em;bottom:-.26em;width:.85em;height:auto;transform-origin:50% 100%;animation:earth-portal-rumble .09s steps(2) infinite}
@keyframes earth-portal-rumble{0%{translate:-.6px 0;rotate:-.6deg}50%{translate:.6px -.5px;rotate:.6deg}}
.earth-portal-flame{position:absolute;left:.35em;bottom:-.3em;width:.18em;height:.34em;border-radius:50% 50% 50% 50%/30% 30% 70% 70%;background:#eeb279;box-shadow:inset 0 -.06em 0 #f3e7cc;transform-origin:50% 0;animation:earth-portal-flame .12s steps(2) infinite}
@keyframes earth-portal-flame{50%{scale:1 .7}}
.earth-portal-smoke{position:absolute;left:.44em;bottom:-.3em;width:.42em;height:.42em;margin-left:-.21em;border-radius:50%;background:#f3e7cc;box-shadow:0 0 0 1px #1f3a35;opacity:0;animation:earth-portal-smoke 1.2s ease-out infinite}
.earth-portal-smoke.s1{--dx:-.9em}.earth-portal-smoke.s2{--dx:.9em;animation-delay:.3s}.earth-portal-smoke.s3{--dx:-.55em;animation-delay:.6s}.earth-portal-smoke.s4{--dx:.6em;animation-delay:.9s;z-index:2}
@keyframes earth-portal-smoke{0%{opacity:1;scale:.3;translate:0 0}70%{opacity:.95}100%{opacity:0;scale:1.25;translate:var(--dx) -.12em}}
.earth-portal-label[data-earth=true] .earth-portal-earth{display:block}
.earth-portal-label[data-earth=true] .earth-portal-word{visibility:hidden}
.earth-portal-us:hover .earth-portal-earth-word{text-decoration-thickness:3px}

/* EARTH pressed: a circle opens from the middle of the screen onto the launch film (the rocket leaving Tokyo) */
.earth-portal-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;display:block}
.earth-portal-takeover{position:fixed;inset:0;z-index:2147483000;pointer-events:none;visibility:hidden;--cx:50%;--cy:50%;--reach:150vmax}
.earth-portal-takeover:not([data-stage=closed]):not(:empty){visibility:visible}
.earth-portal-takeover[data-stage=closed]{visibility:hidden}
.earth-portal-takeover:not([data-stage=closed]){pointer-events:auto}
.earth-portal-scene{position:absolute;inset:0;background:#0b1220;clip-path:circle(0 at var(--cx) var(--cy));transition:clip-path .7s cubic-bezier(.7,0,.3,1)}
.earth-portal-takeover[data-stage=open] .earth-portal-scene,.earth-portal-takeover[data-stage=done] .earth-portal-scene{clip-path:circle(var(--reach) at var(--cx) var(--cy))}
.earth-portal-wave{position:absolute;left:var(--cx);top:var(--cy);width:0;height:0;translate:-50% -50%;border-radius:50%;box-shadow:0 0 0 2px #1f3a35,0 0 0 9px #f3e7cc,0 0 0 11px #1f3a35;opacity:0}
.earth-portal-takeover[data-stage=open] .earth-portal-wave{width:calc(var(--reach)*2);height:calc(var(--reach)*2);opacity:1;transition:width .7s cubic-bezier(.7,0,.3,1),height .7s cubic-bezier(.7,0,.3,1)}
.earth-portal-loading{position:absolute;inset:0;display:grid;place-items:center;background:#f3e7cc;color:#203832;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s .25s}
.earth-portal-loading p{margin:0;padding-left:2.2em;font:400 clamp(26px,4.4vw,44px)/1 'Dela Gothic One','Hiragino Sans','Arial Black',sans-serif;letter-spacing:.14em;text-indent:.14em}
.earth-portal-loading span{display:inline-block;width:2.2em;text-align:left;text-indent:0}
.earth-portal-loading span:after{content:'';animation:earth-portal-dots 1s steps(1) infinite}
@keyframes earth-portal-dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
.earth-portal-takeover[data-stage=loading] .earth-portal-scene{clip-path:circle(var(--reach) at var(--cx) var(--cy))}
.earth-portal-takeover[data-stage=loading] .earth-portal-loading{opacity:1;visibility:visible;transition:opacity .25s ease}
.earth-portal-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* Member photos: the area under the cursor turns into the studio crew */
.earth-portal-lens{position:absolute;inset:0;z-index:2;pointer-events:none;--x:50%;--y:30%;--r:0px;transition:--r .2s ease-out}
.earth-portal-lens[data-on=true]{--r:clamp(60px,8vw,84px)}
.earth-portal-lens-view{position:absolute;inset:0;background:linear-gradient(180deg,#b3c7a8,#93ad8e);clip-path:circle(var(--r) at var(--x) var(--y))}
.earth-portal-lens-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.earth-portal-lens-ring{position:absolute;left:var(--x);top:var(--y);width:calc(var(--r)*2);height:calc(var(--r)*2);translate:-50% -50%;border-radius:50%;box-shadow:0 0 0 1px #1f3a35,0 0 0 4px #4f7a5c,0 0 0 5px #1f3a35,inset 0 0 0 1px #1f3a35;opacity:0;transition:opacity .15s}
.earth-portal-lens[data-on=true] .earth-portal-lens-ring{opacity:1}
.earth-portal-photo{cursor:crosshair}

@media(prefers-reduced-motion:reduce){.earth-portal-lens,.earth-portal-scene,.earth-portal-wave{transition:none!important}.earth-portal-earth-word,.earth-portal-rocket,.earth-portal-flame,.earth-portal-loading span:after{animation:none}.earth-portal-smoke{display:none}.earth-portal-loading{transition:none}}