/* A plain kraft-paper box, opaque paint, and a quiet white reading surface. */
.ib-cinema {
  position:relative;display:block;padding:60px 6% 92px;min-height:640px;
  aspect-ratio:16/9;background:#fff;color:#111;border:1px solid #ececec;
  border-radius:6px;isolation:isolate;overflow:hidden;
}
.ib-cinema-image {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;z-index:-2}
.ib-cinema-shade {position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#fff 0%,#fffffff2 21%,#ffffff80 36%,#fff0 50%)}
.ib-cinema .ib-hero-copy {position:relative;max-width:340px;color:#111}
.ib-cinema .ib-overline {font:14px var(--mono);font-weight:500;letter-spacing:2px;color:#404040}
.ib-cinema h1 {color:#111;font-size:clamp(74px,7.2vw,110px);font-weight:600;line-height:1.08;letter-spacing:-4px;margin:35px 0 25px;text-shadow:none}
.ib-cinema .ib-title-dot {color:#111}
.ib-cinema .ib-lead {color:#222;font-size:19px;font-weight:400;line-height:1.7;letter-spacing:1px;margin:0 0 28px}
.ib-cinema .ib-primary {color:#fff;background:#111;border:1px solid #111;font-size:16px;padding:13px 20px;min-height:48px;box-shadow:none;gap:30px}
.ib-cinema .ib-primary:hover {background:#333;border-color:#333;box-shadow:none}
.ib-cinema .ib-hero-foot {border-color:#dedede;bottom:22px;color:#404040;font-size:14px;letter-spacing:1.5px}
.ib-cinema .ib-hero-foot span:last-child {color:#404040;font-size:14px;letter-spacing:2px}
.ib-cinema .ib-replay {
  left:6%;right:auto;bottom:79px;transform:none;border:1px solid #c9c9c9;
  border-radius:30px;background:#ffffffeb;padding:10px 15px;display:flex;
  gap:10px;align-items:center;color:#222;font-size:14px;min-height:44px;z-index:2;
}
.ib-cinema .ib-replay:hover {background:#f4f4f4;border-color:#888}
.ib-cinema .ib-play-icon {display:grid;place-items:center;border:1px solid #888;border-radius:50%;height:21px;width:21px;margin:0;font-size:14px}

/* The home-page cover shows the paint even without hover or a mouse. */
.ib-photo-card {background:#fff;border:1px solid #ececec}
.ib-photo-card>img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.ib-photo-card .ib-cover-closed {opacity:0}
.ib-photo-card .ib-cover-open {opacity:1}
.project-card>a:hover .ib-cover-open,.project-card>a:focus-visible .ib-cover-open {transform:scale(1.035)}
.ib-photo-card:after {content:none}
.ib-photo-card .ib-art-label,.ib-photo-card .ib-art-bottom {z-index:1;color:#111}
.ib-photo-card .ib-art-label {font:14px var(--mono);letter-spacing:1.7px}
.ib-photo-card .ib-art-bottom b {color:#111}

/* Preserve the separate source artwork used inside the idea collection. */
.ib-card-art .ib-idea-cover {position:absolute;width:100%;height:100%;inset:0;object-fit:cover;object-position:center}
.ib-card-art:after {content:'';position:absolute;inset:0;background:linear-gradient(180deg,#08101570,transparent 40%,transparent 65%,#081015a8)}
.ib-card-serial,.ib-card-art-foot {z-index:1;color:#fff;opacity:.9;text-shadow:0 1px 4px #0007}

.ib-cinematic-opening {background:#fff;animation:ib-paper-exit 2.2s both;isolation:isolate;overflow:hidden}
.ib-cinematic-opening>img {position:absolute;inset:0;height:100%;width:100%;object-fit:cover;object-position:right center}
.ib-frame-closed {animation:ib-paper-close 1.5s ease-out .22s both}
.ib-frame-open {animation:ib-paint-reveal 1.5s cubic-bezier(.16,.75,.18,1) .22s both}
.ib-paint-drop {
  position:absolute;left:70%;top:60%;width:8px;height:11px;border-radius:48% 52% 55% 45%;
  background:var(--color);box-shadow:none;animation:ib-paint-flight 1.35s cubic-bezier(.1,.8,.3,1) both;animation-delay:var(--lag);
}
.ib-opening-title {position:absolute;left:8%;bottom:13%;color:#111;animation:ib-opening-copy 2.2s both;text-shadow:none}
.ib-opening-title>span {font:14px var(--mono);letter-spacing:3px;color:#404040;display:block;margin-bottom:15px}
.ib-opening-title>strong {font-size:32px;letter-spacing:1px;font-weight:450}
.ib-opening.ib-cinematic-opening .ib-opening-inner {display:none}
@keyframes ib-paper-close {0%,20%{opacity:1}80%,100%{opacity:0}}
@keyframes ib-paint-reveal {from{clip-path:circle(0 at 70% 60%)}to{clip-path:circle(120% at 70% 60%)}}
@keyframes ib-paint-flight {
  0%,8%{opacity:0;transform:translate(0,0) scale(.3) rotate(0)}
  20%,70%{opacity:1}
  100%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(1.2) rotate(120deg)}
}
@keyframes ib-paper-exit {0%,78%{opacity:1}100%{opacity:0}}
@keyframes ib-opening-copy {0%{opacity:0;transform:translateY(12px)}35%,80%{opacity:1;transform:translateY(0)}100%{opacity:0}}

@media(max-width:1000px) and (min-width:601px) {
  .ib-cinema {min-height:590px;padding-top:52px}
  .ib-cinema h1 {font-size:80px}
  .ib-cinema .ib-hero-copy {max-width:300px}
  .ib-cinema .ib-lead {font-size:18px}
}
@media(max-width:600px) {
  .ib-cinema {display:flex;flex-direction:column;min-height:0;aspect-ratio:auto;padding:0 0 24px;border-radius:5px;background:#fff}
  .ib-cinema-image {position:relative;inset:auto;order:2;width:100%;height:clamp(280px,80vw,420px);object-position:right center;z-index:0}
  .ib-cinema-shade {display:none}
  .ib-cinema .ib-hero-copy {order:1;max-width:none;padding:28px 24px 12px}
  .ib-cinema .ib-overline {font-size:14px;letter-spacing:1.2px}
  .ib-cinema h1 {font-size:54px;letter-spacing:-3px;margin:22px 0 17px;line-height:1.15}
  .ib-cinema h1 br {display:none}
  .ib-cinema .ib-lead {font-size:17px;line-height:1.65;letter-spacing:1px;margin:0 0 21px}
  .ib-cinema .ib-primary {min-height:44px;padding:11px 16px;font-size:16px;gap:27px}
  .ib-cinema .ib-replay {position:static;order:3;align-self:flex-start;margin:8px 24px 18px;padding:8px 12px;font-size:14px;gap:8px;min-height:42px}
  .ib-cinema .ib-play-icon {height:20px;width:20px;font-size:14px}
  .ib-cinema .ib-hero-foot {position:static;order:4;margin:0 24px;padding-top:16px;display:flex;flex-wrap:wrap;gap:8px;font-size:14px;letter-spacing:1px}
  .ib-cinema .ib-hero-foot span:last-child {font-size:14px;letter-spacing:1px}
  .ib-cinematic-opening>img {inset:auto;left:-70%;top:50%;width:170%;max-width:none;height:auto;transform:translateY(-55%)}
  .ib-opening-title {left:8%;bottom:12%}
  .ib-opening-title>span {font-size:14px;letter-spacing:2px}
  .ib-opening-title>strong {font-size:26px}
  .ib-paint-drop {left:65%;top:58%}
}
@media(prefers-reduced-motion:reduce) {
  .ib-cinematic-opening {display:none!important}
  .ib-photo-card>img {transition:none!important}
  .project-card>a:hover .ib-cover-open,.project-card>a:focus-visible .ib-cover-open {transform:none}
}