/* Painted tendrils bridge the hero and paper without intercepting input. */
.opening-sequence { position:relative; isolation:isolate; overflow:clip; }
.opening-sequence .hero { isolation:auto; overflow:visible; background:transparent; }
.hero h1,.hero-eyebrow,.hero-edition,.hero-art-note,.hero-bottom,.hero-rule { z-index:2; }
.hero-art-note,.hero-bottom,.hero-rule { text-shadow:0 1px 12px #10110f,0 1px 4px #10110f; }
.vine-canopy { position:relative; z-index:1; height:0; pointer-events:none; }
.vine-layer { position:absolute; width:105%; height:clamp(520px,48vw,740px); right:-3%; bottom:-50px; transform-origin:85% 90%; }
.vine-layer img { width:100%; height:100%; max-width:none; }
.vine-layer-back { right:2%; bottom:-5px; opacity:calc(.36 * var(--vine-fade,1)); filter:brightness(.65); }
.vine-layer-main { opacity:var(--vine-fade,1); filter:drop-shadow(0 9px 8px #10110f24); }
.vine-layer-front { right:7%; bottom:-90px; opacity:calc(.76 * var(--vine-fade,1)); mask-image:linear-gradient(0deg,#000 0%,#000 20%,transparent 42%); }
.vine-layer-front img { transform:scaleX(-1); }
.opening-sequence .studio-section { padding-top:150px; }
.studio-copy,.studio-margin,.studio-plus { position:relative; z-index:2; }
.studio-plus { position:absolute; }
@media(max-width:1100px) {
  .vine-layer { width:120%; right:-12%; }
  .vine-layer-back { right:-5%; }
  .vine-layer-front { right:0; }
  .opening-sequence .studio-section { padding-top:140px; }
}
@media(max-width:700px) {
  .vine-layer { width:800px; height:520px; right:-125px; bottom:-46px; }
  .vine-layer-back { right:-95px; bottom:6px; opacity:calc(.28 * var(--vine-fade,1)); }
  .vine-layer-front { right:-20px; bottom:-72px; width:690px; opacity:calc(.72 * var(--vine-fade,1)); }
  .hero-art-note { bottom:206px; }
  .hero-bottom { bottom:112px; }
  .hero-rule { bottom:57px; }
  .opening-sequence .studio-section { padding-top:125px; }
}

/* The transparent strand textures are bent independently on this drawing surface. */
.vine-motion { display:none; position:absolute; width:106%; height:clamp(760px,70vw,1000px); right:-3%; bottom:-135px; }
.has-woven-vines .vine-motion { display:block; }
.has-woven-vines .vine-layer { display:none; }
@media(max-width:700px) {
  .vine-motion { width:800px; height:760px; right:-130px; bottom:-110px; }
}
@media(prefers-reduced-motion:reduce) {
  .has-woven-vines .vine-motion { display:none; }
  .has-woven-vines .vine-layer { display:block; }
}