/* Openings for the five recruitment proposals. Mobile first; GSAP drives the timeline in opening.js. */
.intro-active,.intro-active body{overflow:hidden}
.op{position:fixed;inset:0;z-index:1000;overflow:hidden;overscroll-behavior:contain;display:flex;flex-direction:column;justify-content:flex-end;padding:max(24px,env(safe-area-inset-top)) 24px max(28px,env(safe-area-inset-bottom));font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;color:var(--op-ink);--op-bg:#f26a1b;--op-ink:#141712;--op-accent:#141712;-webkit-font-smoothing:antialiased}
.op[hidden]{display:none!important}
.op-bg{position:absolute;inset:0;background:var(--op-bg)}
.op-brand{position:absolute;top:max(22px,env(safe-area-inset-top));left:22px;z-index:3;display:flex;align-items:center;gap:12px;font:28px/1 Impact,"Arial Narrow",sans-serif;letter-spacing:.01em}
.op-brand img{width:34px;height:auto}
.op-copy{position:relative;z-index:3;margin-bottom:72px}
.op-kicker{margin:0 0 14px;font-size:13px;font-weight:700;letter-spacing:.12em}
.op h2{margin:0;font-size:clamp(40px,11.5vw,128px);line-height:1.18;font-weight:900;letter-spacing:-.06em}
.op-line{display:block;overflow:hidden;padding:.04em 0 .08em}
.op-line>span{display:inline-block;will-change:transform}
.op-skip{position:absolute;right:16px;bottom:max(16px,env(safe-area-inset-bottom));z-index:4;min-height:48px;padding:0 20px;border:0;border-radius:999px;background:var(--op-accent);color:var(--op-bg);font:700 14px/1 inherit;font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:10px}
.op-focus:focus{outline:none}
.op-skip:focus-visible{outline:3px solid currentColor;outline-offset:4px}
.op-photo{position:absolute;inset:0;z-index:1}
.op-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.op-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0000 30%,#000a 100%)}

/* NEXT: pitch lines draw, then the team photo opens like a kick-off circle. */
.op-next .op-pitch{position:absolute;z-index:0;left:50%;top:42%;width:150vmax;max-width:none;transform:translate(-50%,-50%) rotate(-12deg);fill:none;stroke:#14171273;stroke-width:1.6}
.op-next .op-photo{clip-path:circle(0% at 50% 42%)}
.op-next.op-photo-on{--op-ink:#fff}
.op-next .op-copy,.op-next .op-brand{transition:color .35s}

/* CLUB: black stage, NONISHI slams in, orange slash cuts across. */
.op-club{--op-bg:#0f110e;--op-ink:#fff;--op-accent:#f26a1b}
.op-club .op-photo{opacity:0}
.op-club .op-photo img{filter:grayscale(1) contrast(1.15)}
.op-club .op-photo::after{background:linear-gradient(180deg,#0f110e99,#0f110eee)}
.op-word{position:absolute;z-index:2;left:0;right:0;top:30%;display:flex;justify-content:center;overflow:hidden;font:clamp(84px,25vw,300px)/.9 Impact,"Arial Narrow",sans-serif;letter-spacing:-.02em;color:#f26a1b}
.op-word span{display:inline-block}
.op-slash{position:absolute;z-index:2;left:-20%;right:-20%;top:52%;height:clamp(10px,2.4vw,22px);background:#f26a1b;transform:rotate(-14deg) scaleX(0);transform-origin:left center}
.op-club .op-copy h2>.op-line:last-child>span{color:#f26a1b}

/* STORY: three photographs land like prints on a table. */
.op-story{--op-bg:#f4efe4;--op-ink:#193d32;--op-accent:#193d32}
.op-cards{position:absolute;z-index:1;left:50%;top:38%;width:min(62vw,380px);aspect-ratio:3/4;transform:translate(-50%,-50%)}
.op-cards figure{position:absolute;inset:0;margin:0;padding:8px 8px 34px;background:#fff;border-radius:18px;box-shadow:0 18px 40px #193d3233}
.op-cards img{width:100%;height:100%;object-fit:cover;border-radius:12px}
.op-story .op-copy{margin-bottom:76px}
.op-story .op-line:last-child>span{color:#e0601c}

/* PATH: a route draws from "now" through Nonishi to the future. */
.op-path{--op-bg:#f4f6f4;--op-ink:#203c34;--op-accent:#203c34}
.op-route{position:absolute;z-index:1;left:50%;top:36%;width:min(92vw,620px);transform:translate(-50%,-50%);overflow:visible}
.op-route-line{fill:none;stroke:#ce571d;stroke-width:5;stroke-linecap:round}
.op-stop circle{fill:#203c34;stroke:#f4f6f4;stroke-width:4}
.op-stop:nth-of-type(2) circle{fill:#ce571d}
.op-stop text{font:700 15px "Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;fill:#203c34;text-anchor:middle}

/* MATERIAL: a ripple grows from the emblem into the page colour. */
.op-material{--op-bg:#fff8f4;--op-ink:#fff;--op-accent:#fff;align-items:flex-start}
.op-material .op-skip{color:#a83b08;box-shadow:0 4px 14px #54220033}
.op-ripple{position:absolute;z-index:1;left:50%;top:40%;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:#a83b08}
.op-material .op-brand{left:50%;top:40%;flex-direction:column;gap:10px;padding:22px 26px 16px;border-radius:28px;background:#fff;color:#a83b08;font-size:20px;box-shadow:0 14px 34px #54220033;transform:translate(-50%,-50%)}
.op-material .op-brand img{width:46px}

@media(min-width:768px){
  .op{padding:56px 64px}
  .op-brand{top:48px;left:56px;font-size:40px}
  .op-brand img{width:46px}
  .op-copy{margin-bottom:40px}
  .op-kicker{font-size:16px}
  .op-skip{right:56px;bottom:48px}
  .op-cards{left:auto;right:8vw;top:50%;transform:translateY(-50%);width:min(30vw,420px)}
  .op-route{left:auto;right:6vw;top:34%;transform:translateY(-50%);width:min(46vw,680px)}
  .op h2{font-size:clamp(56px,8vw,128px)}
  .op-material .op-brand{top:42%}
}
@media(prefers-reduced-motion:reduce){.op{display:none!important}}
[data-motion=reduced] .op{display:none!important}
@media print{.op{display:none!important}}