/* Cinematic intro: finite, non-blocking, monochrome. */
.home .joex-hero { isolation:isolate; overflow:hidden; }
.home .joex-hero::after { display:none; }
.home .joex-hero-inner { z-index:3; }
.joe-cinema { position:absolute; z-index:1; width:min(49vw,720px); height:390px; right:-1%; top:95px; pointer-events:none; color:#181818; perspective:1100px; }
.joe-cinema-halo { position:absolute; inset:-70px; background:radial-gradient(ellipse,#d7dadc66,transparent 65%); }
.joe-cinema-stage { position:absolute; inset:0; transform:rotate(-8deg) scale(.88); transform-style:preserve-3d; }
.joe-film-card { position:absolute; padding:18px; border:1px solid white; border-radius:3px; background:linear-gradient(135deg,#fffefb,#eff0f1); box-shadow:0 24px 45px #1112,inset 0 0 0 1px #0000000a; }
.joe-film-eyebrow { display:block; font:600 9px/1.4 monospace; letter-spacing:2px; margin-bottom:15px; color:#777; }
.joe-film-article { width:220px; left:22%; top:10px; z-index:3; transform:rotateY(-13deg) rotateX(9deg); }
.joe-film-image { height:87px; background:#141414; color:white; position:relative; overflow:hidden; padding:18px; }
.joe-film-image span { font:900 42px/1 Montserrat,sans-serif; letter-spacing:-4px; }
.joe-film-image i { position:absolute; right:-10px; top:-25px; width:100px; height:150px; border:1px solid #888; border-radius:50%; transform:rotate(35deg); }
.joe-film-title { margin:14px 0; font:800 21px/1.05 Montserrat,sans-serif; letter-spacing:-1px; }
.joe-film-lines { display:grid; gap:6px; }
.joe-film-lines i { height:3px; background:#c7c7c7; }
.joe-film-lines i:last-child { width:65%; }
.joe-film-footer { display:flex; justify-content:space-between; margin-top:24px; padding-top:10px; border-top:1px solid #ccc; font:8px monospace; }
.joe-film-flow { width:174px; left:65%; top:35px; z-index:2; transform:rotateY(-15deg) rotate(9deg); }
.joe-flow-node { padding:12px 8px; border:1px solid #bbb; display:flex; justify-content:space-between; font:10px monospace; background:#fff9; }
.joe-flow-node-dark { background:#181818; color:white; border-color:#181818; }
.joe-flow-wire { height:22px; width:1px; background:#999; margin:auto; }
.joe-film-web { width:167px; top:169px; left:6%; z-index:4; transform:rotate(-7deg) rotateY(12deg); }
.joe-web-browser { display:flex; gap:4px; border-bottom:1px solid #bbb; padding-bottom:10px; }
.joe-web-browser i { width:3px; height:3px; border-radius:50%; background:#888; }
.joe-web-heading { font:900 29px/.95 Montserrat,sans-serif; letter-spacing:-1.8px; margin:17px 0; }
.joe-web-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
.joe-web-grid i { height:30px; background:linear-gradient(135deg,#bbb,#eee); }
.joe-film-fragment { position:absolute; font:400 35px/1 monospace; color:#777; }
.joe-fragment-a { top:10px; left:5%; } .joe-fragment-b { top:295px; left:82%; } .joe-fragment-c { top:330px; left:56%; }
.joe-cinema-caption { position:absolute; bottom:-12px; left:14%; right:6%; display:flex; justify-content:space-between; border-top:1px solid #bbb; padding-top:9px; font:7px monospace; letter-spacing:1px; color:#888; }
.joe-film-control { position:relative; z-index:5; align-self:flex-end; margin:0 32px 12px; border:0; border-bottom:1px solid #aaa; background:transparent; color:#666; min-height:32px; padding:6px 0; font-size:11px; cursor:pointer; }
.joe-film-control[hidden] { display:none; }
.joe-film-control:focus-visible { outline:2px solid #111; outline-offset:4px; }
.joe-film-playing .joe-cinema-stage { animation:joe-camera 3s cubic-bezier(.2,.7,.15,1) both; }
.joe-film-playing .joe-film-article { animation:joe-article 2.4s cubic-bezier(.16,1,.3,1) both; }
.joe-film-playing .joe-film-flow { animation:joe-flow 2.6s cubic-bezier(.16,1,.3,1) both; }
.joe-film-playing .joe-film-web { animation:joe-web 2.8s cubic-bezier(.16,1,.3,1) both; }
.joe-film-playing .joe-film-fragment { animation:joe-fragment 2.7s cubic-bezier(.16,1,.3,1) both; }
.joe-film-playing h1 > strong { display:inline-block; animation:joe-title 1s 1.2s cubic-bezier(.16,1,.3,1) both; }
.joe-type-letter { opacity:0; } .joe-type-letter.is-visible { opacity:1; }
.joe-type-letter.is-current { border-right:2px solid currentColor; margin-right:-2px; }
@keyframes joe-camera { 0% { transform:translate(45px,30px) rotate(-20deg) scale(1.65); filter:blur(9px); opacity:0; } 18% { opacity:.8; } 60% { filter:blur(0); } 100% { transform:rotate(-8deg) scale(.88); opacity:1; } }
@keyframes joe-article { from { transform:translate(-110px,60px) rotateY(-55deg) rotate(-12deg); } to { transform:rotateY(-13deg) rotateX(9deg); } }
@keyframes joe-flow { from { transform:translate(140px,-80px) rotate(30deg); opacity:0; } to { transform:rotateY(-15deg) rotate(9deg); opacity:1; } }
@keyframes joe-web { from { transform:translate(-90px,110px) rotate(-35deg); opacity:0; } to { transform:rotate(-7deg) rotateY(12deg); opacity:1; } }
@keyframes joe-fragment { from { transform:translateY(-65px) rotate(50deg); opacity:0; } to { transform:none; opacity:1; } }
@keyframes joe-title { from { clip-path:inset(100% 0 0); transform:translateY(20px); } to { clip-path:inset(0); transform:translateY(0); } }
.joex-hero { overflow:hidden; }
/* Match the hero palette and grid; keep proof bands and clickable rows pure white. */
.home .joe-case-section,
.home .joex-other, .home .joex-about {
  background:linear-gradient(rgba(0,0,0,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.025) 1px,transparent 1px),radial-gradient(circle at 88% 48%,rgba(0,0,0,.09),transparent 28%),linear-gradient(115deg,#fff 0%,#f7f7f7 68%,#eee 100%);
  background-size:80px 80px,80px 80px,auto,auto;
}
.home .joex-proof, .home .joex-services, .home .joex-news, .home .joex-service-list a,
.home .joex-service-list a:hover, .home .joex-service-list a:focus,
.home .joex-news-item { background:#fff; }
.home .joex-news-item { grid-template-columns:minmax(0,1fr) 44px; gap:12px 24px; text-align:left; }
.home .joex-news-item time { grid-column:1; grid-row:1; }
.home .joex-news-item > .joex-news-summary { grid-column:1; grid-row:2; }
.home .joex-news-item > .joex-news-arrow { grid-column:2; grid-row:2; }
@media(max-width:760px) {
  .home .joex-news-item { grid-template-columns:minmax(0,1fr) 30px; gap:12px; }
}
.home .joe-case-section, .home .joe-team-section { padding-block:clamp(56px,6vw,88px); }
.home .joe-case-section .joex-section-head, .home .joe-team-section .joex-section-head { margin-bottom:32px; }
.home .joe-case-card { padding-top:28px; gap:clamp(28px,5vw,64px); }
.home .joe-case-result strong { margin-top:18px; font-size:clamp(3.5rem,5vw,5rem); }
.home .joe-case-result p { max-width:360px; line-height:1.7; }
.home .joe-team-section .joex-section-head { grid-template-columns:minmax(0,1fr); text-align:left; margin-left:0; margin-right:0; }
.home .joe-team-section .joex-section-head h2 { grid-column:1; justify-self:start; text-align:left; }
.home .joe-team-overview { grid-template-columns:minmax(0,1fr); padding-bottom:28px; gap:32px; text-align:left; }
.home .joe-team-fde strong { font-size:clamp(4rem,7vw,6rem); }
.home .joe-team-representative { grid-template-columns:160px minmax(0,1fr); gap:28px; margin-top:28px; }
.home .joe-team-portrait { width:160px; }
.home .joe-team-profile h3 { font-size:clamp(1.7rem,3vw,2.4rem); }
.home .joe-team-role { margin:10px 0 6px; }
.home .joe-team-english { margin:8px 0 16px; }
.home .joe-disclosure { border-top:1px solid #0003; margin-top:22px; }
.home .joe-team-section .joe-disclosure { border-color:#ffffff38; }
.home .joe-disclosure summary { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:52px; padding:12px 0; cursor:pointer; list-style:none; font-size:.9rem; font-weight:700; }
.home .joe-disclosure summary::-webkit-details-marker { display:none; }
.home .joe-disclosure summary::after { content:'+'; font-size:1.5rem; font-weight:400; }
.home .joe-disclosure[open] > summary::after { content:'−'; }
.home .joe-disclosure summary:focus-visible { outline:2px solid currentColor; outline-offset:4px; }
.home .joe-disclosure-body { padding:8px 0 16px; line-height:1.9; }
.home .joe-disclosure-body dl { margin:0; }
@media(max-width:760px) {
  .home .joe-team-overview { grid-template-columns:1fr; gap:24px; }
  .home .joe-team-representative { grid-template-columns:88px minmax(0,1fr); gap:18px; }
  .home .joe-team-portrait { width:88px; }
  .home .joe-team-profile { min-width:0; }
  .home .joe-team-english { font-size:.65rem; letter-spacing:.05em; }
}
.home .joe-team-expertise { grid-template-columns:1fr; }
.home .joe-team-expertise article { padding-left:0; padding-right:0; }
.home .joex-news-item, .home .joex-booking a { transition:transform 160ms ease; }
@media (hover:hover) and (pointer:fine) {
  .home .joex-news-item:hover, .home .joex-booking a:hover { transform:translateX(6px); }
}
.home .joex-news-item:focus-within,
.home .joex-booking a:focus-visible { transform:translateX(6px); }
@media(prefers-reduced-motion:reduce) {
  .home .joex-news-item, .home .joex-booking a { transform:none!important; transition:none; }
}
.joe-background-constellation { position:absolute; top:70px; right:2%; width:min(58%,650px); height:auto; pointer-events:none; z-index:0; color:#b9c9ed; opacity:.3; }
.joe-background-constellation path { fill:none; stroke:currentColor; stroke-width:.7; opacity:.55; }
.joe-background-constellation circle { fill:currentColor; }
.joe-background-constellation { translate:var(--sky-push-x,0px) var(--sky-push-y,0px); transition:translate 850ms cubic-bezier(.2,.7,.2,1); }
@media(prefers-reduced-motion:reduce) { .joe-background-constellation { translate:none!important; transition:none!important; } }
.home .joe-light-sky { position:relative; isolation:isolate; overflow:hidden; }
.joe-light-sky > .wrap { position:relative; z-index:1; }
.joe-light-sky .joe-background-constellation { color:#111; opacity:.22; }
.joe-background-constellation { width:clamp(280px,50%,680px); top:auto; right:auto; animation:joe-sky-drift var(--drift-duration,28s) linear var(--drift-delay,0s) infinite alternate; animation-play-state:paused; }
.joe-background-constellation.joe-sky-0 { top:35px; right:2%; }
.joe-background-constellation.joe-sky-1 { top:34%; left:-3%; width:clamp(240px,39%,530px); }
.joe-background-constellation.joe-sky-2 { bottom:5%; right:0; }
.joe-background-constellation.joe-sky-3 { bottom:1%; left:8%; width:clamp(220px,35%,470px); }
.joe-background-constellation circle { transform-box:fill-box; transform-origin:center; animation:joe-star-twinkle var(--twinkle-duration,12s) ease-in-out var(--twinkle-delay,0s) infinite; animation-play-state:paused; }
.joe-sky-visible .joe-background-constellation, .joe-sky-visible .joe-background-constellation circle { animation-play-state:running; }
.joe-sky-paused .joe-background-constellation, .joe-sky-paused .joe-background-constellation circle { animation-play-state:paused; }
@keyframes joe-sky-drift { from { transform:translate(-28px,18px) rotate(-2deg); } to { transform:translate(28px,-18px) rotate(2deg); } }
@keyframes joe-star-twinkle { 0%,83%,100% { opacity:.65; transform:scale(1); } 89% { opacity:1; transform:scale(1.65); } 95% { opacity:.75; transform:scale(1); } }
@media(prefers-reduced-motion:reduce) { .joe-background-constellation, .joe-background-constellation circle { animation:none!important; } }
.home .joe-space-section { position:relative; isolation:isolate; overflow:hidden; background:#0d1017; }
.joe-space-section > .wrap { position:relative; z-index:1; }
.joe-space-section::before, .joe-space-section::after { content:""; position:absolute; inset:-35px; pointer-events:none; z-index:0; }
.joe-space-section::before { background:radial-gradient(ellipse at 78% 22%,#455d843d,transparent 48%),radial-gradient(ellipse at 12% 74%,#51496626,transparent 42%),radial-gradient(ellipse at 65% 85%,#344e661f,transparent 38%); }
.joe-space-section::after { opacity:.6; background-image:radial-gradient(circle at 13% 19%,#d9e4ff 0 .7px,transparent 1.4px),radial-gradient(circle at 72% 41%,#b9cce0 0 .6px,transparent 1.3px),radial-gradient(circle at 38% 83%,#e4e9f0 0 .8px,transparent 1.5px),radial-gradient(circle at 87% 68%,#b0c2df 0 .5px,transparent 1.1px); background-size:367px 293px,491px 401px,607px 457px,271px 389px; }
@media (hover:none), (pointer:coarse), (prefers-reduced-motion:reduce) { .joe-space-section::before,.joe-space-section::after { transform:none; transition:none; } }
.joe-magnetic-part { display:inline-block; translate:var(--joe-mx,0px) var(--joe-my,0px); transition:translate .35s cubic-bezier(.2,.8,.2,1); }
@media (hover:none), (pointer:coarse), (prefers-reduced-motion:reduce) { .joe-magnetic-part { translate:none; transition:none; } }
.home .joex-service-list b { transition:transform .25s ease; }
.home .joex-service-list a:hover b { transform:translateX(4px); }
@media(min-width:981px) { .home .joex-hero h1 { font-size:clamp(3rem,5.5vw,6.2rem); max-width:75%; } .home .joex-hero-bottom { margin-top:36px; } .joe-cinema { opacity:.57; } }
@media(max-width:980px) { .joe-cinema { width:460px; right:-80px; top:125px; opacity:.23; } .home .joex-hero h1 { max-width:100%; } }
@media(max-width:760px) { .joe-cinema { right:-100px; top:138px; transform:scale(.8); transform-origin:top right; opacity:.17; } .joe-film-control { margin-right:16px; min-height:44px; } .joe-film-playing .joe-cinema-stage { animation-name:joe-camera-mobile; } }
@keyframes joe-camera-mobile { from { transform:translateY(20px) rotate(-13deg) scale(1.05); opacity:0; } to { transform:rotate(-8deg) scale(.88); opacity:1; } }
@media(prefers-reduced-motion:reduce) { .joe-cinema *, .joe-film-playing h1 > strong { animation:none!important; } .joe-type-letter { opacity:1; } .joe-cursor-ring,.joe-film-control { display:none!important; } .home .joex-service-list b { transition:none; } }

/* Full-screen premiere. All movement ends within 5.8 seconds. */
.joe-premiere {
  --joe-intro-ready:1;
  position:fixed; inset:0; width:100%; max-width:none; height:100%; height:100dvh;
  max-height:none; margin:0; padding:0; border:0; overflow:hidden; color:#f4f4f0;
  background:transparent; isolation:isolate; font-family:Montserrat,"Noto Sans JP",sans-serif;
}
.joe-premiere::backdrop { background:transparent; }
.joe-premiere-curtain { position:absolute; top:0; bottom:0; width:50.1%; background:#08090b; z-index:-1; }
.joe-curtain-left { left:0; } .joe-curtain-right { right:0; }
.joe-premiere-picture { position:absolute; inset:0; overflow:hidden; perspective:1100px; }
.joe-premiere-light { position:absolute; inset:-30%; background:radial-gradient(ellipse at 65% 50%,#c6c9cf29,transparent 40%); }
.joe-premiere-grain { position:absolute; inset:0; opacity:.2; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' opacity='.28' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); pointer-events:none; }
.joe-premiere-grid { position:absolute; inset:-30%; opacity:.25; background:linear-gradient(#ffffff18 1px,transparent 1px),linear-gradient(90deg,#ffffff18 1px,transparent 1px); background-size:90px 90px; transform:perspective(600px) rotateX(65deg) translateY(40%); mask-image:linear-gradient(transparent,#000); }
.joe-premiere-orbit { position:absolute; width:100vw; height:100vw; left:50%; top:50%; border:1px solid #ffffff35; border-radius:50%; transform:translate(-50%,-50%) rotateX(66deg) rotateY(-20deg); box-shadow:0 -2px 2px #ffffff0f; }
.joe-orbit-two { width:73vw; height:73vw; transform:translate(-50%,-50%) rotateX(45deg) rotateY(60deg); }
.joe-orbit-three { width:125vw; height:125vw; border-color:#ffffff12; transform:translate(-50%,-50%) rotateX(75deg) rotateY(25deg); }
.joe-premiere-brand { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; }
.joe-premiere-brand > span { display:block; font:900 clamp(180px,35vw,680px)/.8 Montserrat,sans-serif; letter-spacing:-.095em; padding-right:.08em; color:transparent; background:linear-gradient(115deg,#45474b 10%,#b9bcc2 25%,#fff 36%,#74767b 46%,#e0e1e5 53%,#3f4144 65%,#d1d3d9 80%); background-size:220% 100%; background-clip:text; -webkit-background-clip:text; }
.joe-premiere-brand small { margin-top:36px; color:#aaaeb5; font:500 10px/1.4 Montserrat,sans-serif; letter-spacing:.55em; }
.joe-premiere-montage { position:absolute; inset:0; opacity:0; perspective:900px; }
.joe-premiere-rail { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:1vh; transform:rotate(-9deg) scale(1.05); color:#ffffff08; -webkit-text-stroke:1px #ffffff30; font:900 clamp(85px,15vw,240px)/.88 Montserrat,sans-serif; letter-spacing:-.06em; }
.joe-premiere-rail span:nth-child(2) { align-self:center; } .joe-premiere-rail span:nth-child(3) { align-self:flex-end; }
.joe-premiere-objects { position:absolute; left:50%; top:50%; width:700px; height:430px; transform:translate(-50%,-50%); color:#141414; }
.joe-premiere-objects .joe-cinema-stage { transform:rotate(-10deg) scale(1.25); }
.joe-premiere-objects .joe-film-card { box-shadow:0 30px 100px #000a,0 0 0 1px #fff6; }
.joe-premiere-objects .joe-film-fragment { color:#ddd; }
.joe-premiere-montage-label { position:absolute; left:0; right:0; bottom:14%; text-align:center; font:10px monospace; letter-spacing:.3em; color:#a6a7aa; }
.joe-premiere-title { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; padding:8vh 9vw; opacity:0; }
.joe-premiere-title > div { overflow:hidden; padding-bottom:.06em; }
.joe-premiere-title span { display:block; font-size:clamp(24px,3.8vw,65px); line-height:1.4; color:#a1a4aa; font-weight:700; }
.joe-premiere-title strong { display:block; font-size:clamp(45px,8.7vw,155px); font-weight:900; line-height:1.13; letter-spacing:-.075em; }
.joe-premiere-title small { margin-top:4vh; font-size:11px; letter-spacing:.25em; color:#b5b5b5; }
.joe-premiere-sweep { position:absolute; width:18%; height:160%; left:-40%; top:-30%; background:linear-gradient(90deg,transparent,#fff2,transparent); transform:rotate(25deg); opacity:0; }
.joe-premiere-top { position:absolute; top:30px; left:4vw; right:4vw; display:flex; justify-content:space-between; font:600 10px/1.5 monospace; letter-spacing:.15em; color:#aaaeb5; }
.joe-premiere-top span:first-child { color:#fff; font:900 15px Montserrat,sans-serif; letter-spacing:-.03em; }
.joe-premiere-skip { position:absolute; right:4vw; bottom:65px; z-index:10; min-height:44px; padding:10px 18px; border:1px solid #ffffff60; border-radius:0; background:#090a0be6; color:white; font:600 12px "Noto Sans JP",sans-serif; cursor:pointer; }
.joe-premiere-skip span { margin-left:28px; } .joe-premiere-skip:hover { background:#fff; color:#111; } .joe-premiere-skip:focus-visible { outline:2px solid white; outline-offset:5px; }
.joe-premiere-bottom { position:absolute; bottom:28px; left:4vw; right:4vw; display:flex; align-items:center; gap:24px; font:9px monospace; letter-spacing:.16em; color:#aaaeb5; }
.joe-premiere-progress { height:1px; background:#ffffff26; flex:1; overflow:hidden; }
.joe-premiere-progress i { display:block; height:1px; background:#d8dadd; transform-origin:left; }
.joe-premiere.is-playing .joe-premiere-brand { animation:joe-premiere-brand 5.8s both; }
.joe-premiere.is-playing .joe-premiere-brand > span { animation:joe-premiere-metal 2s ease-out both; }
.joe-premiere.is-playing .joe-premiere-montage { animation:joe-premiere-montage 5.8s both; }
.joe-premiere.is-playing .joe-premiere-objects .joe-film-article { animation:joe-premiere-article 5.8s both; }
.joe-premiere.is-playing .joe-premiere-objects .joe-film-flow { animation:joe-premiere-flow 5.8s both; }
.joe-premiere.is-playing .joe-premiere-objects .joe-film-web { animation:joe-premiere-web 5.8s both; }
.joe-premiere.is-playing .joe-premiere-title { animation:joe-premiere-title 5.8s both; }
.joe-premiere.is-playing .joe-premiere-title strong { animation:joe-premiere-type 1s 3.05s cubic-bezier(.16,1,.3,1) both; }
.joe-premiere.is-playing .joe-premiere-title > div:nth-child(3) strong { animation-delay:3.2s; }
.joe-premiere.is-playing .joe-premiere-picture { animation:joe-premiere-picture 5.8s both; }
.joe-premiere.is-playing .joe-premiere-light { animation:joe-premiere-light 5.8s both; }
.joe-premiere.is-playing .joe-premiere-sweep { animation:joe-premiere-sweep 2s .1s ease-in-out both; }
.joe-premiere.is-playing .joe-curtain-left { animation:joe-premiere-left .85s 4.85s cubic-bezier(.76,0,.24,1) both; }
.joe-premiere.is-playing .joe-curtain-right { animation:joe-premiere-right .85s 4.85s cubic-bezier(.76,0,.24,1) both; }
.joe-premiere.is-playing .joe-premiere-top,.joe-premiere.is-playing .joe-premiere-bottom { animation:joe-premiere-chrome 5.8s both; }
.joe-premiere.is-playing .joe-premiere-progress i { animation:joe-premiere-progress 5.6s linear both; }
@keyframes joe-premiere-brand { 0% { transform:scale(2.8) translateX(8%); opacity:0; filter:blur(8px); } 8% { opacity:1; } 23% { transform:scale(1); opacity:1; filter:blur(0); } 29% { transform:scale(.9); opacity:0; filter:blur(5px); } 100% { opacity:0; } }
@keyframes joe-premiere-metal { from { background-position:100% 0; } to { background-position:0% 0; } }
@keyframes joe-premiere-montage { 0%,22% { opacity:0; transform:scale(.75) rotate(4deg); } 32%,46% { opacity:1; transform:scale(1) rotate(0); } 56%,100% { opacity:0; transform:scale(1.18) translateY(-25px); } }
@keyframes joe-premiere-article { 0%,22% { transform:translate(-180px,80px) rotateY(-60deg) rotate(-20deg); } 40%,100% { transform:rotateY(-13deg) rotateX(9deg); } }
@keyframes joe-premiere-flow { 0%,22% { transform:translate(180px,-90px) rotateY(40deg) rotate(20deg); } 43%,100% { transform:rotateY(-15deg) rotate(9deg); } }
@keyframes joe-premiere-web { 0%,22% { transform:translate(-150px,150px) rotateY(-40deg) rotate(-30deg); } 45%,100% { transform:rotate(-7deg) rotateY(12deg); } }
@keyframes joe-premiere-title { 0%,51% { opacity:0; transform:translateY(20px); } 58%,80% { opacity:1; transform:translateY(0); } 87%,100% { opacity:0; transform:translateY(-12px); } }
@keyframes joe-premiere-type { from { transform:translateY(115%) rotate(3deg); } to { transform:translateY(0) rotate(0); } }
@keyframes joe-premiere-picture { 0%,78% { opacity:1; } 87%,100% { opacity:0; } }
@keyframes joe-premiere-light { from { transform:translateX(-30%); } to { transform:translateX(20%); } }
@keyframes joe-premiere-sweep { 0% { opacity:0; left:-40%; } 20% { opacity:1; } 100% { opacity:0; left:120%; } }
@keyframes joe-premiere-left { to { transform:translateX(-101%); } }
@keyframes joe-premiere-right { to { transform:translateX(101%); } }
@keyframes joe-premiere-chrome { 0%,80% { opacity:1; } 90%,100% { opacity:0; } }
@keyframes joe-premiere-progress { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@media(max-width:760px) {
  .joe-premiere-top { top:24px; } .joe-premiere-top span:last-child { font-size:7px; letter-spacing:.04em; max-width:190px; text-align:right; }
  .joe-premiere-brand > span { font-size:49vw; } .joe-premiere-brand small { font-size:7px; letter-spacing:.3em; margin-top:20px; }
  .joe-premiere-objects { transform:translate(-50%,-50%) scale(.62); }
  .joe-premiere-title { padding:8vh 7vw; } .joe-premiere-title strong { font-size:10.7vw; }
  .joe-premiere-title small { font-size:9px; } .joe-premiere-orbit { width:180vw; height:180vw; }
  .joe-premiere-montage-label { font-size:7px; letter-spacing:.15em; bottom:19%; }
  .joe-premiere-bottom { gap:12px; font-size:7px; letter-spacing:.08em; }
  .joe-premiere-skip { bottom:70px; } .joe-premiere-grain { display:none; }
}
@media(max-height:500px) { .joe-premiere-title { padding:25px 9vw; } .joe-premiere-title strong { font-size:12vh; } .joe-premiere-title span { font-size:6vh; } .joe-premiere-title small { margin-top:12px; } .joe-premiere-objects { transform:translate(-50%,-50%) scale(.65); } }
@media(prefers-reduced-motion:reduce) { .joe-premiere { display:none!important; } .joe-premiere * { animation:none!important; } }

/* Two opening statements, then the original JOE / panels sequence. */
.joe-premiere-prelude { position:absolute; inset:0; z-index:2; padding:9vw; display:flex; flex-direction:column; justify-content:center; background:#08090b; font-size:clamp(32px,7vw,115px); line-height:1.3; font-weight:900; letter-spacing:-.055em; opacity:0; }
.joe-prelude-two { display:block; align-content:center; }
.joe-premiere-prelude ruby { ruby-align:center; }
.joe-premiere-prelude rt { font-size:.18em; letter-spacing:.1em; }
.joe-premiere.is-playing .joe-prelude-one { animation:joe-prelude-cut .8s both; }
.joe-premiere.is-playing .joe-prelude-two { animation:joe-prelude-cut .8s .8s both; }
@keyframes joe-prelude-cut { 0% { opacity:0; transform:translateY(12px); } 12%,88% { opacity:1; transform:translateY(0); } 100% { opacity:0; transform:translateY(-6px); } }
.joe-premiere.is-playing .joe-premiere-brand,
.joe-premiere.is-playing .joe-premiere-brand > span,
.joe-premiere.is-playing .joe-premiere-montage,
.joe-premiere.is-playing .joe-premiere-objects .joe-film-card,
.joe-premiere.is-playing .joe-premiere-title,
.joe-premiere.is-playing .joe-premiere-picture,
.joe-premiere.is-playing .joe-premiere-light { animation-delay:1.6s; }
.joe-premiere.is-playing .joe-premiere-title strong { animation-delay:4.65s; }
.joe-premiere.is-playing .joe-premiere-title > div:nth-child(3) strong { animation-delay:4.8s; }
.joe-premiere.is-playing .joe-premiere-sweep { animation-delay:1.7s; }
.joe-premiere.is-playing .joe-curtain-left,.joe-premiere.is-playing .joe-curtain-right { animation-delay:6.45s; }
.joe-premiere.is-playing .joe-premiere-top,.joe-premiere.is-playing .joe-premiere-bottom { animation-duration:7.4s; }
.joe-premiere.is-playing .joe-premiere-progress i { animation-duration:7.2s; }
@media(max-width:760px) { .joe-premiere-prelude { padding:7vw; font-size:7.7vw; } .joe-prelude-two { font-size:10.5vw; } }