/* Four short messages lead from everyday shop work into the recruiting page. */
.intro-overlay.opening-v4{display:block;background:var(--paper);color:var(--ink);isolation:isolate;transition:transform .8s cubic-bezier(.76,0,.24,1);transform:translateY(0);--opening-ease:cubic-bezier(.16,1,.3,1)}
.intro-overlay.opening-v4:before{content:none}
.intro-overlay.opening-v4.is-hidden{visibility:hidden;opacity:0;pointer-events:none}
.opening-v4.is-leaving{transform:translateY(-102%);pointer-events:none}
.opening-v4 .opening-beat{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:90px 28px 105px;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s ease;overflow:hidden}
.opening-v4 .opening-beat.is-current{opacity:1;visibility:visible}
.opening-v4 .beat-one{background:var(--ink);color:var(--paper)}
.opening-v4 .beat-two{background:var(--lime);color:var(--ink)}
.opening-v4 .beat-three{background:var(--orange);color:var(--ink)}
.opening-v4 .beat-four{background:var(--paper);color:var(--ink)}
.opening-v4 p{position:relative;margin:0;padding:0;animation:none;text-align:center;font-weight:700;line-height:1.5;letter-spacing:-.055em;z-index:2}
.opening-v4 .opening-small{font-size:clamp(18px,2.2vw,31px);margin-bottom:17px;letter-spacing:-.025em}
.opening-v4 .opening-large{font-size:clamp(37px,5.8vw,84px);font-weight:900;line-height:1.45}
.opening-v4 .opening-final-quote{font-size:clamp(17px,2.1vw,30px);margin-bottom:24px}
.opening-v4 .opening-final-main{color:var(--green);font-size:clamp(42px,6.3vw,90px);font-weight:900;line-height:1.45}
.opening-v4 .opening-service{display:inline-block;border:1px solid #006b6150;border-radius:30px;padding:9px 20px;margin-top:30px;font-size:11px;letter-spacing:.05em;font-weight:600;color:var(--green)}
.opening-v4 .opening-store{position:relative;width:210px;height:135px;margin-top:35px;z-index:2;color:var(--lime)}
.opening-store path,.opening-store rect,.opening-store circle{vector-effect:non-scaling-stroke}
.opening-store .store-shutter{transform-origin:center 25px;fill:var(--ink)}
.opening-store .store-light{fill:var(--lime);opacity:.25}
.opening-v4 .opening-background-word{font-family:Manrope,sans-serif;font-size:clamp(160px,30vw,450px);font-weight:800;letter-spacing:-.08em;line-height:1;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#ffffff05;pointer-events:none;white-space:nowrap;z-index:0}
.opening-v4 .opening-people{display:flex;justify-content:center;align-items:center;gap:26px;margin-top:42px;z-index:2;position:relative}
.opening-v4 .opening-person{width:125px;height:135px;background-image:url('store-people-v2.png');background-size:300% auto;background-color:#d3dbcb;box-shadow:0 10px 30px #152d2a0d;border:4px solid var(--paper);transform:rotate(var(--tilt));border-radius:48% 48% 5px 5px}
.opening-v4 .person-one{background-position:0% 43%;--tilt:-8deg;--delay:.15s}
.opening-v4 .person-two{background-position:50% 34%;--tilt:5deg;--delay:.3s;border-radius:50%;margin-top:35px}
.opening-v4 .person-three{background-position:100% 39%;--tilt:9deg;--delay:.45s;border-radius:50%}
.opening-v4 .opening-orbit{position:absolute;width:620px;height:620px;border:1px solid #152d2a12;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-20deg) scaleX(1.35);z-index:0;pointer-events:none}
.opening-v4 .beat-three .opening-orbit{width:530px;height:530px;border:70px solid #ffffff1c;transform:translate(-50%,-50%)}
.opening-v4 .opening-drawn-line{position:relative;display:block;width:280px;height:25px;color:var(--ink);margin-top:30px;z-index:2;overflow:visible}
.opening-drawn-line path{fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.opening-v4.is-playing .is-current .opening-small,.opening-v4.is-playing .is-current .opening-final-quote{animation:message-rise .7s var(--opening-ease) both}
.opening-v4.is-playing .is-current .opening-large,.opening-v4.is-playing .is-current .opening-final-main{animation:message-rise .9s .13s var(--opening-ease) both}
.opening-v4.is-playing .is-current .opening-service{animation:message-rise .8s .7s var(--opening-ease) both}
.opening-v4.is-playing .is-current .opening-store{animation:message-rise .9s .15s var(--opening-ease) both}
.opening-v4.is-playing .is-current .store-shutter{animation:store-open 1.25s .4s var(--opening-ease) both}
.opening-v4.is-playing .is-current .store-light{animation:store-warm 1s .65s ease both}
.opening-v4.is-playing .is-current .opening-person{animation:person-arrive .9s var(--delay) var(--opening-ease) both}
.opening-v4.is-playing .is-current .opening-drawn-line path{animation:message-line .9s .55s var(--opening-ease) both}
.opening-v4 .opening-top{position:absolute;z-index:5;top:max(24px,env(safe-area-inset-top));left:40px;right:40px;display:flex;justify-content:space-between;align-items:center;gap:15px;color:var(--ink);transition:color .4s}
.opening-v4[data-phase="0"] .opening-top,.opening-v4[data-phase="0"] .opening-bottom{color:var(--paper)}
.opening-v4 .opening-brand{font-size:12px;font-weight:800;line-height:1.5;letter-spacing:-.02em}
.opening-brand small{display:block;font-family:Manrope,sans-serif;font-size:8px;font-weight:600;letter-spacing:.13em;margin-top:5px}
.opening-v4 button{font-size:11px;border:1px solid currentColor;border-radius:30px;background:transparent;color:inherit;padding:10px 17px;min-height:44px;position:static;white-space:nowrap}
.opening-v4 button:hover{background:#ffffff22}
.opening-v4 .opening-bottom{position:absolute;z-index:5;bottom:max(25px,env(safe-area-inset-bottom));left:40px;right:40px;display:flex;align-items:end;justify-content:space-between;gap:20px;color:var(--ink);transition:color .4s}
.opening-v4 .opening-caption{font-size:9px;font-weight:500;letter-spacing:.02em;line-height:1.7;text-align:left}
.opening-v4 .opening-progress{width:160px;height:2px;background:currentColor;opacity:.75;overflow:hidden;margin-top:12px;position:relative}
.opening-progress:before{content:'';position:absolute;inset:0;background:var(--paper);opacity:.7}
.opening-progress:after{content:'';position:absolute;inset:0;background:var(--green);transform-origin:left}
.opening-v4[data-phase="0"] .opening-progress:after{background:var(--lime)}
.opening-v4.is-playing .opening-progress:after{animation:message-progress 9.1s linear both}
.opening-v4 .opening-photo-note{font-size:8px;line-height:1.7;text-align:right;opacity:0;transition:opacity .4s}
.opening-v4[data-phase="1"] .opening-photo-note{opacity:.7}
html{scrollbar-gutter:stable}html.intro-playing{overflow:hidden}
.intro-playing .hero-line>span,.intro-playing .portrait,.intro-playing .hero-comet,.intro-playing .hero-ring,.intro-playing .hero-dot{animation-play-state:paused!important}
html.intro-handoff .hero-line>span,html.intro-handoff .portrait,html.intro-handoff .hero-comet,html.intro-handoff .hero-ring,html.intro-handoff .hero-dot{animation-play-state:running!important}
.hero-controls{display:flex;align-items:center;gap:20px}
.hero-controls [data-replay-intro]{border:0;background:none;font-size:10px;padding:6px 0;color:var(--green);text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
@keyframes message-rise{from{opacity:0;transform:translateY(35px)}to{opacity:1;transform:translateY(0)}}
@keyframes store-open{from{transform:scaleY(1)}to{transform:scaleY(.04)}}
@keyframes store-warm{from{opacity:0}to{opacity:.5}}
@keyframes person-arrive{from{opacity:0;transform:translateY(45px) rotate(0) scale(.8)}to{opacity:1;transform:translateY(0) rotate(var(--tilt)) scale(1)}}
@keyframes message-line{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes message-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:760px){
 .opening-v4 .opening-beat{padding:85px 22px 105px}
 .opening-v4 .opening-top{left:22px;right:22px;top:max(19px,env(safe-area-inset-top))}
 .opening-v4 .opening-brand{font-size:10px}.opening-brand small{font-size:7px}
 .opening-v4 button{font-size:9px;padding:9px 12px}
 .opening-v4 .opening-small{font-size:clamp(18px,4.8vw,25px);margin-bottom:17px}
 .opening-v4 .opening-large{font-size:clamp(31px,8.5vw,55px);line-height:1.55}
 .opening-v4 .beat-two .opening-large{font-size:clamp(27px,7.5vw,46px)}
 .opening-v4 .opening-final-quote{font-size:clamp(15px,3.8vw,24px);margin-bottom:25px;letter-spacing:-.04em}
 .opening-v4 .opening-final-main{font-size:clamp(40px,10vw,66px);line-height:1.5}
 .opening-v4 .opening-service{font-size:10px;margin-top:27px;padding:8px 15px}
 .opening-v4 .opening-store{width:150px;height:100px;margin-top:30px}
 .opening-v4 .opening-people{gap:14px;margin-top:35px}
 .opening-v4 .opening-person{width:85px;height:98px;border-width:3px}
 .opening-v4 .person-two{margin-top:28px}
 .opening-v4 .opening-orbit{width:350px;height:350px}.opening-v4 .beat-three .opening-orbit{width:400px;height:400px;border-width:55px}
 .opening-v4 .opening-drawn-line{width:210px;margin-top:22px}
 .opening-v4 .opening-bottom{left:22px;right:22px;bottom:max(20px,env(safe-area-inset-bottom));gap:15px}
 .opening-v4 .opening-caption{font-size:8px}.opening-v4 .opening-progress{width:130px;margin-top:9px}
 .opening-v4 .opening-photo-note{font-size:7px;max-width:120px}
 .hero-controls{gap:5px;flex-direction:column;align-items:end}.hero-controls [data-replay-intro]{font-size:9px;padding:0}
}
@media(max-width:360px){.opening-v4 .opening-large{font-size:29px}.opening-v4 .beat-two .opening-large{font-size:25px}.opening-v4 .opening-final-main{font-size:36px}.opening-v4 .opening-person{width:75px;height:88px}.opening-v4 .opening-people{gap:12px}}
@media(max-height:540px){.opening-v4 .opening-beat{padding:72px 22px 65px}.opening-v4 .opening-small{font-size:15px;margin-bottom:10px}.opening-v4 .opening-large{font-size:35px;line-height:1.4}.opening-v4 .opening-store{width:90px;height:60px;margin-top:15px}.opening-v4 .opening-people{margin-top:17px;gap:16px}.opening-v4 .opening-person{width:65px;height:72px}.opening-v4 .person-two{margin-top:10px}.opening-v4 .opening-final-main{font-size:37px}.opening-v4 .opening-final-quote{font-size:16px;margin-bottom:10px}.opening-v4 .opening-service{margin-top:16px;font-size:9px}.opening-v4 .opening-drawn-line{width:160px;margin-top:10px}.opening-v4 .opening-bottom{bottom:15px}}
@media(prefers-reduced-motion:reduce){.intro-overlay.opening-v4{display:none!important}html.intro-playing{overflow:auto}[data-replay-intro]{display:none}}